From 789d8f482de16b31b8ec05ccd886df28226c4fcc Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Tue, 30 May 2023 17:27:28 +0800
Subject: [PATCH 1/2] 2023-5-30

---
 src/api/system/customForm.js                  |  7 +++++
 src/components/XyTable/index.vue              | 16 ++++++++--
 src/const/addProps.js                         |  6 ++--
 src/const/inputType.js                        |  4 +--
 src/const/templateProps.js                    |  4 +++
 src/views/component/dialog.vue                | 29 +++++++------------
 src/views/component/table.vue                 | 10 +++----
 src/views/system/components/editPane.vue      |  5 ++--
 src/views/system/components/formEditor.vue    | 15 ++--------
 .../system/components/formSlotRender.vue      |  7 ++---
 10 files changed, 52 insertions(+), 51 deletions(-)

diff --git a/src/api/system/customForm.js b/src/api/system/customForm.js
index 63a7b24..ba03a48 100644
--- a/src/api/system/customForm.js
+++ b/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'
+  })
+}
diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue
index aa0ecac..de19889 100644
--- a/src/components/XyTable/index.vue
+++ b/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}
diff --git a/src/const/addProps.js b/src/const/addProps.js
index 03cb3d1..edd8a70 100644
--- a/src/const/addProps.js
+++ b/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,
diff --git a/src/const/inputType.js b/src/const/inputType.js
index 032629c..91d8ebc 100644
--- a/src/const/inputType.js
+++ b/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"],
diff --git a/src/const/templateProps.js b/src/const/templateProps.js
index 6576107..06b20c6 100644
--- a/src/const/templateProps.js
+++ b/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", {
diff --git a/src/views/component/dialog.vue b/src/views/component/dialog.vue
index 31563f1..7de13eb 100644
--- a/src/views/component/dialog.vue
+++ b/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();
diff --git a/src/views/component/table.vue b/src/views/component/table.vue
index 0113ce5..ac9a263 100644
--- a/src/views/component/table.vue
+++ b/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)
       })
     }
diff --git a/src/views/system/components/editPane.vue b/src/views/system/components/editPane.vue
index 1c4666d..fb19b18 100644
--- a/src/views/system/components/editPane.vue
+++ b/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 });
diff --git a/src/views/system/components/formEditor.vue b/src/views/system/components/formEditor.vue
index 4d580cb..0fa48a1 100644
--- a/src/views/system/components/formEditor.vue
+++ b/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,
diff --git a/src/views/system/components/formSlotRender.vue b/src/views/system/components/formSlotRender.vue
index 9e678a3..11137f0 100644
--- a/src/views/system/components/formSlotRender.vue
+++ b/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 [

From c7c0f4939395a6a7828066e51d52c8b6a56f7d60 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Wed, 31 May 2023 17:24:12 +0800
Subject: [PATCH 2/2] 2023-5-31

---
 package.json                               |   1 +
 src/components/XyTable/index.vue           |  11 +-
 src/const/templateProps.js                 |   7 +-
 src/main.js                                |   2 +
 src/views/component/dialog.vue             | 119 ++++++++++++++++++---
 src/views/component/imports.vue            |   2 +-
 src/views/component/table.vue              |  31 +++++-
 src/views/system/components/editPane.vue   |  32 +++++-
 src/views/system/components/formEditor.vue |   2 +
 src/views/system/form.vue                  |   4 +-
 10 files changed, 181 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 3036189..4dca0f6 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@smallwei/avue": "^2.9.15",
     "@tinymce/tinymce-vue": "^3.0.1",
+    "af-table-column": "^1.0.3",
     "avue-plugin-map": "^1.0.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue
index de19889..7525b4c 100644
--- a/src/components/XyTable/index.vue
+++ b/src/components/XyTable/index.vue
@@ -794,7 +794,7 @@ export default {
                 return $scopedSlots[item.prop](item, index);
               }
               return (
-                <el-table-column
+                <af-table-column
                   // TODO: 随机key值与sort优化问题
                   //key={`xy-table-col-${item.prop}`}
                   key={String(Math.random()) + index}
@@ -804,7 +804,7 @@ export default {
                   column-key={String(Math.random())}
                   label={item.label}
                   prop={item.prop}
-                  width={item.width || "auto"}
+                  width={item.width}
                   min-width={item.minWidth}
                   fixed={item.fixed ?? false}
                   render-header={item.renderHeader}
@@ -819,7 +819,6 @@ export default {
                   header-align={item.headerAlign ?? "center"}
                   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}
@@ -845,7 +844,7 @@ export default {
                   {item.multiHd
                     ? item.multiHd.map((item1, index1) => {
                         return (
-                          <el-table-column
+                          <af-table-column
                             //key={`xy-table-col-multi-${item1.prop}`}
                             key={String(Math.random()) + index1}
                             prop={`${item.pProp ? item.pProp + "." : ""}${
@@ -889,11 +888,11 @@ export default {
                                   }
                                 : ""
                             }
-                          ></el-table-column>
+                          ></af-table-column>
                         );
                       })
                     : ""}
-                </el-table-column>
+                </af-table-column>
               );
             })}
             {$scopedSlots.btns ? $scopedSlots.btns() : this.isCreateAuthBtns()}
diff --git a/src/const/templateProps.js b/src/const/templateProps.js
index 06b20c6..8b931f1 100644
--- a/src/const/templateProps.js
+++ b/src/const/templateProps.js
@@ -6,13 +6,16 @@ export const templatePropsMap = new Map([
   }],
   ["richtext",'my-tinymce'],
   ['select', {
-    value: '选项1'
+    value: '选项1',
+    readonly: true
   }],
   ['radio',{
-    value: '选项1'
+    value: '选项1',
+    readonly: true
   }],
   ["checkbox", {
     multiple: true,
+    readonly: true,
     value: ['选项1']
   }],
   ["date", {
diff --git a/src/main.js b/src/main.js
index 4c756ca..ab218e5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -79,6 +79,8 @@ import tinymce from '@/components/XyTinymce'
 Vue.component('my-tinymce',tinymce)
 import myMap from "@/components/XyMap"
 Vue.component('my-map',myMap)
+import afTableColumn from 'af-table-column'
+Vue.component('af-table-column',afTableColumn)
 
 Vue.prototype.$integrateData = (target,value) => {
   for(let i in target){
diff --git a/src/views/component/dialog.vue b/src/views/component/dialog.vue
index 7de13eb..3de0beb 100644
--- a/src/views/component/dialog.vue
+++ b/src/views/component/dialog.vue
@@ -54,7 +54,10 @@ export default {
                       props: {
                         label: i.name,
                         prop: i.field,
-                        required: i.validation instanceof Array ? !!i.validation.find(i => i === 'required') : false,
+                        required:
+                          i.validation instanceof Array
+                            ? !!i.validation.find((i) => i === "required")
+                            : false,
                       },
                     },
                     [
@@ -63,7 +66,7 @@ export default {
                         {
                           ref: `elEdit_${i.field}`,
                           style: {
-                            width: '100%'
+                            width: "100%",
                           },
                           props: {
                             ...addPropsMap.get(i.edit_input),
@@ -83,6 +86,55 @@ export default {
                               }
                             },
                           },
+                          scopedSlots:
+                            i.edit_input === "file" || i.edit_input === "files"
+                              ? {
+                                  file: (scope) => {
+                                    let { file } = scope;
+
+                                    console.log(111, file);
+                                    return [
+                                      h("div", {}, [
+                                        h("i", {
+                                          class: {
+                                            "el-icon-circle-check":
+                                              file.status === "success",
+                                            "el-icon-loading":
+                                              file.status === "uploading",
+                                          },
+                                          style: {
+                                            "color": file.status === "success" ? "green" : ""
+                                          }
+                                        }),
+                                        h(
+                                          "a",
+                                          {
+                                            attrs: {
+                                              href: file.url,
+                                              download: file.name,
+                                            },
+                                            class: {
+                                              "uploaded-a":
+                                                file.status === "success",
+                                            }
+                                          },
+                                          file.name
+                                        )
+                                      ]),
+                                      h("i", {
+                                        class: "el-icon-close",
+                                        on: {
+                                          ["click"]: () =>
+                                            this.fileRemoveHandler(
+                                              file,
+                                              i.field
+                                            ),
+                                        },
+                                      }),
+                                    ];
+                                  },
+                                }
+                              : "",
                         },
                         this.optionsRender(h, i)
                       ),
@@ -140,12 +192,14 @@ export default {
       dialogVisible: false,
       form: {},
       rules: {},
-      file: {
-
-      }
+      file: {},
     };
   },
   methods: {
+    fileRemoveHandler(file, field) {
+      this.file[field] = this.file[field].filter((item) => item !== file);
+      this.file = Object.assign({}, this.file);
+    },
     //on事件类别获取
     getEventType(info) {
       if (info.type === "checkbox") {
@@ -159,11 +213,13 @@ export default {
       if (info.edit_input === "checkbox" || info.edit_input === "radio") {
         return info._paramters && info._paramters instanceof Array
           ? info._paramters.map((i) =>
-            h(
-              "el-option",
-              { props: { label: i.name || i.no || i.value || i.id , 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") {
@@ -230,6 +286,14 @@ export default {
         props.onRemove = (file, fileList) => {
           this.file[info.field] = fileList;
         };
+
+        props.onError = (err,file,fileList) => {
+          this.file[info.field] = fileList;
+          this.$message({
+            type: "warning",
+            message: err
+          })
+        }
       }
       return props;
     },
@@ -270,6 +334,18 @@ export default {
       const res = await show({ id: this.id, table_name: this.tableName });
       this.$integrateData(this.form, res);
       this.form = Object.assign({}, this.form);
+
+      this.formInfo.forEach((i) => {
+        if (i && i.edit_input === "file") {
+          this.file[i.field] = [
+            {
+              name: res[i.link_with_name]?.original_name,
+              url: res[i.link_with_name]?.url,
+              response: res[i.link_with_name],
+            },
+          ];
+        }
+      });
     },
 
     submit() {
@@ -294,8 +370,8 @@ export default {
                 (i) => i?.response?.id
               );
             }
-            if(info.edit_input === "file") {
-              this.form[info.field] = this.file[info.field][0]?.response?.id
+            if (info.edit_input === "file") {
+              this.form[info.field] = this.file[info.field][0]?.response?.id;
             }
           });
           console.log(this.form);
@@ -322,7 +398,11 @@ export default {
         newVal.forEach((i) => {
           if (i.field) {
             this.form[i.field] = "";
-            if (i.validation instanceof Array && i.validation.length > 0 && !!i.validation.find(i => i === 'required')) {
+            if (
+              i.validation instanceof Array &&
+              i.validation.length > 0 &&
+              !!i.validation.find((i) => i === "required")
+            ) {
               this.rules[i.field] = [
                 { required: true, message: `请填写${i.name}` },
               ];
@@ -330,7 +410,7 @@ export default {
             if (i.edit_input === "files") {
               this.form[i.field] = [];
             }
-            if(i.edit_input === "files" || i.edit_input === "file") {
+            if (i.edit_input === "files" || i.edit_input === "file") {
               this.file[i.field] = [];
             }
             if (i.edit_input === "checkbox") {
@@ -359,4 +439,15 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.uploaded-a {
+  color: red;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.uploaded-a:hover {
+  color: red;
+  text-decoration: underline;
+}
+</style>
diff --git a/src/views/component/imports.vue b/src/views/component/imports.vue
index 3ed0977..fd62748 100644
--- a/src/views/component/imports.vue
+++ b/src/views/component/imports.vue
@@ -43,7 +43,7 @@
 import * as XLSX from "xlsx";
 import { saveAs } from "file-saver";
 import { getToken } from "@/utils/auth";
-import { imports } from "@/api/system/baseForm"
+import { imports } from "@/api/system/baseForm";
 export default {
   props: {
     formInfo: {
diff --git a/src/views/component/table.vue b/src/views/component/table.vue
index ac9a263..da64d49 100644
--- a/src/views/component/table.vue
+++ b/src/views/component/table.vue
@@ -283,6 +283,7 @@ export default {
       this.selectForm = ''
       this.table = res.data.map(i => {
         let linkOb = {}
+
         if(i.parameter_id) {
           linkOb.customFn = row => {
             return (
@@ -293,9 +294,15 @@ export default {
         if(i.link_table_name) {
           if(i.link_relation === 'hasOne') {
             linkOb.customFn = row => {
-              return (
-                <span>{ row[i.link_with_name]?.name || row[i.link_with_name]?.no || row[i.link_with_name]?.value }</span>
-              )
+              if(i.edit_input === 'file') {
+                return (
+                  <a download={row[i.link_with_name]?.original_name} href={ row[i.link_with_name]?.url }>{ row[i.link_with_name]?.original_name }</a>
+                )
+              }else{
+                return (
+                  <span>{ row[i.link_with_name]?.name || row[i.link_with_name]?.no || row[i.link_with_name]?.value }</span>
+                )
+              }
             }
           }
           if(i.link_relation === 'hasMany') {
@@ -311,8 +318,15 @@ export default {
         return Object.assign({
           prop: i.field,
           label: i.name,
+          width: i.width,
+          fixed: i.is_fixed
         },linkOb)
       })
+      this.table.unshift({
+        type: 'index',
+        width: 60,
+        label: '序号'
+      })
     }
   },
   computed: {
@@ -360,4 +374,15 @@ export default {
     padding: 0 10px;
   }
 }
+
+a {
+  color: red;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
 </style>
diff --git a/src/views/system/components/editPane.vue b/src/views/system/components/editPane.vue
index fb19b18..2fdd4aa 100644
--- a/src/views/system/components/editPane.vue
+++ b/src/views/system/components/editPane.vue
@@ -15,7 +15,7 @@
           ></el-input>
         </el-form-item>
         <el-form-item required prop="field" label="字段标识">
-          <el-input v-model="selectedForm.field" disabled></el-input>
+          <el-input v-model="selectedForm.field"></el-input>
         </el-form-item>
         <el-form-item label="关联方式">
           <el-select
@@ -126,6 +126,30 @@
             :inactive-value="0"
           ></el-switch>
         </el-form-item>
+        <el-form-item label="是否固定" prop="is_fix">
+          <el-select
+            v-model="selectedForm.is_fix"
+            clearable
+            :popper-append-to-body="false"
+            placeholder="请选择固定方式"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in [{ value: 'left',label: '左' }, { value: 'right',label: '右' }]"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="width" label="列宽">
+          <el-input-number
+            clearable
+            :controls="false"
+            v-model="selectedForm.width"
+            placeholder="不输入为自动计算"
+            style="width: 100%"
+          ></el-input-number>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="saveField">保存</el-button>
           <el-button
@@ -283,4 +307,8 @@ export default {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+::v-deep .el-input-number.is-without-controls .el-input__inner {
+  text-align: left;
+}
+</style>
diff --git a/src/views/system/components/formEditor.vue b/src/views/system/components/formEditor.vue
index 0fa48a1..b56794a 100644
--- a/src/views/system/components/formEditor.vue
+++ b/src/views/system/components/formEditor.vue
@@ -205,6 +205,8 @@ export default {
           list_show: 1,
           link_table_name: "",
           link_relation: "",
+          is_fix: "",
+          width: ""
         };
 
         this.$store.commit("form/SPLICE_FORM_LIST", {
diff --git a/src/views/system/form.vue b/src/views/system/form.vue
index f5ad469..f2e3967 100644
--- a/src/views/system/form.vue
+++ b/src/views/system/form.vue
@@ -69,13 +69,13 @@ export default {
         {
           prop:'table_name',
           label:'表名',
-          width:180,
+          //width:180,
           sortable:'custom',
         },
         {
           prop:'name',
           label:'名称',
-          width:200,
+         // width:200,
           sortable:'custom',
         },
       ]