@utogether/udp-core 1.0.0 → 1.0.1-beta.10

package/src/views/system/menu/menuInfo.vue

@@ -1,368 +1,363 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-11-17 16:44:08
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-08 15:43:16
- * @Description: file content
--->
-
-<template>
-  <div class="ut-menu-wrapper">
-    <el-drawer
-      :model-value="show"
-      :title="$t('message.title.memuInfo')"
-      :before-close="handleClose"
-      direction="rtl"
-      destroy-on-close
-      size="50%"
-    >
-      <vxe-form
-        ref="xForm"
-        :data="record"
-        :rules="rules"
-        :loading="loading"
-        title-colon
-        title-align="right"
-        title-width="110"
-      >
-        <vxe-form-item
-          v-if="record.menuType === '0'"
-          :title="$t('message.menuType')"
-          field="menuCategory"
-          span="24"
-        >
-          <template #default="{ data }">
-            <vxe-select v-model="data.menuCategory" :disabled="data.menuCategory === '0'">
-              <!-- v-for="dict in dictData['SU.MENU.TYPE']?.children" -->
-              <vxe-option
-                v-for="dict in getLovList('SU.MENU.TYPE')"
-                :key="dict.dictCode"
-                :value="dict.dictCode"
-                :label="dict.dictName"
-                :disabled="dict.enabled"
-              />
-            </vxe-select>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item :title="$t('message.permissionCode')" field="dispalyCode" span="24">
-          <template #default="{ data }">
-            <vxe-input
-              v-model="data.dispalyCode"
-              clearable
-              :class="{ 'u-menu-prefix': dataStatus === 'add' }"
-              :disabled="dataStatus !== 'add'"
-            >
-              <template v-if="dataStatus === 'add'" #prefix>
-                <span>{{ prefixCode }}</span>
-              </template>
-            </vxe-input>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item
-          v-if="!(record.menuType * 1) && record.menuCategory !== '3'"
-          :title="$t('message.menuCode')"
-          :item-render="{ name: '$input' }"
-          field="menuCode"
-          span="24"
-        />
-        <vxe-form-item
-          :title="$t('message.menuName')"
-          :item-render="{ name: '$input' }"
-          field="menuName"
-          span="24"
-        />
-        <vxe-form-item
-          :title="$t('message.menuNameEn')"
-          field="menuNameEn"
-          span="24"
-          :item-render="{ name: '$input' }"
-        />
-        <vxe-form-item
-          v-if="!(record.menuType * 1)"
-          :title="$t('message.menuPath')"
-          :item-render="{ name: '$input' }"
-          field="menuPath"
-          span="24"
-        />
-        <vxe-form-item
-          v-if="!(record.menuType * 1)"
-          :title="$t('message.i18nField')"
-          :item-render="{ name: '$input' }"
-          field="i18nField"
-          span="24"
-        />
-        <vxe-form-item
-          v-if="record.menuCategory === '2'"
-          :title="$t('message.frameSrc')"
-          :item-render="{ name: '$input' }"
-          field="frameSrc"
-          span="24"
-        />
-        <vxe-form-item
-          v-if="record.menuCategory === '3'"
-          :title="$t('message.externalURI')"
-          :item-render="{ name: '$input' }"
-          field="menuCode"
-          span="24"
-        />
-        <vxe-form-item
-          v-if="!(record.menuType * 1) && record.menuCategory !== '3'"
-          :title="$t('message.extraIcon')"
-          :item-render="{ name: '$input' }"
-          field="extraIcon"
-          span="24"
-        />
-        <vxe-form-item
-          v-if="['0', '5'].includes(record.menuCategory)"
-          :title="$t('message.redirect')"
-          :item-render="{ name: '$input' }"
-          field="redirect"
-          span="24"
-        />
-        <vxe-form-item v-if="!(record.menuType * 1)" :title="$t('message.sort')" span="24">
-          <template #default="{ data }">
-            <vxe-input v-model="data.sort" type="number" step="10" clearable />
-          </template>
-        </vxe-form-item>
-        <vxe-form-item
-          v-if="dataStatus === 'add' && ['2', '1'].includes(record.menuCategory)"
-          :title="$t('message.btn.auth')"
-        >
-          <template #default>
-            <vxe-checkbox-group v-model="authority">
-              <vxe-checkbox label="add" :content="$t('message.btn.add')" />
-              <vxe-checkbox label="del" :content="$t('message.btn.delete')" />
-              <vxe-checkbox label="edit" :content="$t('message.btn.edit')" />
-              <vxe-checkbox label="fetch" :content="$t('message.btn.fetch')" />
-              <vxe-checkbox label="export" :content="$t('message.btn.export')" />
-            </vxe-checkbox-group>
-          </template>
-        </vxe-form-item>
-        <vxe-form-item v-if="!(record.menuType * 1)" :title="$t('message.icon')" span="24">
-          <template #default="{ data }">
-            <ut-icon-select v-model="data.icon" />
-          </template>
-        </vxe-form-item>
-      </vxe-form>
-      <el-divider />
-      <el-row type="flex" justify="end" style="padding-right: 22px">
-        <ut-button content="cancel" status="warning" @tap="handleClose" />
-        <ut-button content="confirm" status="primary" @tap="onSubmit" />
-      </el-row>
-    </el-drawer>
-  </div>
-</template>
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-import { ref, watch } from 'vue';
-import { VxeFormPropTypes } from 'vxe-table';
-import to from 'await-to-js';
-import { templateRef } from '@vueuse/core';
-import { useSystemStoreHook } from '../../../store/modules/system';
-import { getServiceApi } from '../../../api';
-
-interface IProps {
-  show: boolean;
-  record: IRecord;
-  dataStatus?: string;
-  direction?: string;
-}
-
-const dictData = useSystemStoreHook().getDataDict;
-
-const props = withDefaults(defineProps<IProps>(), {
-  show: false,
-  record: (): IRecord => {
-    return {};
-  },
-  dataStatus: 'detail',
-  direction: 'rtl'
-});
-
-watch(
-  () => props.show,
-  () => {
-    prefixCode.value = props.show && getPrefixCode();
-  }
-);
-
-const serviceApi = getServiceApi();
-
-const { t } = useI18n();
-const rules: VxeFormPropTypes.Rules = {
-  menuCode: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.menuCode')}`
-    }
-  ],
-  menuName: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.menuName')}`
-    }
-  ],
-  menuPath: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.menuPath')}`
-    }
-  ],
-  frameSrc: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.externalURI')}`
-    }
-  ],
-  i18nField: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.i18nField')}`
-    }
-  ],
-  dispalyCode: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.permissionCode')}`
-    }
-  ],
-  menuCategory: [
-    {
-      required: true,
-      message: `${t('message.required')}${t('message.menuType')}`
-    }
-  ]
-};
-
-const xForm = templateRef<any>('xForm', null);
-const loading = ref(false);
-const prefixCode = ref('');
-const authority = ref(['fetch']);
-
-const url = '/uums/menu';
-
-const emit = defineEmits<{
-  (e: 'onClose', type): void;
-}>();
-
-const getPrefixCode = () => {
-  const { record, dataStatus } = props;
-  const { id, parentId, hasChildren } = record;
-  if (dataStatus === 'update') return;
-  if (!id && !parentId) return 'su';
-  if (hasChildren || dataStatus === 'add') {
-    record.dispalyCode = '';
-    return record.permissionCode;
-  }
-  return record.permissionCode;
-};
-
-const onSubmit = () => {
-  xForm.value.validate(async valid => {
-    if (!valid) {
-      loading.value = true;
-      const { record, dataStatus } = props;
-      if (dataStatus === 'add') {
-        record.permissionCode = `${prefixCode.value}.${record.dispalyCode}`;
-        const [err, data]: [Error, any] = await to(serviceApi.post(url, [record]));
-        if (!err && !['0', '5'].includes(record.menuCategory) && authority.value.length) {
-          const dataList = authority.value.map((auth, idx) => {
-            return {
-              permissionCode: record.permissionCode + '.' + auth,
-              parentId: data[0].id,
-              menuName: getAuthName(auth),
-              menuType: 1,
-              enabled: '1',
-              sort: (idx + 1) * 10
-            };
-          });
-          await to(serviceApi.post(url, dataList));
-        }
-        loading.value = false;
-      } else {
-        await to(serviceApi.put(url, [record]));
-        loading.value = false;
-      }
-      handleClose('submit');
-    }
-  });
-};
-const getAuthName = code => {
-  const auth = {
-    fetch: t('message.btn.fetch'),
-    add: t('message.btn.add'),
-    edit: t('message.btn.edit'),
-    del: t('message.btn.delete'),
-    export: t('message.btn.export')
-  };
-  return auth[code];
-};
-const getLovList = code => {
-  return dictData[code]?.children.map(m => {
-    m.enabled = m.dictCode === '0' && props.record.menuCategory !== '0';
-    return m;
-  });
-};
-// 抽屉关闭
-function handleClose(type) {
-  emit('onClose', type);
-}
-</script>
-
-<style lang="scss">
-.u-menu-prefix.vxe-input {
-  height: 34px;
-}
-
-.u-menu-prefix.vxe-input .vxe-input--prefix {
-  top: 1px;
-  width: 150px;
-  height: 24px;
-  text-align: center;
-  background-color: #f5f7fa;
-  border-right: 1px solid #dcdfe6;
-}
-
-.u-menu-prefix.vxe-input .vxe-input--inner {
-  padding-left: 160px;
-  border: 1px solid #dcdfe6;
-}
-
-.ut-menu-wrapper {
-  .el-drawer__header {
-    margin-bottom: 16px;
-  }
-
-  .el-drawer__body {
-    margin-bottom: 12px;
-    overflow: auto;
-  }
-
-  .el-divider {
-    margin: 15px 0;
-  }
-}
-
-.menu-icon {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-
-  li {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    margin: 0 2px;
-    margin-top: 5px;
-    cursor: pointer;
-    border: 1px solid #ddd;
-  }
-
-  .active-icon {
-    color: #fff;
-    background-color: #59bfc1;
-  }
-}
-</style>
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:44:08
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-08-01 17:38:53
+ * @Description: file content
+-->
+
+<template>
+  <div class="ut-menu-wrapper">
+    <el-drawer
+      :model-value="show"
+      :title="$t('message.title.memuInfo')"
+      :before-close="handleClose"
+      direction="rtl"
+      destroy-on-close
+      size="50%"
+    >
+      <vxe-form
+        ref="xForm"
+        :data="record"
+        :rules="rules"
+        :loading="loading"
+        title-colon
+        title-align="right"
+        title-width="110"
+        transfer
+      >
+        <vxe-form-item v-if="record.menuType === '0'" :title="$t('message.menuType')" field="menuCategory" span="24">
+          <template #default="{ data }">
+            <vxe-select v-model="data.menuCategory" :disabled="data.menuCategory === '0'" :transfer="false">
+              <vxe-option
+                v-for="dict in getLovList('SU.MENU.TYPE')"
+                :key="dict.dictCode"
+                :value="dict.dictCode"
+                :label="dict.dictName"
+                :disabled="dict.enabled"
+              />
+            </vxe-select>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item :title="$t('message.permissionCode')" field="dispalyCode" span="24">
+          <template #default="{ data }">
+            <vxe-input
+              v-model="data.dispalyCode"
+              clearable
+              :class="{ 'u-menu-prefix': dataStatus === 'add' }"
+              :disabled="dataStatus !== 'add'"
+            >
+              <template v-if="dataStatus === 'add'" #prefix>
+                <span>{{ prefixCode }}</span>
+              </template>
+            </vxe-input>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item
+          v-if="!(record.menuType * 1) && record.menuCategory !== '3'"
+          :title="$t('message.menuCode')"
+          :item-render="{ name: '$input' }"
+          field="menuCode"
+          span="24"
+        />
+        <vxe-form-item :title="$t('message.menuName')" :item-render="{ name: '$input' }" field="menuName" span="24" />
+        <vxe-form-item
+          :title="$t('message.menuNameEn')"
+          field="menuNameEn"
+          span="24"
+          :item-render="{ name: '$input' }"
+        />
+        <vxe-form-item
+          v-if="!(record.menuType * 1)"
+          :title="$t('message.menuPath')"
+          :item-render="{ name: '$input' }"
+          field="menuPath"
+          span="24"
+        />
+        <vxe-form-item
+          v-if="!(record.menuType * 1)"
+          :title="$t('message.i18nField')"
+          :item-render="{ name: '$input' }"
+          field="i18nField"
+          span="24"
+        />
+        <vxe-form-item
+          v-if="record.menuCategory === '2'"
+          :title="$t('message.frameSrc')"
+          :item-render="{ name: '$input' }"
+          field="frameSrc"
+          span="24"
+        />
+        <vxe-form-item
+          v-if="record.menuCategory === '3'"
+          :title="$t('message.externalURI')"
+          :item-render="{ name: '$input' }"
+          field="menuCode"
+          span="24"
+        />
+        <vxe-form-item
+          v-if="!(record.menuType * 1) && record.menuCategory !== '3'"
+          :title="$t('message.extraIcon')"
+          :item-render="{ name: '$input' }"
+          field="extraIcon"
+          span="24"
+        />
+        <vxe-form-item
+          v-if="['0', '5'].includes(record.menuCategory)"
+          :title="$t('message.redirect')"
+          :item-render="{ name: '$input' }"
+          field="redirect"
+          span="24"
+        />
+        <vxe-form-item v-if="!(record.menuType * 1)" :title="$t('message.sort')" span="24">
+          <template #default="{ data }">
+            <vxe-input v-model="data.sort" type="number" step="10" clearable />
+          </template>
+        </vxe-form-item>
+        <vxe-form-item
+          v-if="dataStatus === 'add' && ['2', '1'].includes(record.menuCategory)"
+          :title="$t('message.btn.auth')"
+        >
+          <template #default>
+            <vxe-checkbox-group v-model="authority">
+              <vxe-checkbox label="add" :content="$t('message.btn.add')" />
+              <vxe-checkbox label="del" :content="$t('message.btn.delete')" />
+              <vxe-checkbox label="edit" :content="$t('message.btn.edit')" />
+              <vxe-checkbox label="fetch" :content="$t('message.btn.fetch')" />
+              <vxe-checkbox label="export" :content="$t('message.btn.export')" />
+            </vxe-checkbox-group>
+          </template>
+        </vxe-form-item>
+        <vxe-form-item v-if="!(record.menuType * 1)" :title="$t('message.icon')" span="24">
+          <template #default="{ data }">
+            <ut-icon-select v-model="data.icon" />
+          </template>
+        </vxe-form-item>
+      </vxe-form>
+      <el-divider />
+      <el-row type="flex" justify="end" style="padding-right: 22px">
+        <ut-button content="cancel" status="warning" @tap="handleClose" />
+        <ut-button content="confirm" status="primary" @tap="onSubmit" />
+      </el-row>
+    </el-drawer>
+  </div>
+</template>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { ref, watch } from 'vue';
+import to from 'await-to-js';
+import { templateRef } from '@vueuse/core';
+import { useSystemStoreHook } from '../../../store/modules/system';
+import { getServiceApi } from '../../../api';
+
+interface IProps {
+  show: boolean;
+  record: IRecord;
+  dataStatus?: string;
+  direction?: string;
+}
+
+const dictData = useSystemStoreHook().getDataDict;
+
+const props = withDefaults(defineProps<IProps>(), {
+  show: false,
+  record: (): IRecord => {
+    return {};
+  },
+  dataStatus: 'detail',
+  direction: 'rtl'
+});
+
+watch(
+  () => props.show,
+  () => {
+    prefixCode.value = props.show && getPrefixCode();
+  }
+);
+
+const serviceApi = getServiceApi();
+
+const { t } = useI18n();
+const rules = {
+  menuCode: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.menuCode')}`
+    }
+  ],
+  menuName: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.menuName')}`
+    }
+  ],
+  menuPath: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.menuPath')}`
+    }
+  ],
+  frameSrc: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.externalURI')}`
+    }
+  ],
+  i18nField: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.i18nField')}`
+    }
+  ],
+  dispalyCode: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.permissionCode')}`
+    }
+  ],
+  menuCategory: [
+    {
+      required: true,
+      message: `${t('message.required')}${t('message.menuType')}`
+    }
+  ]
+};
+
+const xForm = templateRef<any>('xForm', null);
+const loading = ref(false);
+const prefixCode = ref('');
+const authority = ref(['fetch']);
+
+const url = '/uums/menu';
+
+const emit = defineEmits<{
+  (e: 'close', type, data?): void;
+}>();
+
+const getPrefixCode = () => {
+  const { record, dataStatus } = props;
+  const { id, parentId, hasChildren } = record;
+  if (dataStatus === 'update') return;
+  if (!id && !parentId) return 'su';
+  if (hasChildren || dataStatus === 'add') {
+    record.dispalyCode = '';
+    return record.permissionCode;
+  }
+  return record.permissionCode;
+};
+
+const onSubmit = () => {
+  xForm.value.validate(async valid => {
+    if (!valid) {
+      loading.value = true;
+      let resData;
+      const { record, dataStatus } = props;
+      if (dataStatus === 'add') {
+        record.permissionCode = `${prefixCode.value}.${record.dispalyCode}`;
+        const [err, data]: [Error, any] = await to(serviceApi.post(url, [record]));
+        if (!err && !['0', '5'].includes(record.menuCategory) && authority.value.length) {
+          const dataList = authority.value.map((auth, idx) => {
+            return {
+              permissionCode: record.permissionCode + '.' + auth,
+              parentId: data[0].id,
+              menuName: getAuthName(auth),
+              menuType: 1,
+              enabled: '1',
+              sort: (idx + 1) * 10
+            };
+          });
+          const [err, res] = await to(serviceApi.post(url, dataList));
+          if (!err) {
+            // props.record.children.push(...res);
+            resData = res[0];
+          }
+        }
+        loading.value = false;
+      } else {
+        record.permissionCode = record.dispalyCode;
+        await to(serviceApi.put(url, [record]));
+        loading.value = false;
+        resData = record;
+      }
+      handleClose('submit', resData);
+    }
+  });
+};
+const getAuthName = code => {
+  const auth = {
+    fetch: t('message.btn.fetch'),
+    add: t('message.btn.add'),
+    edit: t('message.btn.edit'),
+    del: t('message.btn.delete'),
+    export: t('message.btn.export')
+  };
+  return auth[code];
+};
+const getLovList = code => {
+  return dictData[code]?.children.map(m => {
+    m.enabled = m.dictCode === '0' && props.record.menuCategory !== '0';
+    return m;
+  });
+};
+// 抽屉关闭
+function handleClose(type, data) {
+  emit('close', type, data);
+}
+</script>
+
+<style lang="scss">
+.u-menu-prefix.vxe-input {
+  height: 34px;
+}
+
+.u-menu-prefix.vxe-input .vxe-input--prefix {
+  top: 1px;
+  width: 150px;
+  height: 24px;
+  text-align: center;
+  background-color: #f5f7fa;
+  border-right: 1px solid #dcdfe6;
+}
+
+.u-menu-prefix.vxe-input .vxe-input--inner {
+  border: 1px solid #dcdfe6;
+}
+
+.ut-menu-wrapper {
+  .el-drawer__header {
+    margin-bottom: 16px;
+  }
+
+  .el-drawer__body {
+    margin-bottom: 12px;
+    overflow: auto;
+  }
+
+  .el-divider {
+    margin: 15px 0;
+  }
+}
+
+.menu-icon {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    margin: 0 2px;
+    margin-top: 5px;
+    cursor: pointer;
+    border: 1px solid #ddd;
+  }
+
+  .active-icon {
+    color: #fff;
+    background-color: #59bfc1;
+  }
+}
+</style>