@utogether/udp-core 1.0.0

package/src/views/system/sys/sys-config.vue

@@ -0,0 +1,291 @@
+<template>
+  <div v-spinning="loading" class="flex flex-col items-center bg-white u-system-config">
+    <div class="flex justify-end w-1/2 p-2">
+      <el-button type="primary" @click="submitForm(xfrom)">
+        {{ $t('message.btn.confirm') }}
+      </el-button>
+    </div>
+    <div class="flex w-1/2 p-2 overflow-y-auto border border-gray-300 rounded-md">
+      <el-form
+        ref="xfrom"
+        :model="record"
+        :rules="rules"
+        label-width="90"
+        size="small"
+        status-icon
+        class="w-full"
+      >
+        <el-form-item :label="$t('message.udp.systemTitle')" prop="title">
+          <el-input v-model="record.title" />
+        </el-form-item>
+        <!-- <el-form-item :label="$t('message.udp.ispTitle')" prop="ispTitle">
+          <el-input v-model="record.ispTitle" />
+        </el-form-item> -->
+        <el-form-item :label="$t('message.udp.copyright')" prop="copyright">
+          <el-input v-model="record.copyright" />
+        </el-form-item>
+        <el-form-item :label="$t('message.udp.defaultLanguage')" prop="defaultLanguage">
+          <el-select v-model="record.defaultLanguage" placeholder="please select">
+            <el-option label="中文" value="zh" />
+            <el-option label="英文" value="en" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('message.udp.i18nEnabled')" prop="i18nEnabled">
+          <el-switch v-model="record.i18nEnabled" active-value="Y" inactive-value="N" />
+        </el-form-item>
+        <el-form-item :label="$t('message.udp.systemLogo')">
+          <el-upload
+            v-model:file-list="record.logo"
+            class="u-upload"
+            :action="baseUrl + '/ufil/file/uploadMultipart'"
+            :headers="headers"
+            :on-exceed="handleExceed"
+            accept=".png,.jpg,.jpeg,.PNG,.JPEG,.jPG"
+            list-type="picture"
+            :limit="1"
+          >
+            <!-- :before-upload="handleBeforUpload" -->
+            <div class="flex items-center">
+              <el-button type="primary">{{ $t('message.btn.upload') }}</el-button>
+              <div class="pl-2 text-xs">
+                <span>
+                  {{ $t('message.tip.uploadFormat', { type: ': *.png,*.jpg;' }) }}
+                </span>
+                <span class="pl-2">{{ $t('message.tip.imageSize', { size: ': 600 * 200' }) }}</span>
+                <span class="pl-2">
+                  {{ $t('message.tip.imageCapacity', { capacity: ': <50kb' }) }}
+                </span>
+              </div>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('message.udp.homeBackimg')">
+          <el-upload
+            v-model:file-list="record.backgroundImg"
+            class="u-upload"
+            :action="baseUrl + '/ufil/file/uploadMultipart'"
+            :headers="headers"
+            :on-exceed="handleExceed"
+            accept=".png,.jpg,.jpeg,.PNG,.JPEG,.jPG"
+            list-type="picture"
+            :limit="1"
+          >
+            <div class="flex items-center">
+              <el-button type="primary">{{ $t('message.btn.upload') }}</el-button>
+              <div class="pl-2 text-xs">
+                <span>{{ $t('message.tip.uploadFormat', { type: ': *.png,*.jpg;' }) }}</span>
+                <span class="pl-2">{{ $t('message.tip.imageSize', { size: ': 4096 * 2048' }) }}</span>
+              </div>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('message.udp.systemFavicon')">
+          <el-upload
+            v-model:file-list="record.favicon"
+            class="u-upload"
+            :action="baseUrl + '/ufil/file/uploadMultipart'"
+            :headers="headers"
+            :on-exceed="handleExceed"
+            accept=".ico"
+            list-type="picture"
+            :limit="1"
+          >
+            <div class="flex items-center">
+              <el-button type="primary">{{ $t('message.btn.upload') }}</el-button>
+              <div class="pl-2 text-xs">
+                {{ $t('message.tip.uploadFormat', { type: ': *.ico,.png*.jpg;' }) }}
+              </div>
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, computed, onMounted } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+import to from 'await-to-js';
+import { successMessage, cookies, warnMessage } from '@utogether/utils';
+import { isArray } from 'xe-utils';
+import { kTOKEN } from '../../../contant';
+import { getServiceApi, getBaseURL } from '../../../api';
+
+const xfrom = ref<FormInstance>();
+const loading = ref(false);
+const record = reactive({
+  defaultLanguage: 'zh',
+  title: 'U-DP',
+  ispTitle: 'U-DP',
+  i18nEnabled: 'Y',
+  copyright: '深圳友聚信息技术有限公司',
+  logo: [],
+  backgroundImg: [],
+  favicon: []
+});
+
+const serviceApi = getServiceApi();
+const { t } = useI18n();
+
+const baseUrl = ref(getBaseURL());
+
+const url = '/upfm/v1/sysConfig';
+let dataList = [];
+
+const rules = reactive<FormRules>({
+  defaultLanguage: [
+    {
+      required: true,
+      message: t('message.required') + t('message.udp.defaultLanguage'),
+      trigger: 'blur'
+    }
+  ],
+  title: [
+    { required: true, message: t('message.required') + t('message.udp.systemTitle'), trigger: 'blur' }
+  ]
+});
+
+const headers = computed(() => {
+  const token = cookies.get(kTOKEN)!;
+  const data = JSON.parse(token);
+  const headers = {
+    Authorization: 'Bearer ' + data.accessToken
+  };
+  return headers;
+});
+
+const submitForm = (xfrom: FormInstance) => {
+  // const menthod = dataList.length ? 'put' : 'post';
+  Object.keys(record).forEach(field => {
+    const obj = {
+      configCode: field,
+      configValue: record[field],
+      configCategory: 'system',
+      fileName: ''
+    };
+    if (isArray(record[field])) {
+      obj.configValue = getImgActUrl(record[field][0]).url;
+      obj.fileName = getImgActUrl(record[field][0]).name;
+    }
+    const idx = dataList.findIndex(f => f.configCode === field);
+    if (idx !== -1) {
+      dataList[idx] = Object.assign(dataList[idx], obj);
+    } else {
+      dataList.push(obj);
+    }
+  });
+  // return;
+  xfrom?.validate(async valid => {
+    if (valid) {
+      loading.value = true;
+      const addList = dataList.filter(data => !data.id);
+      const updateList = dataList.filter(data => data.id);
+      const services = [];
+      if (addList.length) {
+        services.push(serviceApi.post(url, addList));
+      } else {
+        services.push(serviceApi.put(url, updateList));
+      }
+      const [err] = await to(Promise.all(services));
+      // const [err, data]: [Error, any] = await to(serviceApi[menthod](url, dataList));
+      if (!err) {
+        successMessage();
+        // console.log({ data });
+        // dataList = data;
+        // setDisplayObject();
+        setDisplayObject();
+      }
+      loading.value = false;
+    }
+  });
+};
+
+const getImgActUrl = file => {
+  if (file?.response) {
+    return { url: file.response.data, name: file.name };
+  }
+  return { url: file?.realpath || file?.url, name: file?.name };
+};
+
+const handleExceed = file => {
+  if (file) {
+    return warnMessage(t('message.tip.singleImg'));
+  }
+};
+
+// const handleBeforUpload = (file, type) => {
+//   console.log(file);
+//   console.log(type);
+//   return true;
+// };
+
+/**
+ * @description: 处理显示数据
+ * @return {*}
+ */
+const setDisplayObject = () => {
+  Object.keys(record).forEach(key => {
+    const data = dataList.find(f => f.configCode === key);
+    if (data) {
+      record[data.configCode] = data.configValue || record[data.configCode];
+      if (data.fileName) {
+        const { configValue, fileName } = data;
+        record[data.configCode] = [
+          { url: baseUrl.value + '/ufil' + configValue, realpath: configValue, name: fileName }
+        ];
+      }
+    }
+  });
+};
+/**
+ * @description: 查询系统配置
+ * @return {*}
+ */
+const getSysConfig = async () => {
+  const [err, data]: [Error, any] = await to(serviceApi.get(url, {}));
+  if (!err) {
+    dataList = data.list;
+  }
+  // dataList = [
+  //   { configCode: 'logo', configValue: '', fileName: 'logo' },
+  //   { configCode: 'backgroundImg', configValue: '', fileName: '首页背景' },
+  //   { configCode: 'favicon', configValue: '', fileName: 'favicon' },
+  //   { configCode: 'copyright', configValue: '' },
+  //   { configCode: 'i18nEnabled', configValue: '' },
+  //   { configCode: 'title', configValue: '' },
+  //   { configCode: 'defaultLanguage', configValue: '' }
+  // ];
+  setDisplayObject();
+};
+
+onMounted(() => {
+  getSysConfig();
+});
+</script>
+<style lang="scss">
+.u-system-config {
+  .el-select,
+  .el-select--small {
+    width: 100%;
+  }
+
+  .el-form-item__content {
+    width: 100%;
+  }
+
+  .u-upload {
+    width: 100%;
+
+    .el-upload-list {
+      margin: 0;
+    }
+
+    .el-upload-list__item {
+      max-height: 60px;
+      padding: 0;
+    }
+  }
+}
+</style>

package/src/views/system/sysUser/SysUser.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:44:15
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-06-24 17:20:10
+ * @Description: 系统用户
+-->
+<template>
+  <div class="u-content-panel1">
+    <SysUserPanel />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, provide } from 'vue';
+import SysUserPanel from './SysUserPanel.vue';
+// const active: any = ref({});
+const treeList: any = ref([]);
+// const scrollPanelChange: any = ref(false);
+
+// provide('active', active);
+provide('treeList', treeList);
+// provide('scrollPanelChange', scrollPanelChange);
+</script>
+
+<style lang="scss" scoped>
+.u-content-panel {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 86vh;
+  padding: 15px;
+
+  .u-left-panel {
+    width: 250px;
+  }
+
+  .content {
+    flex: 1;
+    width: calc(100% - 250px);
+    height: 82vh;
+    margin-left: 10px;
+  }
+}
+</style>

package/src/views/system/sysUser/SysUserPanel.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="page">
+    <ut-grid
+      ref="xgrid"
+      :columns="columns"
+      :items="formItems"
+      :url="url"
+      :default-params="paramExt"
+      :events="onGridEvents"
+    />
+    <!-- 编辑用户信息 -->
+    <vxe-modal v-model="data.showModelView" title="用户信息" width="300">
+      <template #default>
+        <vxe-form ref="xForm" :data="data.record" :rules="rules" title-align="right">
+          <vxe-form-item :title="$t('message.unitName')" field="unitId" span="24">
+            <template #default="{ data }">
+              <vxe-select v-model="data.unitId">
+                <vxe-option
+                  v-for="unit in treeList"
+                  :key="unit.id"
+                  :value="unit.id"
+                  :label="unit.unitName"
+                />
+              </vxe-select>
+            </template>
+          </vxe-form-item>
+          <vxe-form-item
+            :title="$t('message.userCode')"
+            :item-render="{ name: 'input', attrs: { disabled: data.dataStatus === 'update' } }"
+            field="userName"
+            span="24"
+          />
+          <vxe-form-item
+            :title="$t('message.userName')"
+            field="name"
+            span="24"
+            :item-render="{ name: 'input' }"
+          />
+          <vxe-form-item
+            v-if="data.dataStatus === 'add'"
+            :title="$t('message.userPwd')"
+            :item-render="{ name: 'input' }"
+            field="userPwd"
+            span="24"
+          />
+          <vxe-form-item align="right" span="24">
+            <template #default>
+              <ut-button content="cancel" icon="ri-close-fill" @click="handleClose" />
+              <ut-button content="confirm" icon="ri-save-3-fill" status="u-cyan" @click="onSubmit" />
+            </template>
+          </vxe-form-item>
+        </vxe-form>
+      </template>
+    </vxe-modal>
+    <!-- 用户角色 -->
+    <vxe-modal v-model="data.showUserRole" :title="$t('message.title.roleInfo')" width="600">
+      <template #default>
+        <vxe-table height="300" :data="data.roleList" border>
+          <vxe-column type="seq" width="60" />
+          <vxe-column field="roleName" :title="$t('message.udp.roleName')" />
+          <vxe-column field="roleDesc" :title="$t('message.udp.roleDesc')" />
+        </vxe-table>
+      </template>
+    </vxe-modal>
+    <vxe-modal v-model="data.showAuth" :title="$t('message.title.authority')" height="300" width="360">
+      <template #default>
+        <el-tree-v2
+          ref="xTree"
+          :data="data.roleList"
+          :props="{ children: 'children', label: 'menuName' }"
+          :height="420"
+          node-key="id"
+        />
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { useI18n } from 'vue-i18n';
+import { ref, reactive, inject, nextTick, onMounted } from 'vue';
+import to from 'await-to-js';
+import { useRender, errorMessage, warnMessage } from '@utogether/utils';
+import { VxeUI, VxeFormPropTypes } from 'vxe-pc-ui';
+import { isEmpty } from 'xe-utils';
+import { getServiceApi } from '../../../api';
+
+const data = reactive<IRecord>({
+  record: {},
+  listQuery: {},
+  dataList: [],
+  roleList: [],
+  submitLoading: false,
+  showModelView: false,
+  showUserRole: false,
+  showAuth: false,
+  dataStatus: ''
+});
+
+const serviceApi = getServiceApi();
+const { t } = useI18n();
+
+const rules: VxeFormPropTypes.Rules = {
+  userName: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.userCode')}`
+    }
+  ],
+  name: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.userName')}`
+    }
+  ],
+  unitId: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.unitName')}`
+    }
+  ],
+  userPwd: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.userPwd')}`
+    }
+  ]
+};
+const renderHook = useRender();
+const paramExt = ref({});
+const treeList: IRecord[] = inject('treeList');
+
+const url = '/uums/user';
+
+const xgrid = ref(null);
+
+const formItems = [
+  { field: 'name', title: 'message.userName' },
+  { field: 'userName', title: 'message.userCode' }
+];
+
+const columns = [
+  { type: 'checkbox', width: 40, align: 'center' },
+  { field: 'userName', title: 'message.userCode', required: true, editRender: renderHook.renderInput() },
+  { field: 'name', title: 'message.userName', required: true, editRender: renderHook.renderInput() },
+  {
+    field: 'type',
+    title: 'message.sysType',
+    formatter: ['formatDict', 'SU.ENABLE'],
+    editRender: renderHook.renderDict('SU.USER.TYPE')
+  },
+  {
+    field: 'userPwd',
+    required: true,
+    width: 150,
+    editRender: renderHook.renderInput(),
+    formatter: () => '*******'
+  },
+  { field: 'enabled', width: 80, cellRender: renderHook.renderEnabled(handleClick) },
+  {
+    field: 'operate',
+    width: 240,
+    fixed: 'right',
+    slots: {
+      default: ({ row }) => {
+        return [
+          <>
+            <ut-button icon="ri-user-fill" content="role" onTap={() => handleRole(row)} />
+            <ut-button
+              icon="ri-lock-fill"
+              content="auth"
+              status="success"
+              onTap={() => handleAuth(row)}
+            />
+            <ut-button
+              icon="ri-lock-fill"
+              content="passwordReset"
+              status="warning"
+              onTap={() => handleResetPwd(row)}
+            />
+          </>
+        ];
+      }
+    }
+  }
+];
+
+// 启用/禁用
+async function handleClick({ row }) {
+  await to(serviceApi.put(url, [row]));
+  xgrid.value.refreshData();
+}
+
+/**
+ * @description: 查看用户角色
+ * @param {*} row 用户行
+ * @return {*}
+ */
+const handleRole = async (row: any) => {
+  const serverData = await serviceApi.get(url + '/getUserRole', { userName: row.userName });
+  data.roleList = serverData[0]?.sysRoles;
+  nextTick(() => {
+    data.showUserRole = true;
+  });
+};
+/**
+ * @description: 密码重置
+ * @param {*} row 用户信息
+ * @return {*}
+ */
+const handleResetPwd = async (row: Object) => {
+  await serviceApi.put(url + '/resetPwd', row);
+  await VxeUI.modal.alert(t('message.tip.initPassword'));
+};
+// 启用/禁用
+// const handleUpdate = async (record: IRecord) => {
+//   record.enabled = record.enabled === '1' ? '0' : '1';
+//   await serviceApi.put(url, record);
+//   getDataList();
+// };
+/**
+ * @description: 用户权限
+ * @param {*} row 用户信息
+ * @return {*}
+ */
+const handleAuth = async row => {
+  const [err, res] = await to(serviceApi.get(url + '/getUserRole', { userName: row.userName }));
+  if (!err) {
+    if (!isEmpty(res)) {
+      data.roleList = res[0]?.sysMenuExts;
+      data.showAuth = true;
+    } else {
+      warnMessage(t('message.tip.emptyAuth'));
+    }
+  }
+};
+
+const onGridEvents = {
+  editActived({ row }) {
+    columns[1].editRender.props.disabled = !!row.id;
+    columns[4].editRender.props.disabled = !!row.id;
+  }
+};
+const xForm = ref(null);
+// const xSarchFrom = ref(null);
+
+const onSubmit = () => {
+  xForm.value.validate(async valid => {
+    if (!valid) {
+      const { record, dataStatus } = data;
+      if (dataStatus === 'add') {
+        await serviceApi.post(url, record);
+      } else {
+        await serviceApi.put(url, record);
+      }
+      handleClose();
+    }
+  });
+};
+
+const handleClose = () => {
+  data.showModelView = false;
+};
+const getUnitList = () => {
+  serviceApi
+    .get('/uums/unit', { pageSize: 10 })
+    .then(res => {
+      paramExt.value = { unitId: res[0].id, type: 'system', enabled: '1' };
+    })
+    .catch(() => {
+      errorMessage('获取租户失败,刷新后重试');
+    });
+};
+
+onMounted(() => {
+  getUnitList();
+});
+</script>