初始化版本，引入智慧食堂模块，第三方模块

2024-12-06 18:48:18 +08:00
commit d22f88efd3
@@ -0,0 +1,378 @@
+<template>
+  <el-tabs v-model="activeName">
+    <!-- 属性设置面板 -->
+    <el-tab-pane label="属性设置" name="field">
+      <sc-form-table ref="fieldTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" drag-sort
+                     placeholder="暂无数据">
+        <el-table-column label="主键" prop="primaryPk" width="80" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.primaryPk" true-label="1" false-label="0" disabled></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="字段名" prop="fieldName" show-overflow-tooltip></el-table-column>
+        <el-table-column label="说明" prop="fieldComment" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-input v-model="row.fieldComment" placeholder="请输入说明"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="字段类型" prop="fieldType" show-overflow-tooltip></el-table-column>
+        <el-table-column label="属性名" prop="attrName" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-input v-model="row.attrName" placeholder="请输入属性名"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="属性类型" prop="attrType" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-select v-model="row.attrType" placeholder="请选择属性类型" @change="handleChangeRow(row)">
+              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="自动填充" prop="autoFill" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-select v-model="row.autoFill" placeholder="请选择类型">
+              <el-option v-for="item in fillList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="字典名称" prop="fieldDict" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-select v-model="row.fieldDict" placeholder="请选择类型" filterable clearable
+                       :disabled="row.primaryPk === '1'">
+              <template #prefix>
+                <el-button icon="Plus" type="primary" link @click.stop="handleAddDict(row)"></el-button>
+              </template>
+              <el-option v-for="item in fieldDictList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </template>
+        </el-table-column>
+      </sc-form-table>
+    </el-tab-pane>
+    <!-- 列表设置面板 -->
+    <el-tab-pane label="列表查询" name="third">
+      <sc-form-table ref="gridTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" placeholder="暂无数据">
+        <el-table-column label="属性名" prop="attrName" show-overflow-tooltip></el-table-column>
+        <el-table-column label="说明" prop="fieldComment" show-overflow-tooltip></el-table-column>
+        <el-table-column label="列表显示" prop="gridItem" width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.gridItem" true-label="1" false-label="0"
+                         :disabled="row.primaryPk === '1'"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否排序" prop="gridSort" width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.gridSort" true-label="1" false-label="0"
+                         :disabled="row.primaryPk === '1'"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="查询显示" prop="gridSort" width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.queryItem" true-label="1" false-label="0"
+                         :disabled="row.primaryPk === '1'"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="查询表单类型" prop="queryFormType" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-select v-model="row.queryFormType" placeholder="请选择查询表单类型" :disabled="row.primaryPk === '1'">
+              <el-option v-for="item in queryTypeList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="查询方式" prop="queryType" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-select v-model="row.queryType" placeholder="请选择查询方式" :disabled="row.primaryPk === '1'">
+              <el-option v-for="item in queryList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </template>
+        </el-table-column>
+      </sc-form-table>
+    </el-tab-pane>
+    <el-tab-pane label="表单页面" name="form">
+      <sc-form-table ref="formTable" v-model="fieldList" :hideAdd="true" :hideDelete="true" placeholder="暂无数据">
+        <el-table-column label="属性名" prop="attrName" show-overflow-tooltip></el-table-column>
+        <el-table-column label="说明" prop="fieldComment" show-overflow-tooltip></el-table-column>
+        <el-table-column label="表单类型" prop="formType" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-select v-model="row.formType" placeholder="请选择表单类型" :disabled="row.primaryPk === '1'">
+              <el-option v-for="item in formTypeList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否显示" prop="formItem" width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.formItem" true-label="1" false-label="0"
+                         :disabled="row.primaryPk === '1'"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="表单必填" prop="formRequired" width="100" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-checkbox v-model="row.formRequired" true-label="1" false-label="0"
+                         :disabled="row.primaryPk === '1'"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="表单效验" prop="formValidator" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-select v-model="row.formValidator" placeholder="请选择表单效验" :disabled="row.primaryPk === '1'">
+              <el-option v-for="item in formValidatorList" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </template>
+        </el-table-column>
+      </sc-form-table>
+    </el-tab-pane>
+  </el-tabs>
+
+  <!-- 新增字典  -->
+  <form-dialog ref="formDialogRef" @refresh="handleDictRefresh"/>
+</template>
+
+<script setup lang="ts">
+import {useTableFieldSubmitApi, useTableApi, fetchDictList} from '/@/api/gen/table';
+import {list} from '/@/api/gen/fieldtype';
+import Sortable from 'sortablejs';
+
+const scFormTable = defineAsyncComponent(() => import('/@/components/FormTable/index.vue'));
+const FormDialog = defineAsyncComponent(() => import('./add-dict.vue'));
+
+const activeName = ref();
+const tableId = ref('');
+
+const props = defineProps({
+  tableName: {
+    type: String,
+  },
+  dsName: {
+    type: String,
+  },
+});
+
+const visible = ref(false);
+
+const sortable = ref() as any;
+
+const formDialogRef = ref();
+const typeList = ref([]) as any;
+const fieldDictList = ref([]) as any;
+const selectRow = ref();
+const dsName = ref();
+const tableName = ref();
+
+const fieldList = ref([]);
+const fillList = reactive([
+  {label: 'DEFAULT', value: 'DEFAULT'},
+  {label: 'INSERT', value: 'INSERT'},
+  {label: 'UPDATE', value: 'UPDATE'},
+  {label: 'INSERT_UPDATE', value: 'INSERT_UPDATE'},
+]);
+
+const queryList = reactive([
+  {label: '=', value: '='},
+  {label: '!=', value: '!='},
+  {label: '>', value: '>'},
+  {label: '>=', value: '>='},
+  {label: '<', value: '<'},
+  {label: '<=', value: '<='},
+  {label: 'like', value: 'like'},
+  {label: 'left like', value: 'left like'},
+  {label: 'right like', value: 'right like'},
+]);
+
+const formTypeList = reactive([
+  {label: '单行文本', value: 'text'},
+  {label: '多行文本', value: 'textarea'},
+  {label: '数字', value: 'number'},
+  {label: '富文本编辑器', value: 'editor'},
+  {label: '下拉框', value: 'select'},
+  {label: '单选按钮', value: 'radio'},
+  {label: '复选框', value: 'checkbox'},
+  {label: '日期', value: 'date'},
+  {label: '日期时间', value: 'datetime'},
+  {label: '文件上传', value: 'upload-file'},
+  {label: '图片上传', value: 'upload-img'},
+]);
+
+const queryTypeList = reactive([
+  {label: '单行文本', value: 'text'},
+  {label: '多行文本', value: 'textarea'},
+  {label: '数字', value: 'number'},
+  {label: '下拉框', value: 'select'},
+  {label: '单选按钮', value: 'radio'},
+  {label: '复选框', value: 'checkbox'},
+  {label: '日期', value: 'date'},
+  {label: '日期时间', value: 'datetime'},
+]);
+
+const formValidatorList = reactive([
+  {label: '去重', value: 'duplicate'},
+  {label: '数字', value: 'number'},
+  {label: '字母', value: 'letter'},
+  {label: '字母和数字', value: 'letterAndNumber'},
+  {label: '手机号码', value: 'mobilePhone'},
+  {label: '字母开头，仅可包含数字', value: 'letterStartNumberIncluded'},
+  {label: '禁止中文输入', value: 'noChinese'},
+  {label: '必须中文输入', value: 'chinese'},
+  {label: '电子邮箱', value: 'email'},
+  {label: 'URL网址', value: 'url'},
+]);
+
+const propToType = reactive({
+  tinyint: 'number',
+  smallint: 'number',
+  mediumint: 'number',
+  int: 'number',
+  integer: 'number',
+  bigint: 'number',
+  float: 'number',
+  datetime: 'datetime',
+  LocalDateTime: 'datetime',
+  date: 'date',
+  LocalDate: 'date',
+  Long: 'number',
+  Float: 'number',
+  Double: 'number',
+  BigDecimal: 'number',
+  text: 'textarea',
+  String: 'text',
+  longtext: 'editor',
+  bit: 'radio',
+  Boolean: 'radio',
+  char: 'radio',
+  varchar: 'text',
+});
+
+/**
+ * 属性修改触发事件
+ * @param row
+ */
+const handleChangeRow = (row: any) => {
+  row.queryFormType = propToType[row.attrType];
+  row.formType = propToType[row.attrType];
+};
+
+/**
+ * 添加字典
+ * @param row
+ */
+const handleAddDict = (row: object) => {
+  selectRow.value = row;
+  formDialogRef.value.openDialog();
+};
+
+/**
+ * 刷新字典
+ * @param dictType
+ */
+const handleDictRefresh = async (dictType: string) => {
+  await getDictList();
+  selectRow.value.fieldDict = dictType;
+};
+
+const openDialog = (dName: string, tName: string) => {
+  visible.value = true;
+  tableName.value = tName;
+  dsName.value = dName;
+
+  activeName.value = 'field';
+
+  rowDrop();
+  getTable(dName, tName);
+  getFieldTypeList();
+  getDictList();
+};
+
+onMounted(() => {
+  tableName.value = String(props.tableName);
+  dsName.value = String(props.dsName);
+  activeName.value = 'field';
+  rowDrop();
+  getTable(dsName.value, tableName.value);
+  getFieldTypeList();
+  getDictList();
+});
+
+const rowDrop = () => {
+  nextTick(() => {
+    const el: any = window.document.querySelector('#pane-field');
+    sortable.value = Sortable.create(el, {
+      handle: '.drag-btn',
+      onEnd: (e: any) => {
+        const {newIndex, oldIndex} = e;
+        const currRow = fieldList.value.splice(oldIndex, 1)[0];
+        fieldList.value.splice(newIndex, 0, currRow);
+      },
+    });
+  });
+};
+const loading = ref(false);
+
+const getTable = (dsName: string, tableName: string) => {
+  fieldList.value = []; // 避免第一次数据初始化， 表格显示历史数据
+  loading.value = true;
+  useTableApi(dsName, tableName)
+      .then((res) => {
+        tableId.value = res.data.id;
+        fieldList.value = res.data.fieldList.map((item) => {
+          item.queryFormType ? item.queryFormType : propToType[item.fieldType];
+          item.formType ? item.formType : propToType[item.fieldType];
+          return item;
+        });
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+};
+
+const getFieldTypeList = async () => {
+  typeList.value = [];
+  // 获取数据
+  const {data} = await list();
+  // 设置属性类型值
+  const typeMap = new Map();
+  data.forEach((item: any) => {
+    const {attrType, columnType} = item;
+    if (!typeMap.has(attrType)) {
+      typeMap.set(attrType, columnType);
+      typeList.value.push({label: attrType, value: attrType});
+    }
+  });
+  // 增加Object类型
+  typeList.value.push({label: 'Object', value: 'Object'});
+};
+
+const getDictList = () => {
+  fetchDictList().then((res) => {
+    for (const item of res.data) {
+      fieldDictList.value.push({label: item.description, value: item.dictType});
+    }
+  });
+};
+
+// 表单提交
+const submitHandle = () => {
+  return new Promise((resolve) => {
+    useTableFieldSubmitApi(dsName.value, tableName.value, fieldList.value).then(() => {
+      resolve(tableId.value);
+    });
+  });
+};
+
+defineExpose({
+  openDialog,
+  submitHandle,
+});
+</script>
+
+<style lang="scss">
+.sortable-row-gen .drag-btn {
+  cursor: move;
+  font-size: 12px;
+}
+
+.sortable-row-gen .vxe-body--row.sortable-ghost,
+.sortable-row-gen .vxe-body--row.sortable-chosen {
+  background-color: #dfecfb;
+}
+
+.vxe-select–panel {
+  z-index: 9997 !important;
+}
+</style>