2023-5-30

src/api/system/customForm.js

@@ -42,3 +42,10 @@ export function update(params) {
     isLoading:false
   })
 }
+
+export function realTableIndex() {
+  return request({
+    method: "get",
+    url: '/api/admin/custom-form/real-table-index'
+  })
+}

src/components/XyTable/index.vue

@@ -196,6 +196,13 @@ export default {
   },
   methods: {
     //方法
+    calculateTextWidth(text) {
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      context.font = '14px Arial'; // Set the font size and family to match the table cell's font
+      const metrics = context.measureText(text);
+      return metrics.width;
+    },
     initLoad() {
       let clientHeight = document.documentElement.clientHeight;
       let lxheader = document
@@ -237,6 +244,7 @@ export default {
                 this.totalData = res.data.total;
                 setTimeout(() => {
                   this.loading = false;
+
                 }, 300);
               })
               .catch((err) => {
@@ -255,6 +263,7 @@ export default {
                 this.totalData = res.total;
                 setTimeout(() => {
                   this.loading = false;
+
                 }, 300);
               })
               .catch((err) => {
@@ -795,7 +804,7 @@ export default {
                   column-key={String(Math.random())}
                   label={item.label}
                   prop={item.prop}
-                  width={item.width ?? "auto"}
+                  width={item.width || "auto"}
                   min-width={item.minWidth}
                   fixed={item.fixed ?? false}
                   render-header={item.renderHeader}
@@ -808,8 +817,9 @@ export default {
                   show-overflow-tooltip={item.showOverflowTooltip ?? true}
                   align={item.align ?? "center"}
                   header-align={item.headerAlign ?? "center"}
-                  class-name={`xy-table__row-fade ${item.className}`}
-                  label-class-name={`xy-table__title-fade ${item.labelClassName}`}
+                  class-name={`xy-table__row-fade ${item.className} body-cell-${index}`}
+                  label-class-name={`xy-table__title-fade ${item.labelClassName} header-cell-${index}`}
+
                   selectable={item.selectable}
                   reserve-selection={item.reserveSelection}
                   filters={item.filters}

src/const/addProps.js

@@ -6,10 +6,12 @@ export const addPropsMap = new Map([
   }],
   ["richtext",{}],
   ['radio',{
-
+    clearable: true
   }],
   ["checkbox", {
-
+    collapseTags: true,
+    multiple: true,
+    clearable: true
   }],
   ["date", {
     clearable: true,

src/const/inputType.js

@@ -1,8 +1,8 @@
 export const domMap = new Map([
   ["text", "el-input"],
   ["richtext",'my-tinymce'],
-  ['radio','el-radio-group'],
-  ["checkbox", "el-checkbox-group"],
+  ['radio','el-select'],
+  ["checkbox", "el-select"],
   ["date", "el-date-picker"],
   ["datetime", "el-date-picker"],
   ["file","el-upload"],

src/const/templateProps.js

@@ -5,10 +5,14 @@ export const templatePropsMap = new Map([
     clearable: true
   }],
   ["richtext",'my-tinymce'],
+  ['select', {
+    value: '选项1'
+  }],
   ['radio',{
     value: '选项1'
   }],
   ["checkbox", {
+    multiple: true,
     value: ['选项1']
   }],
   ["date", {

src/views/component/dialog.vue

@@ -54,6 +54,7 @@ export default {
                       props: {
                         label: i.name,
                         prop: i.field,
+                        required: i.validation instanceof Array ? !!i.validation.find(i => i === 'required') : false,
                       },
                     },
                     [
@@ -61,6 +62,9 @@ export default {
                         domMap.get(i.edit_input),
                         {
                           ref: `elEdit_${i.field}`,
+                          style: {
+                            width: '100%'
+                          },
                           props: {
                             ...addPropsMap.get(i.edit_input),
                             ...this.extraProps(i),
@@ -152,26 +156,14 @@ export default {
 
     //渲染一些组件内部需要选项等
     optionsRender(h, info) {
-      if (info.edit_input === "radio") {
+      if (info.edit_input === "checkbox" || info.edit_input === "radio") {
         return info._paramters && info._paramters instanceof Array
           ? info._paramters.map((i) =>
-              h(
-                "el-radio",
-                { props: { label: i.id } },
-                i.name || i.no || i.value || i.id
-              )
-            )
-          : [];
-      }
-      if (info.edit_input === "checkbox") {
-        return info._paramters && info._paramters instanceof Array
-          ? info._paramters.map((i) =>
-              h(
-                "el-checkbox",
-                { props: { label: i.id } },
-                i.name || i.no || i.value || i.id
-              )
+            h(
+              "el-option",
+              { props: { label: i.name || i.no || i.value || i.id , value : i.id } }
             )
+          )
           : [];
       }
       if (info.edit_input === "file" || info.edit_input === "files") {
@@ -330,7 +322,7 @@ export default {
         newVal.forEach((i) => {
           if (i.field) {
             this.form[i.field] = "";
-            if (i.validation instanceof Array && i.validation.length > 0) {
+            if (i.validation instanceof Array && i.validation.length > 0 && !!i.validation.find(i => i === 'required')) {
               this.rules[i.field] = [
                 { required: true, message: `请填写${i.name}` },
               ];
@@ -355,6 +347,7 @@ export default {
           this.$nextTick(() => this.getDetail());
         }
       } else {
+        this.file = {};
         this.id = "";
         this.type = "";
         this.init();

src/views/component/table.vue

@@ -141,7 +141,7 @@
 </template>
 
 <script>
-import { index as fieldIndex } from "@/api/system/customFormField"
+import { index as fieldIndex } from "@/api/system/customFormField";
 import { authMixin } from "@/mixin/authMixin";
 import { index,destroy } from "@/api/system/baseForm";
 import { op } from "@/const/op";
@@ -216,8 +216,6 @@ export default {
         const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
         saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${sheetName}.xlsx`);
       }
-
-     // download('/api/admin/base-form/index','get',Object.assign(select,{ page: 1,page_size: 9999,is_export: 1 }),`${new Date().getTime()}.xlsx`)
     },
 
     //target要为内存地址引用类型
@@ -259,7 +257,7 @@ export default {
         res.data.forEach(i => {
           if (i.field) {
             if (
-              (i.edit_input === "checkbox" || i.edit_input === "radio") &&
+              (i.edit_input === "checkbox" || i.edit_input === "radio" || i.edit_input === "select") &&
               i.parameter_id
             ) {
               getparameter({ id: i.parameter_id }).then((res) => {
@@ -267,7 +265,7 @@ export default {
               });
             }
             if (
-              (i.edit_input === "checkbox" || i.edit_input === "radio") &&
+              (i.edit_input === "checkbox" || i.edit_input === "radio" || i.edit_input === "select") &&
               i.link_table_name
             ) {
               index({
@@ -312,7 +310,7 @@ export default {
         }
         return Object.assign({
           prop: i.field,
-          label: i.name
+          label: i.name,
         },linkOb)
       })
     }

src/views/system/components/editPane.vue

@@ -186,7 +186,7 @@
 </template>
 
 <script>
-import { index as formIndex } from "@/api/system/customForm";
+import { index as formIndex, realTableIndex } from "@/api/system/customForm";
 import { listparameter } from "@/api/system/dictionary";
 import { translate } from "@/api/system/customFormField";
 import { debounce } from "@/utils";
@@ -229,8 +229,9 @@ export default {
     },
 
     async getForms() {
+      const resReal = await realTableIndex();
       const res = await formIndex({ page: 1, page_size: 999 });
-      this.forms = res.data;
+      this.forms = [...res.data,...resReal.map(i => { return { name: i,table_name: i } })];
     },
     async getParameters() {
       const res = await listparameter({ page: 1, page_size: 999 });

src/views/system/components/formEditor.vue

@@ -63,6 +63,7 @@
                     >
                       <template>
                         <el-form
+                          style="min-height: 200px;"
                           label-width="80px"
                           label-position="right"
                           size="small"
@@ -75,7 +76,7 @@
                             <el-form-item
                               :label="i.name || '字段名称'"
                               :required="
-                                !!i.validation && i.validation.length > 0
+                                i.validation instanceof Array ? !!i.validation.find(i => i === 'required') : false
                               "
                               v-for="(i, index) in formList"
                               @click.native="selectPick(i, index)"
@@ -112,10 +113,8 @@
 </template>
 
 <script>
-import { listparameter } from "@/api/system/dictionary";
 import { index, config } from "@/api/system/customFormField";
 import { mapState } from "vuex";
-import { index as formIndex } from "@/api/system/customForm";
 import { deepCopy } from "@/utils";
 import { update } from "@/api/system/customForm";
 
@@ -176,14 +175,6 @@ export default {
     },
 
     //获取列表数据
-    async getForms() {
-      const res = await formIndex({ page: 1, page_size: 999 });
-      this.forms = res.data;
-    },
-    async getParameters() {
-      const res = await listparameter({ page: 1, page_size: 999 });
-      this.parameters = res.data;
-    },
     async getConfig() {
       const { edit_to_migration, validation_rules } = await config(false);
       this.types = edit_to_migration;
@@ -216,8 +207,6 @@ export default {
           link_relation: "",
         };
 
-        console.log(newItem);
-
         this.$store.commit("form/SPLICE_FORM_LIST", {
           index: newIndex,
           length: 0,

src/views/system/components/formSlotRender.vue

@@ -12,11 +12,8 @@ export default {
   },
   methods: {
     optionsRender(h) {
-      if (this.config.edit_input === "radio") {
-        return ['选项1','选项2','选项3'].map(i => h('el-radio',{ label: i }, i))
-      }
-      if(this.config.edit_input === "checkbox") {
-        return ['选项1','选项2','选项3'].map(i => h('el-checkbox',{ label: i }, i))
+      if(this.config.edit_input === "checkbox" || this.config.edit_input === "radio") {
+        return ['选项1','选项2','选项3'].map(i => h('el-option',{ props: { value: i,label: i } }))
       }
       if(this.config.edit_input === "file" || this.config.edit_input === "files") {
         return [