@utogether/udp-core 2.0.0-beta.26 → 2.0.0-beta.28

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

@@ -1,344 +1,344 @@
-<template>
-  <div v-spinning="loading" class="flex flex-col items-center pt-20 bg-white u-system-config">
-    <div class="flex w-1/2 p-3 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.orgTaggle')" prop="orgTaggle">
-          <el-switch v-model="record.orgTaggle" active-value="Y" inactive-value="N" />
-        </el-form-item>
-        <el-form-item :label="$t('message.udp.showTitle')" prop="showTitle">
-          <el-switch v-model="record.showTitle" active-value="Y" inactive-value="N" />
-        </el-form-item>
-        <el-form-item :label="$t('message.udp.initialPasswordModification')" prop="initialPasswordModification">
-          <el-switch v-model="record.initialPasswordModification" active-value="Y" inactive-value="N" />
-        </el-form-item>
-        <el-form-item
-          v-if="['liwei', 'yanhuaijun', 'phr', 'zhonglijun', 'ccl'].includes(cookies.get(kLOGINER))"
-          :label="$t('message.udp.techSupport')"
-          prop="techSupport"
-        >
-          <el-switch v-model="record.techSupport" active-value="Y" inactive-value="N" />
-        </el-form-item>
-        <el-form-item
-          v-if="['liwei', 'yanhuaijun', 'phr', 'zhonglijun', 'ccl'].includes(cookies.get(kLOGINER))"
-          :label="$t('message.udp.baseColor')"
-          prop="baseColor"
-        >
-          <vxe-color-picker v-model="record.baseColor" :colors="colorList" type="hex" clearable transfer />
-        </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 class="flex justify-end w-1/2 p-2">
-      <el-button type="primary" @click="submitForm(xfrom)">
-        {{ $t('message.btn.confirm') }}
-      </el-button>
-    </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, kLOGINER } 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',
-  baseColor: '#FFF',
-  i18nEnabled: 'N',
-  orgTaggle: 'Y',
-  showTitle: 'Y',
-  initialPasswordModification: 'N',
-  techSupport: 'Y',
-  copyright: '深圳友聚信息技术有限公司',
-  logo: [],
-  backgroundImg: [],
-  favicon: []
-});
-
-const serviceApi = getServiceApi();
-const { t } = useI18n();
-
-const baseUrl = ref(getBaseURL());
-
-const url = '/upfm/v1/sysConfig';
-let dataList = [];
-
-const colorList = [
-  '#DC143C',
-  '#FF1493',
-  '#FF00FF',
-  '#9932CC',
-  '#6A5ACD',
-  '#0000FF',
-  '#00008B',
-  '#778899',
-  '#1E90FF',
-  '#00BFFF',
-  '#5F9EA0',
-  '#00FFFF',
-  '#008080',
-  '#7FFFAA',
-  '#3CB371',
-  '#8FBC8F',
-  '#008000',
-  '#7CFC00',
-  '#556B2F',
-  '#FFFFE0',
-  '#FFFF00',
-  '#808000',
-  '#EEE8AA',
-  '#FFD700',
-  '#FFA500',
-  '#FF4500',
-  '#FA8072',
-  '#FF0000',
-  '#800000',
-  '#C0C0C0'
-];
-
-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 {
-  padding-top: 48px;
-
-  .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>
+<template>
+  <div v-spinning="loading" class="flex flex-col items-center pt-20 bg-white u-system-config">
+    <div class="flex w-1/2 p-3 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.orgTaggle')" prop="orgTaggle">
+          <el-switch v-model="record.orgTaggle" active-value="Y" inactive-value="N" />
+        </el-form-item>
+        <el-form-item :label="$t('message.udp.showTitle')" prop="showTitle">
+          <el-switch v-model="record.showTitle" active-value="Y" inactive-value="N" />
+        </el-form-item>
+        <el-form-item :label="$t('message.udp.initialPasswordModification')" prop="initialPasswordModification">
+          <el-switch v-model="record.initialPasswordModification" active-value="Y" inactive-value="N" />
+        </el-form-item>
+        <el-form-item
+          v-if="['liwei', 'yanhuaijun', 'phr', 'zhonglijun', 'ccl'].includes(cookies.get(kLOGINER))"
+          :label="$t('message.udp.techSupport')"
+          prop="techSupport"
+        >
+          <el-switch v-model="record.techSupport" active-value="Y" inactive-value="N" />
+        </el-form-item>
+        <el-form-item
+          v-if="['liwei', 'yanhuaijun', 'phr', 'zhonglijun', 'ccl'].includes(cookies.get(kLOGINER))"
+          :label="$t('message.udp.baseColor')"
+          prop="baseColor"
+        >
+          <vxe-color-picker v-model="record.baseColor" :colors="colorList" type="hex" clearable transfer />
+        </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 class="flex justify-end w-1/2 p-2">
+      <el-button type="primary" @click="submitForm(xfrom)">
+        {{ $t('message.btn.confirm') }}
+      </el-button>
+    </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, kLOGINER } 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',
+  baseColor: '#FFF',
+  i18nEnabled: 'N',
+  orgTaggle: 'Y',
+  showTitle: 'Y',
+  initialPasswordModification: 'N',
+  techSupport: 'Y',
+  copyright: '深圳友聚信息技术有限公司',
+  logo: [],
+  backgroundImg: [],
+  favicon: []
+});
+
+const serviceApi = getServiceApi();
+const { t } = useI18n();
+
+const baseUrl = ref(getBaseURL());
+
+const url = '/upfm/v1/sysConfig';
+let dataList = [];
+
+const colorList = [
+  '#DC143C',
+  '#FF1493',
+  '#FF00FF',
+  '#9932CC',
+  '#6A5ACD',
+  '#0000FF',
+  '#00008B',
+  '#778899',
+  '#1E90FF',
+  '#00BFFF',
+  '#5F9EA0',
+  '#00FFFF',
+  '#008080',
+  '#7FFFAA',
+  '#3CB371',
+  '#8FBC8F',
+  '#008000',
+  '#7CFC00',
+  '#556B2F',
+  '#FFFFE0',
+  '#FFFF00',
+  '#808000',
+  '#EEE8AA',
+  '#FFD700',
+  '#FFA500',
+  '#FF4500',
+  '#FA8072',
+  '#FF0000',
+  '#800000',
+  '#C0C0C0'
+];
+
+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 {
+  padding-top: 48px;
+
+  .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>