优化修复网站导航的bug

2024-08-28 23:55:01 +08:00
parent 31ec8e057a
commit 2655874948
34 changed files with 1764 additions and 849 deletions
--- a/src/components/ChooseDictionary/index.vue
+++ b/src/components/ChooseDictionary/index.vue
@@ -0,0 +1,72 @@
+<!-- 公共参数数据源 -->
+<template>
+  <a-select
+    :allow-clear="allowClear"
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    :value="value"
+    class="w-full"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @change="change"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { listDictionaryData } from '@/api/system/dictionary-data';
+  import type { DictionaryData } from '@/api/system/dictionary-data/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'index', index: number): void;
+    (e: 'blur'): void;
+    (e: 'done', item: DictionaryData): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      allowClear?: boolean;
+      width?: number;
+      index?: number;
+    }>(),
+    {
+      placeholder: '请选择'
+    }
+  );
+
+  const data = ref<DictionaryData[]>();
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+    emit('index', Number(props.index));
+  };
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+
+  const change = (e: any, item: any) => {
+    emit('done', item);
+  };
+
+  const reload = () => {
+    data.value = [];
+    listDictionaryData({ dictCode: 'NavigationModel' }).then((list) => {
+      data.value = list.map((d) => {
+        return {
+          label: d.dictDataName,
+          value: d.dictDataCode
+        };
+      });
+    });
+  };
+
+  reload();
+</script>
--- a/src/components/ChooseWebsiteField/index.vue
+++ b/src/components/ChooseWebsiteField/index.vue
@@ -0,0 +1,72 @@
+<!-- 公共参数数据源 -->
+<template>
+  <a-select
+    :allow-clear="allowClear"
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    :value="value"
+    class="w-full"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @change="change"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { listWebsiteField } from '@/api/system/website/field';
+  import { WebsiteField } from '@/api/cms/website/field/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'index', index: number): void;
+    (e: 'blur'): void;
+    (e: 'done', item: WebsiteField): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+      allowClear?: boolean;
+      width?: number;
+      index?: number;
+    }>(),
+    {
+      placeholder: '请选择'
+    }
+  );
+
+  const data = ref<WebsiteField[]>();
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+    emit('index', Number(props.index));
+  };
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+
+  const change = (e, item) => {
+    emit('done', item);
+  };
+
+  const reload = () => {
+    data.value = [];
+    listWebsiteField({}).then((list) => {
+      data.value = list.map((d) => {
+        return {
+          label: d.name,
+          value: d.value
+        };
+      });
+    });
+  };
+
+  reload();
+</script>
--- a/src/components/SelectDictDictionary/components/select-data.vue
+++ b/src/components/SelectDictDictionary/components/select-data.vue
@@ -48,9 +48,8 @@
  } from 'ele-admin-pro/es/ele-pro-table/types';
  import { EleProTable } from 'ele-admin-pro';
  import useSearch from '@/utils/use-search';
-  import { pageDictData } from '@/api/system/dict-data';
  import { DictData, DictDataParam } from '@/api/system/dict-data/model';
-  import { pageDictionaryData } from "@/api/system/dictionary-data";
+  import { pageDictionaryData } from '@/api/system/dictionary-data';

  const props = defineProps<{
    // 弹窗是否打开
--- a/src/components/SelectNavigsation/components/select-data.vue
+++ b/src/components/SelectNavigsation/components/select-data.vue
@@ -47,9 +47,23 @@
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'title'">
+          <a-button
+            size="small"
+            type="link"
+            @click="onRadio"
+            :disabled="record.type == model"
+            class="cursor-pointer"
+            >{{ record.title }}</a-button
+          >
+        </template>
        <template v-if="column.key === 'action'">
          <template v-if="pageId == record.id">
-            <a-radio v-model:checked="checked" @click="onRadio(record)" />
+            <a-radio
+              v-model:checked="checked"
+              disabled
+              @click="onRadio(record)"
+            />
          </template>
          <template v-else>
            <lebal>
@@ -65,14 +79,16 @@

 <script lang="ts" setup>
  import { ref } from 'vue';
-  import {
-    ColumnItem,
-    DatasourceFunction
-  } from 'ele-admin-pro/es/ele-pro-table/types';
  import { listNavigation, pageNavigation } from '@/api/cms/navigation';
  import { EleProTable } from 'ele-admin-pro';
-  import { toTreeData } from 'ele-admin-pro/es';
+  import { toTreeData, eachTreeData } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem,
+    EleProTableDone
+  } from 'ele-admin-pro/es/ele-pro-table/types';
  import type { Navigation, NavigationParam } from '@/api/cms/navigation/model';
+  import type { Menu } from '@/api/system/menu/model';

  const props = defineProps<{
    // 弹窗是否打开
@@ -81,6 +97,8 @@
    title?: string;
    // 修改回显的数据
    data?: Navigation | null;
+    // 当前模型
+    model?: string;
  }>();

  const emit = defineEmits<{
@@ -100,6 +118,8 @@
  const expandedRowKeys = ref<number[]>([]);
  const searchText = ref('');
  const position = ref(1);
+  // 菜单数据
+  const menuData = ref<Navigation[]>([]);

  // 表格实例
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -137,9 +157,13 @@
    return listNavigation({ ...where });
  };

+  /* 表格渲染完成回调 */
+  const onDone: EleProTableDone<Navigation> = ({ data }) => {
+    menuData.value = data;
+  };
+
  /* 数据转为树形结构 */
  const parseData = (data: Navigation[]) => {
-    console.log(data);
    return toTreeData({
      data: data.map((d) => {
        return { ...d, key: d.navigationId, value: d.navigationId };
@@ -149,6 +173,22 @@
    });
  };

+  /* 展开全部 */
+  const expandAll = () => {
+    let keys: number[] = [];
+    eachTreeData(menuData.value, (d) => {
+      if (d.children && d.children.length && d.navigationId) {
+        keys.push(d.navigationId);
+      }
+    });
+    expandedRowKeys.value = keys;
+  };
+
+  /* 折叠全部 */
+  const foldAll = () => {
+    expandedRowKeys.value = [];
+  };
+
  /* 点击展开图标时触发 */
  const onExpand = (expanded: boolean, record: Navigation) => {
    if (expanded) {
--- a/src/components/SelectNavigsation/index.vue
+++ b/src/components/SelectNavigsation/index.vue
@@ -16,6 +16,7 @@
      v-model:visible="showEdit"
      :data="current"
      :title="placeholder"
+      :model="model"
      @done="onChange"
    />
  </div>
@@ -31,6 +32,7 @@
    defineProps<{
      value?: any;
      placeholder?: string;
+      model?: string;
    }>(),
    {
      placeholder: '请选择'
--- a/src/components/SelectWebsiteField/components/select-data.vue
+++ b/src/components/SelectWebsiteField/components/select-data.vue
@@ -0,0 +1,170 @@
+<template>
+  <ele-modal
+    width="70%"
+    :visible="visible"
+    :maskClosable="false"
+    :title="title"
+    :footer="null"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="id"
+      :datasource="datasource"
+      :columns="columns"
+      :customRow="customRow"
+      :pagination="false"
+    >
+      <template #toolbar>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入搜索关键词"
+          style="width: 200px"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
+          <div class="ele-text-heading" @click="onRadio(record)">
+            {{ record.name }}
+          </div>
+          <div class="ele-text-placeholder">{{ record.comments }}</div>
+        </template>
+        <template v-if="column.key === 'value'">
+          <a-image v-if="record.type === 1" :src="record.value" :width="120" />
+          <div v-else>{{ record.value }}</div>
+        </template>
+        <template v-if="column.key === 'comments'">
+          <a-popover>
+            <template #content>
+              {{ record.comments }}
+            </template>
+            <ExclamationCircleOutlined />
+          </a-popover>
+        </template>
+        <template v-if="column.key === 'action'">
+          <a @click="onRadio(record)">选择</a>
+        </template>
+      </template>
+    </ele-pro-table>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { EleProTable } from 'ele-admin-pro';
+  import { Company, CompanyParam } from '@/api/oa/company/model';
+  import { pageWebsiteField } from '@/api/system/website/field';
+  import { WebsiteField } from '@/api/system/website/field/model';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 标题
+    title?: string;
+    // 修改回显的数据
+    data?: WebsiteField | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done', data: Company): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 搜索内容
+  const searchText = ref(null);
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '参数名',
+      dataIndex: 'name',
+      width: 180,
+      key: 'name'
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      key: 'comments',
+      width: 120,
+      align: 'center'
+    },
+    {
+      title: '默认值',
+      width: 120,
+      align: 'center',
+      dataIndex: 'defaultValue'
+    },
+    {
+      title: '可设置范围',
+      width: 120,
+      align: 'center',
+      dataIndex: 'modifyRange'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    // 搜索条件
+    if (searchText.value) {
+      where.keywords = searchText.value;
+    }
+    return pageWebsiteField({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  /* 搜索 */
+  const reload = (where?: CompanyParam) => {
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  const onRadio = (record: Company) => {
+    updateVisible(false);
+    emit('done', record);
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Company) => {
+    return {
+      // 行点击事件
+      // onClick: () => {
+      //   updateVisible(false);
+      //   emit('done', record);
+      // },
+      // 行双击事件
+      onDblclick: () => {
+        updateVisible(false);
+        emit('done', record);
+      }
+    };
+  };
+</script>
+<style lang="less"></style>
--- a/src/components/SelectWebsiteField/index.vue
+++ b/src/components/SelectWebsiteField/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <a-input-group compact>
+      <a-input
+        disabled
+        style="width: calc(100% - 32px)"
+        v-model:value="value"
+        :placeholder="placeholder"
+      />
+      <a-button @click="openEdit">
+        <template #icon><BulbOutlined class="ele-text-warning" /></template>
+      </a-button>
+    </a-input-group>
+    <!-- 选择弹窗 -->
+    <SelectData
+      v-model:visible="showEdit"
+      :data="current"
+      :title="placeholder"
+      :customer-type="customerType"
+      @done="onChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { BulbOutlined } from '@ant-design/icons-vue';
+  import { ref } from 'vue';
+  import SelectData from './components/select-data.vue';
+  import { Company } from '@/api/system/company/model';
+
+  withDefaults(
+    defineProps<{
+      value?: any;
+      customerType?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择数据'
+    }
+  );
+
+  const emit = defineEmits<{
+    (e: 'done', Customer): void;
+    (e: 'clear'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 当前编辑数据
+  const current = ref<Company | null>(null);
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Company) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const onChange = (row) => {
+    emit('done', row);
+  };
+</script>