修改bug，新增详情表头

src/components/columnSetup/index.vue

@@ -3,9 +3,13 @@
     <Modal
       v-model="showModal"
       title="设置"
-      @on-ok="handleModalOk"
-      @on-cancel="showModalFalse"
+      :closable="false"
+      :mask-closable="false"
     >
+      <div slot="footer">
+        <Button @click="handleModalOk">保存</Button>
+        <Button @click="showModalFalse">取消</Button>
+      </div>
       <div class="modal_content">
         <Tabs
           value="name1"
@@ -23,9 +27,32 @@
               :columns="formModalColumns"
               border
               ref="selection"
+              @on-select-cancel="selectCancel"
               @on-selection-change="selectListHeader"
               :data="tableModalTableDataHeader"
-            ></Table>
+              :draggable="true"
+              @on-drag-drop="(first, end) => onDragDrop(first, end, 1)"
+            >
+              <template slot="sortord" slot-scope="{ row, index }">
+                <Select
+                  v-model="row.sortord"
+                  @on-change="(e) => clickChange(e, row, index)"
+                >
+                  <Option
+                    v-for="(item, index) in pointList"
+                    :value="item.value"
+                    :key="index"
+                    >{{ item.label }}</Option
+                  >
+                </Select>
+              </template>
+              <template slot="title" slot-scope="{ row, index }">
+                <Input
+                  v-model="row.title"
+                  @on-change="(e) => changeTitle(e, row, index)"
+                />
+              </template>
+            </Table>
           </TabPane>
           <TabPane label="筛选项" name="name2">
             <div style="padding: 15px 0px">
@@ -38,8 +65,18 @@
               border
               ref="selection1"
               @on-selection-change="selectList"
+              @on-select-cancel="selectScreenCancel"
               :data="tableModalTableData"
-            ></Table>
+              :draggable="true"
+              @on-drag-drop="(first, end) => onDragDrop(first, end, 2)"
+            >
+              <template slot="screenTitle" slot-scope="{ row, index }">
+                <Input
+                  v-model="row.title"
+                  @on-change="(e) => changeScreenTitle(e, row, index)"
+                />
+              </template>
+            </Table>
           </TabPane>
         </Tabs>
       </div>
@@ -54,6 +91,16 @@ export default {
       ifCheckAllHeader: false,
       checkedList: [], //筛选项选择的
       checkedListHeader: [], //表头选择的
+      pointList: [
+        {
+          value: "1",
+          label: "升序",
+        },
+        {
+          value: "2",
+          label: "降序",
+        },
+      ],
     };
   },
   props: {
@@ -78,16 +125,49 @@ export default {
       default: false,
     },
   },
-  watch:{
-    showModal(val){
-      this.showModalTrue()
-    }
-  },
   methods: {
+    //拖拽事件
+    onDragDrop(first, end, type) {
+      if (type == 1) {
+        this.tableModalTableDataHeader.splice(
+          end,
+          1,
+          ...this.tableModalTableDataHeader.splice(
+            first,
+            1,
+            this.tableModalTableDataHeader[end]
+          )
+        );
+      } else {
+        this.tableModalTableData.splice(
+          end,
+          1,
+          ...this.tableModalTableData.splice(
+            first,
+            1,
+            this.tableModalTableData[end]
+          )
+        );
+      }
+    },
+    clickChange(e, row, index) {
+      this.tableModalTableDataHeader[index].sortord = e;
+    },
+    changeTitle(e, row, index) {
+      this.tableModalTableDataHeader[index].title = row.title;
+    },
+    //筛选项点击展示名称
+    changeScreenTitle(e, row, index) {
+      this.tableModalTableData[index].title = row.title;
+    },
     //点击确定按钮
     handleModalOk() {
       this.$emit("event1", false);
-      this.$emit("handleModalOk",this.checkedListHeader,this.checkedList)
+      this.$emit(
+        "handleModalOk",
+        this.tableModalTableDataHeader,
+        this.tableModalTableData
+      );
     },
     //点击取消按钮
     showModalFalse() {
@@ -95,10 +175,9 @@ export default {
     },
     //点击栏目设置
     showModalTrue() {
-      debugger
-      this.checkedListHeader = []
-      this.checkedList = []
-      this.showModal = true;
+      this.checkedListHeader = [];
+      this.checkedList = [];
+      // this.showModal = true;
       this.$refs.selection1.selectAll(false);
       this.$refs.selection.selectAll(false);
       let arr = [];
@@ -107,6 +186,8 @@ export default {
           e._checked = true;
           arr.push(e);
           this.tableModalTableData.splice(index, 1, e);
+        } else {
+          e._checked = false;
         }
       });
       let arrHeader = [];
@@ -115,6 +196,9 @@ export default {
           e._checked = true;
           arrHeader.push(e);
           this.tableModalTableDataHeader.splice(index, 1, e);
+        } else {
+          e._checked = false;
+          this.tableModalTableDataHeader.splice(index, 1, e);
         }
       });
       if (arr.length == this.tableModalTableData.length) {
@@ -123,16 +207,16 @@ export default {
       if (arrHeader.length == this.tableModalTableDataHeader.length) {
         this.ifCheckAllHeader = true;
       }
-      this.checkedListHeader = this.tableModalTableDataHeader.filter(f=>{
-        if(f.is_show == true){
-          return f
+      this.checkedListHeader = this.tableModalTableDataHeader.filter((f) => {
+        if (f.is_show == true) {
+          return f;
         }
-      })
-      this.checkedList = this.tableModalTableData.filter(f=>{
-        if(f.is_show == true){
-          return f
+      });
+      this.checkedList = this.tableModalTableData.filter((f) => {
+        if (f.is_show == true) {
+          return f;
         }
-      })
+      });
     },
     //筛选全选按钮
     ifCheckAllClick() {
@@ -151,19 +235,24 @@ export default {
         this.$nextTick(() => {
           this.ifCheckAll = false;
           this.$refs.selection1.selectAll(false);
+          this.tableModalTableData.forEach((e) => {
+            e.is_show = false;
+            e._checked = false;
+          });
           return;
         });
       }
     },
     //表头全选按钮
     ifCheckAllClickHeader() {
+      debugger;
       if (this.checkedListHeader.length > 0 && this.ifCheckAllHeader == true) {
         this.$nextTick(() => {
           this.ifCheckAllHeader = true;
           this.$refs.selection.selectAll(true);
         });
       } else if (
-        this.checkedList.length == 0 &&
+        this.checkedListHeader.length == 0 &&
         this.ifCheckAllHeader == true
       ) {
         this.$nextTick(() => {
@@ -175,12 +264,42 @@ export default {
         this.$nextTick(() => {
           this.ifCheckAllHeader = false;
           this.$refs.selection.selectAll(false);
+          this.tableModalTableDataHeader.forEach((e) => {
+            e.is_show = false;
+            e._checked = false;
+          });
           return;
         });
       }
     },
     //筛选项选中
     selectList(row) {
+      var result = [];
+      for (var i = 0; i < this.tableModalTableData.length; i++) {
+        var obj = this.tableModalTableData[i];
+        var num = obj.is_show;
+        var isExist = false;
+        for (var j = 0; j < row.length; j++) {
+          var aj = row[j];
+          var n = aj.is_show;
+          if (n == num) {
+            isExist = true;
+            break;
+          }
+        }
+        if (!isExist) {
+          result.push(obj);
+        }
+      }
+      this.tableModalTableData.forEach((el, index) => {
+        row.forEach((cl) => {
+          if (el.key == cl.key) {
+            el.is_show = true;
+            el._checked = true;
+            this.tableModalTableData.splice(index, 1, el);
+          }
+        });
+      });
       this.checkedList = row;
       if (row.length == this.tableModalTableData.length) {
         this.ifCheckAll = true;
@@ -188,9 +307,51 @@ export default {
         this.ifCheckAll = false;
       }
     },
-
+    selectCancel(selection, row) {
+      this.tableModalTableDataHeader.forEach((e, index) => {
+        if (e.key == row.key) {
+          this.tableModalTableDataHeader[index]._checked = false;
+          this.tableModalTableDataHeader[index].is_show = false;
+        }
+      });
+    },
+    selectScreenCancel(selection, row) {
+      this.tableModalTableData.forEach((e, index) => {
+        if (e.key == row.key) {
+          this.tableModalTableData[index]._checked = false;
+          this.tableModalTableData[index].is_show = false;
+        }
+      });
+    },
     //表头选中
     selectListHeader(row) {
+      var result = [];
+      for (var i = 0; i < this.tableModalTableDataHeader.length; i++) {
+        var obj = this.tableModalTableDataHeader[i];
+        var num = obj.is_show;
+        var isExist = false;
+        for (var j = 0; j < row.length; j++) {
+          var aj = row[j];
+          var n = aj.is_show;
+          if (n == num) {
+            isExist = true;
+            break;
+          }
+        }
+        if (!isExist) {
+          result.push(obj);
+        }
+      }
+      this.tableModalTableDataHeader.forEach((el, index) => {
+        row.forEach((cl) => {
+          if (el.key == cl.key) {
+            el.is_show = true;
+            el._checked = true;
+            this.tableModalTableDataHeader.splice(index, 1, el);
+          }
+        });
+      });
+      this.$emit("selectAll", row);
       this.checkedListHeader = row;
       if (row.length == this.tableModalTableDataHeader.length) {
         this.ifCheckAllHeader = true;

src/views/godownEntry/list.vue

@@ -201,6 +201,7 @@
       </Form>
     </Modal>
     <ColumnSetup
+      ref="child"
       :tableModalTableDataHeader="tableModalTableDataHeader"
       :formModalColumns="formModalColumns"
       :tableModalColumns="tableModalColumns"
@@ -307,20 +308,21 @@ export default {
       tableModalTableDataHeader: [
         {
           is_show: false,
-          sortord: 1,
+          sortord: "1",
           key: "order_no",
           value: "订单编号",
           title: "订单编号",
         },
         {
           is_show: true,
-          sortord: 2,
+          sortord: "2",
           key: "order_type",
           value: "订单类型",
           title: "项目名称",
         },
         {
           is_show: true,
+          sortord: "1",
           key: "order_status",
           value: "订单状态",
           title: "订单状态",
@@ -328,12 +330,14 @@ export default {
         {
           is_show: true,
           key: "salesman",
+          sortord: "1",
           value: "业务员",
           title: "业务员  ",
         },
         {
           is_show: true,
           key: "warning_state",
+          sortord: "1",
           value: "紧急程度",
           title: "紧急程度",
         },
@@ -341,29 +345,34 @@ export default {
           is_show: true,
           key: "crt_time",
           value: "订单创建时间",
+          sortord: "1",
           title: "订单创建时间",
         },
         {
           is_show: true,
           key: "project_name",
           value: "项目名称",
+          sortord: "1",
           title: "项目名称",
         },
         {
           is_show: true,
           key: "start_time",
           value: "订单开始日期",
+          sortord: "1",
           title: "订单开始日期",
         },
         {
           is_show: true,
           key: "end_time",
           value: "订单交付日期",
+          sortord: "1",
           title: "订单交付日期",
         },
         {
           is_show: true,
           key: "complete_rate",
+          sortord: "1",
           value: "生产进度",
           title: "生产进度",
         },
@@ -371,12 +380,14 @@ export default {
         {
           is_show: true,
           key: "delivery_date",
+          sortord: "1",
           value: "预估交付日期",
           title: "预估交付日期",
         },
         {
           is_show: true,
           key: "delivery_date",
+          sortord: "1",
           value: "操作",
           title: "操作",
         },
@@ -596,25 +607,7 @@ export default {
           align: "center",
           key: "title",
           minWidth: 100,
-          render: (h, params) => {
-            const { index } = params;
-            const currentRow = JSON.parse(
-              JSON.stringify(this.tableModalTableData[index])
-            );
-            return h("Input", {
-              props: {
-                value: currentRow.title,
-                type: "text",
-                disabled: currentRow.title == "全选" ? true : false,
-              },
-              on: {
-                "on-change": (e) => {
-                  currentRow.title = e.target.value;
-                  this.tableModalTableData.splice(index, 1, currentRow);
-                },
-              },
-            });
-          },
+          slot:"screenTitle",
         },
       ],
       pointList: [
@@ -645,63 +638,14 @@ export default {
           align: "center",
           key: "title",
           minWidth: 100,
-          render: (h, params) => {
-            const { index } = params;
-            const currentRow = JSON.parse(
-              JSON.stringify(this.tableModalTableDataHeader[index])
-            );
-            return h("Input", {
-              props: {
-                value: params.row.title,
-              },
-              on: {
-                "on-change": (event) => {
-                  console.log(currentRow);
-                  currentRow.title = event.target.value;
-                  console.log(currentRow);
-                  // console.log(this.formModalColumns,params.index,params.column.key,this.formModalColumns[params.index][params.column.key] );
-                  // this.formModalColumns[params.index][params.column.key] =
-                  //   event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
-
-                },
-              },
-            });
-          },
+          slot:"title",
         },
         {
           title: "排序方式",
           align: "center",
           key: "sortord",
           minWidth: 100,
-          render: (h, params) => {
-            var pointList = this.pointList;
-            return h(
-              "Select",
-              {
-                props: {
-                  value: params.row.sortord,
-                },
-                on: {
-                  "on-change": (event) => {
-                    this.formModalColumns[params.index][params.column.key] =
-                      event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
-                  },
-                },
-              },
-              pointList.map(function (type) {
-                return h(
-                  "Option",
-                  {
-                    props: {
-                      value: type.value,
-                      key: type.label,
-                    },
-                  },
-                  type.label
-                );
-              })
-            );
-          },
+          slot:"sortord",
         },
         {
           title: "排序优先级",
@@ -775,6 +719,9 @@ export default {
     this.data();
   },
   methods: {
+    selectAll(row){
+      console.log(row,"这是row");
+    },
     data() {
       this.newTableColumns = [
         {
@@ -1016,14 +963,11 @@ export default {
     //点击栏目设置按钮
     showModalTrue() {
       this.showModal = true;
+      this.$refs.child.showModalTrue()
     },
     changeSize() {},
     changePage() {},
     handleModalOk(row1, row2) {
-      // console.log(row1, row2, "这是返回值");
-      // console.log(this.formModalColumns);
-      console.log(this.tableModalTableDataHeader,"tableModalTableDataHeader");
-      console.log(this.tableModalTableData,"tableModalTableData");
       console.log(row1,"这个是checkedListHeader");
       console.log(row2,"这是checkedList");
     },

src/views/login.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="info">
       <div class="info-header">
-        <span class="complan-title">众瀚软件</span>
+        <span class="complan-title">欧辰</span>
         <!-- <span class="up">--家装版</span> -->
       </div>
       <!-- <div>

src/views/pointsShelfList/list.vue

@@ -32,50 +32,16 @@
         />
       </div>
     </div>
-    <Modal
-      v-model="showModal"
-      title="设置"
-      @on-ok="handleModalOk"
-      @on-cancel="showModal = false"
-    >
-      <div class="modal_content">
-        <Tabs
-          value="name1"
-          style="max-height: 700px; overflow: hidden; overflow-y: auto"
-        >
-          <TabPane label="表头" name="name1">
-            <div style="padding: 15px 0px">
-              <Checkbox
-                v-model="ifCheckAllHeader"
-                @on-change="ifCheckAllClickHeader"
-                >全选</Checkbox
-              >
-            </div>
-            <Table
-              :columns="formModalColumns"
-              border
-              ref="selection"
-              @on-selection-change="selectListHeader"
-              :data="tableModalTableDataHeader"
-            ></Table>
-          </TabPane>
-          <TabPane label="筛选项" name="name2">
-            <div style="padding: 15px 0px">
-              <Checkbox v-model="ifCheckAll" @on-change="ifCheckAllClick"
-                >全选</Checkbox
-              >
-            </div>
-            <Table
-              :columns="tableModalColumns"
-              border
-              ref="selection1"
-              @on-selection-change="selectList"
-              :data="tableModalTableData"
-            ></Table>
-          </TabPane>
-        </Tabs>
-      </div>
-    </Modal>
+    <ColumnSetup
+      ref="child"
+      :tableModalTableDataHeader="tableModalTableDataHeader"
+      :formModalColumns="formModalColumns"
+      :tableModalColumns="tableModalColumns"
+      :tableModalTableData="tableModalTableData"
+      :showModal="showModal"
+      @event1="change($event)"
+      @handleModalOk="handleModalOk"
+    />
     <Modal
       v-model="searchModal"
       title="查找"
@@ -248,9 +214,11 @@
 </template>
 <script>
 import TopTitle from "../../components/TopTitle/index";
+import ColumnSetup from "../../components/columnSetup/index.vue";
 export default {
   components: {
     TopTitle,
+    ColumnSetup,
   },
   data() {
     return {
@@ -280,18 +248,21 @@ export default {
       tableModalTableDataHeader: [
         {
           is_show: false,
+          sortord: "1",
           key: "order_no",
           value: "订单编号",
           title: "订单编号",
         },
         {
           is_show: true,
+          sortord: "2",
           key: "order_type",
           value: "订单类型",
           title: "项目名称",
         },
         {
           is_show: true,
+          sortord: "1",
           key: "order_status",
           value: "订单状态",
           title: "订单状态",
@@ -299,12 +270,14 @@ export default {
         {
           is_show: true,
           key: "salesman",
+          sortord: "1",
           value: "业务员",
           title: "业务员  ",
         },
         {
           is_show: true,
           key: "warning_state",
+          sortord: "1",
           value: "紧急程度",
           title: "紧急程度",
         },
@@ -312,29 +285,34 @@ export default {
           is_show: true,
           key: "crt_time",
           value: "订单创建时间",
+          sortord: "1",
           title: "订单创建时间",
         },
         {
           is_show: true,
           key: "project_name",
           value: "项目名称",
+          sortord: "1",
           title: "项目名称",
         },
         {
           is_show: true,
           key: "start_time",
           value: "订单开始日期",
+          sortord: "1",
           title: "订单开始日期",
         },
         {
           is_show: true,
           key: "end_time",
           value: "订单交付日期",
+          sortord: "1",
           title: "订单交付日期",
         },
         {
           is_show: true,
           key: "complete_rate",
+          sortord: "1",
           value: "生产进度",
           title: "生产进度",
         },
@@ -342,12 +320,14 @@ export default {
         {
           is_show: true,
           key: "delivery_date",
+          sortord: "1",
           value: "预估交付日期",
           title: "预估交付日期",
         },
         {
           is_show: true,
           key: "delivery_date",
+          sortord: "1",
           value: "操作",
           title: "操作",
         },
@@ -620,38 +600,18 @@ export default {
           minWidth: 100,
         },
         {
+          title: "展示名称",
+          align: "center",
+          key: "title",
+          minWidth: 100,
+          slot: "title",
+        },
+        {
           title: "排序方式",
           align: "center",
           key: "sortord",
           minWidth: 100,
-          render: (h, params) => {
-            return h(
-              "Select",
-              {
-                props: {
-                  value: params.row.sortord,
-                },
-                on: {
-                  "on-change": (event) => {
-                    this.addPoint.tableData[params.index][params.column.key] =
-                      event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
-                  },
-                },
-              },
-              this.pointList.map(function (type) {
-                return h(
-                  "Option",
-                  {
-                    props: {
-                      value: type.value,
-                      key: type.label,
-                    },
-                  },
-                  type.label
-                );
-              })
-            );
-          },
+          slot: "sortord",
         },
         {
           title: "排序优先级",
@@ -667,7 +627,7 @@ export default {
                 },
                 on: {
                   "on-change": (event) => {
-                    this.addPoint.tableData[params.index][params.column.key] =
+                    this.formModalColumns[params.index][params.column.key] =
                       event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
                   },
                 },
@@ -697,23 +657,21 @@ export default {
         },
         {
           is_show: true,
-          key: "residential_name",
-          value: "项目名称",
+          key: "order_type",
+          value: "订单类型",
           title: "项目名称",
         },
-        { is_show: true, key: "nickname", value: "业务员", title: "业务员" },
         {
           is_show: true,
-          key: "client_name",
-          value: "客户姓名",
-          title: "客户姓名",
+          key: "order_status",
+          value: "订单状态",
+          title: "订单状态",
         },
-        { is_show: true, key: "address", value: "客户地址", title: "客户地址" },
         {
           is_show: true,
-          key: "leading_name",
-          value: "负责人",
-          title: "负责人",
+          key: "salesman",
+          value: "业务员",
+          title: "业务员  ",
         },
         {
           is_show: true,
@@ -723,20 +681,16 @@ export default {
         },
         {
           is_show: true,
-          key: "predict_price",
-          value: "产品总价",
-          title: "产品总价",
+          key: "crt_time",
+          value: "订单创建时间",
+          title: "订单创建时间",
         },
         {
           is_show: true,
-          key: "fax_price",
-          value: "折扣金额",
-          title: "折扣金额",
+          key: "project_name",
+          value: "项目名称",
+          title: "项目名称",
         },
-        { is_show: true, key: "price", value: "订单金额", title: "订单金额" },
-        { is_show: true, key: "get_money", value: "已收款", title: "已收款" },
-        { is_show: true, key: "unget_money", value: "未收款", title: "未收款" },
-        { is_show: true, key: "remark", value: "备注", title: "备注" },
         {
           is_show: true,
           key: "start_time",
@@ -755,15 +709,13 @@ export default {
           value: "生产进度",
           title: "生产进度",
         },
-        { is_show: true, key: "state", value: "订单状态", title: "订单状态" },
-        { is_show: true, key: "crt_name", value: "制单人", title: "制单人" },
+
         {
           is_show: true,
-          key: "crt_time",
-          value: "订单创建时间",
-          title: "订单创建时间",
+          key: "delivery_date",
+          value: "预估交付日期",
+          title: "预估交付日期",
         },
-        { is_show: true, key: "set", value: "操作", title: "操作" },
       ],
       tableModalColumns: [
         {
@@ -782,74 +734,28 @@ export default {
           align: "center",
           key: "title",
           minWidth: 100,
-          render: (h, params) => {
-            const { index } = params;
-            const currentRow = JSON.parse(
-              JSON.stringify(this.tableModalTableData[index])
-            );
-            return h("Input", {
-              props: {
-                value: currentRow.title,
-                type: "text",
-                disabled: currentRow.title == "全选" ? true : false,
-              },
-              on: {
-                "on-change": (e) => {
-                  currentRow.title = e.target.value;
-                  this.tableModalTableData.splice(index, 1, currentRow);
-                },
-              },
-            });
-          },
+          slot: "screenTitle",
+        },
+      ],
+      tableModalColumns: [
+        {
+          type: "selection",
+          width: 55,
+          align: "center",
+        },
+        {
+          title: "字段名",
+          align: "center",
+          key: "value",
+          minWidth: 100,
+        },
+        {
+          title: "展示名称",
+          align: "center",
+          key: "title",
+          minWidth: 100,
+          slot: "screenTitle",
         },
-        // {
-        //   title: "排序方式",
-        //   align: "center",
-        //   key: "title",
-        //   minWidth: 100,
-        //   render: (h, params) => {
-        //     const { index } = params;
-        //     const currentRow = JSON.parse(
-        //       JSON.stringify(this.tableColumns[index])
-        //     );
-        //     return h("Input", {
-        //       props: {
-        //         value: currentRow.title,
-        //         type: "text",
-        //       },
-        //       on: {
-        //         "on-change": (e) => {
-        //           currentRow.title = e.target.value;
-        //           this.tableColumns.splice(index, 1, currentRow);
-        //         },
-        //       },
-        //     });
-        //   },
-        // },
-        // {
-        //   title: "排序优先级",
-        //   align: "center",
-        //   key: "title2",
-        //   minWidth: 120,
-        //   render: (h, params) => {
-        //     const { index } = params;
-        //     const currentRow = JSON.parse(
-        //       JSON.stringify(this.tableColumns[index])
-        //     );
-        //     return h("Input", {
-        //       props: {
-        //         value: currentRow.title,
-        //         type: "text",
-        //       },
-        //       on: {
-        //         "on-change": (e) => {
-        //           currentRow.title2 = e.target.value;
-        //           this.tableColumns.splice(index, 1, currentRow);
-        //         },
-        //       },
-        //     });
-        //   },
-        // },
       ],
       ifCheckAll: false,
       ifCheckAllHeader: false,
@@ -862,7 +768,6 @@ export default {
       console.log(newValue);
       this.$nextTick(() => {
         this.$refs.selection1.selectAll(newValue);
-        console.log(this.$refs.selection1, "测试");
       });
     },
   },
@@ -1145,8 +1050,17 @@ export default {
     },
     changeSize() {},
     changePage() {},
-    handleModalOk() {
-      console.log("hande");
+    change(data) {
+      this.showModal = data;
+    },
+    //点击栏目设置按钮
+    showModalTrue() {
+      this.showModal = true;
+      this.$refs.child.showModalTrue();
+    },
+    handleModalOk(row1, row2) {
+      console.log(row1, "这个是checkedListHeader");
+      console.log(row2, "这是checkedList");
     },
     searchModalOk() {
       console.log("查找");
@@ -1154,8 +1068,11 @@ export default {
     select(e) {
       this.selectData = e;
     },
-    delSelectData(type){
-       this.$router.push({ path: "/cms/pointsShelfList/particulars", query: { type } });
+    delSelectData(type) {
+      this.$router.push({
+        path: "/cms/pointsShelfList/particulars",
+        query: { type },
+      });
     },
     //点击栏目设置按钮
     showModalTrue() {

src/views/salesOrder/list.vue

@@ -2,7 +2,7 @@
   <div>
     <TopTitle title="销售订单">
       <Button type="primary" @click="searchModal = true">查找</Button>
-      <Button type="primary" @click="showModal = true" style="margin-left: 20px"
+      <Button type="primary" @click="showModalTrue()" style="margin-left: 20px"
         >栏目设置</Button
       >
     </TopTitle>
@@ -33,6 +33,7 @@
       </div>
     </div>
     <ColumnSetup
+      ref="child"
       :tableModalTableDataHeader="tableModalTableDataHeader"
       :formModalColumns="formModalColumns"
       :tableModalColumns="tableModalColumns"
@@ -45,7 +46,7 @@
       v-model="searchModal"
       title="查找"
       @on-ok="searchModalOk"
-      @on-cancel="showModal = false"
+      @on-cancel="searchModal = false"
       width="700"
     >
       <Form :model="formItem" :label-width="85">
@@ -873,66 +874,21 @@ export default {
           title: "全部字段",
           align: "center",
           key: "value",
-          minWidth: 110,
+          minWidth: 100,
         },
         {
           title: "展示名称",
           align: "center",
           key: "title",
-          minWidth: 110,
-          render: (h, params) => {
-            const { index } = params;
-            const currentRow = JSON.parse(
-              JSON.stringify(this.tableModalTableData[index])
-            );
-            return h("Input", {
-              props: {
-                value: currentRow.title,
-                type: "text",
-                disabled: currentRow.title == "全选" ? true : false,
-              },
-              on: {
-                "on-change": (e) => {
-                  currentRow.title = e.target.value;
-                  this.tableModalTableData.splice(index, 1, currentRow);
-                },
-              },
-            });
-          },
+          minWidth: 100,
+          slot: "title",
         },
         {
           title: "排序方式",
           align: "center",
           key: "sortord",
           minWidth: 100,
-          render: (h, params) => {
-            return h(
-              "Select",
-              {
-                props: {
-                  value: params.row.sortord,
-                },
-                on: {
-                  "on-change": (event) => {
-                    this.addPoint.tableData[params.index][params.column.key] =
-                      event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
-                  },
-                },
-              },
-              this.pointList.map(function (type) {
-                return h(
-                  "Option",
-                  {
-                    props: {
-                      value: type.value,
-                      key: type.label,
-                    },
-                  },
-                  type.label
-                );
-              })
-            );
-          },
+          slot: "sortord",
         },
         {
           title: "排序优先级",
@@ -948,7 +904,7 @@ export default {
                 },
                 on: {
                   "on-change": (event) => {
-                    this.addPoint.tableData[params.index][params.column.key] =
+                    this.formModalColumns[params.index][params.column.key] =
                       event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
                   },
                 },
@@ -1055,25 +1011,7 @@ export default {
           align: "center",
           key: "title",
           minWidth: 100,
-          render: (h, params) => {
-            const { index } = params;
-            const currentRow = JSON.parse(
-              JSON.stringify(this.tableModalTableData[index])
-            );
-            return h("Input", {
-              props: {
-                value: currentRow.title,
-                type: "text",
-                disabled: currentRow.title == "全选" ? true : false,
-              },
-              on: {
-                "on-change": (e) => {
-                  currentRow.title = e.target.value;
-                  this.tableModalTableData.splice(index, 1, currentRow);
-                },
-              },
-            });
-          },
+          slot: "screenTitle",
         },
       ],
     };
@@ -1175,12 +1113,14 @@ export default {
     console.log(dataInJs());
   },
   methods: {
+    //点击栏目设置按钮
+    showModalTrue() {
+      this.showModal = true;
+      this.$refs.child.showModalTrue();
+    },
     change(data) {
       this.showModal = data;
     },
-    handleModalOk(row1, row2) {
-      console.log(row1, row2, "这是返回值");
-    },
     data() {
       this.newTableColumns = this.arrList;
       let arr = [];
@@ -1200,8 +1140,14 @@ export default {
     },
     changeSize() {},
     changePage() {},
-    handleModalOk() {
-      console.log("hande");
+    //点击栏目设置按钮
+    showModalTrue() {
+      this.showModal = true;
+      this.$refs.child.showModalTrue();
+    },
+    handleModalOk(row1, row2) {
+      console.log(row1, "这个是checkedListHeader");
+      console.log(row2, "这是checkedList");
     },
     searchModalOk() {
       console.log("查找");

src/views/workOrder/list.vue

@@ -32,55 +32,21 @@
         />
       </div>
     </div>
-    <Modal
-      v-model="showModal"
-      title="设置"
-      @on-ok="handleModalOk"
-      @on-cancel="showModal = false"
-    >
-      <div class="modal_content">
-        <Tabs
-          value="name1"
-          style="max-height: 700px; overflow: hidden; overflow-y: auto"
-        >
-          <TabPane label="表头" name="name1">
-            <div style="padding: 15px 0px">
-              <Checkbox
-                v-model="ifCheckAllHeader"
-                @on-change="ifCheckAllClickHeader"
-                >全选</Checkbox
-              >
-            </div>
-            <Table
-              :columns="formModalColumns"
-              border
-              ref="selection"
-              @on-selection-change="selectListHeader"
-              :data="tableModalTableDataHeader"
-            ></Table>
-          </TabPane>
-          <TabPane label="筛选项" name="name2">
-            <div style="padding: 15px 0px">
-              <Checkbox v-model="ifCheckAll" @on-change="ifCheckAllClick"
-                >全选</Checkbox
-              >
-            </div>
-            <Table
-              :columns="tableModalColumns"
-              border
-              ref="selection1"
-              @on-selection-change="selectList"
-              :data="tableModalTableData"
-            ></Table>
-          </TabPane>
-        </Tabs>
-      </div>
-    </Modal>
+    <ColumnSetup
+      ref="child"
+      :tableModalTableDataHeader="tableModalTableDataHeader"
+      :formModalColumns="formModalColumns"
+      :tableModalColumns="tableModalColumns"
+      :tableModalTableData="tableModalTableData"
+      :showModal="showModal"
+      @event1="change($event)"
+      @handleModalOk="handleModalOk"
+    />
     <Modal
       v-model="searchModal"
       title="查找"
       @on-ok="searchModalOk"
-      @on-cancel="showModal = false"
+      @on-cancel="searchModal = false"
       width="700"
     >
       <Form :model="formItem" :label-width="85">
@@ -248,9 +214,11 @@
 </template>
 <script>
 import TopTitle from "../../components/TopTitle/index";
+import ColumnSetup from "../../components/columnSetup/index.vue";
 export default {
   components: {
     TopTitle,
+    ColumnSetup,
   },
   data() {
     return {
@@ -270,18 +238,21 @@ export default {
       tableModalTableDataHeader: [
         {
           is_show: false,
+          sortord: "1",
           key: "order_no",
           value: "订单编号",
           title: "订单编号",
         },
         {
           is_show: true,
+          sortord: "2",
           key: "order_type",
           value: "订单类型",
           title: "项目名称",
         },
         {
           is_show: true,
+          sortord: "1",
           key: "order_status",
           value: "订单状态",
           title: "订单状态",
@@ -289,12 +260,14 @@ export default {
         {
           is_show: true,
           key: "salesman",
+          sortord: "1",
           value: "业务员",
           title: "业务员  ",
         },
         {
           is_show: true,
           key: "warning_state",
+          sortord: "1",
           value: "紧急程度",
           title: "紧急程度",
         },
@@ -302,29 +275,34 @@ export default {
           is_show: true,
           key: "crt_time",
           value: "订单创建时间",
+          sortord: "1",
           title: "订单创建时间",
         },
         {
           is_show: true,
           key: "project_name",
           value: "项目名称",
+          sortord: "1",
           title: "项目名称",
         },
         {
           is_show: true,
           key: "start_time",
           value: "订单开始日期",
+          sortord: "1",
           title: "订单开始日期",
         },
         {
           is_show: true,
           key: "end_time",
           value: "订单交付日期",
+          sortord: "1",
           title: "订单交付日期",
         },
         {
           is_show: true,
           key: "complete_rate",
+          sortord: "1",
           value: "生产进度",
           title: "生产进度",
         },
@@ -332,12 +310,14 @@ export default {
         {
           is_show: true,
           key: "delivery_date",
+          sortord: "1",
           value: "预估交付日期",
           title: "预估交付日期",
         },
         {
           is_show: true,
           key: "delivery_date",
+          sortord: "1",
           value: "操作",
           title: "操作",
         },
@@ -611,38 +591,18 @@ export default {
           minWidth: 100,
         },
         {
+          title: "展示名称",
+          align: "center",
+          key: "title",
+          minWidth: 100,
+          slot: "title",
+        },
+        {
           title: "排序方式",
           align: "center",
           key: "sortord",
           minWidth: 100,
-          render: (h, params) => {
-            return h(
-              "Select",
-              {
-                props: {
-                  value: params.row.sortord,
-                },
-                on: {
-                  "on-change": (event) => {
-                    this.addPoint.tableData[params.index][params.column.key] =
-                      event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
-                  },
-                },
-              },
-              this.pointList.map(function (type) {
-                return h(
-                  "Option",
-                  {
-                    props: {
-                      value: type.value,
-                      key: type.label,
-                    },
-                  },
-                  type.label
-                );
-              })
-            );
-          },
+          slot: "sortord",
         },
         {
           title: "排序优先级",
@@ -658,7 +618,7 @@ export default {
                 },
                 on: {
                   "on-change": (event) => {
-                    this.addPoint.tableData[params.index][params.column.key] =
+                    this.formModalColumns[params.index][params.column.key] =
                       event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
                   },
                 },
@@ -698,23 +658,21 @@ export default {
         },
         {
           is_show: true,
-          key: "residential_name",
-          value: "项目名称",
+          key: "order_type",
+          value: "订单类型",
           title: "项目名称",
         },
-        { is_show: true, key: "nickname", value: "业务员", title: "业务员" },
         {
           is_show: true,
-          key: "client_name",
-          value: "客户姓名",
-          title: "客户姓名",
+          key: "order_status",
+          value: "订单状态",
+          title: "订单状态",
         },
-        { is_show: true, key: "address", value: "客户地址", title: "客户地址" },
         {
           is_show: true,
-          key: "leading_name",
-          value: "负责人",
-          title: "负责人",
+          key: "salesman",
+          value: "业务员",
+          title: "业务员  ",
         },
         {
           is_show: true,
@@ -724,20 +682,16 @@ export default {
         },
         {
           is_show: true,
-          key: "predict_price",
-          value: "产品总价",
-          title: "产品总价",
+          key: "crt_time",
+          value: "订单创建时间",
+          title: "订单创建时间",
         },
         {
           is_show: true,
-          key: "fax_price",
-          value: "折扣金额",
-          title: "折扣金额",
+          key: "project_name",
+          value: "项目名称",
+          title: "项目名称",
         },
-        { is_show: true, key: "price", value: "订单金额", title: "订单金额" },
-        { is_show: true, key: "get_money", value: "已收款", title: "已收款" },
-        { is_show: true, key: "unget_money", value: "未收款", title: "未收款" },
-        { is_show: true, key: "remark", value: "备注", title: "备注" },
         {
           is_show: true,
           key: "start_time",
@@ -756,15 +710,13 @@ export default {
           value: "生产进度",
           title: "生产进度",
         },
-        { is_show: true, key: "state", value: "订单状态", title: "订单状态" },
-        { is_show: true, key: "crt_name", value: "制单人", title: "制单人" },
+
         {
           is_show: true,
-          key: "crt_time",
-          value: "订单创建时间",
-          title: "订单创建时间",
+          key: "delivery_date",
+          value: "预估交付日期",
+          title: "预估交付日期",
         },
-        { is_show: true, key: "set", value: "操作", title: "操作" },
       ],
       tableModalColumns: [
         {
@@ -783,25 +735,7 @@ export default {
           align: "center",
           key: "title",
           minWidth: 100,
-          render: (h, params) => {
-            const { index } = params;
-            const currentRow = JSON.parse(
-              JSON.stringify(this.tableModalTableData[index])
-            );
-            return h("Input", {
-              props: {
-                value: currentRow.title,
-                type: "text",
-                disabled: currentRow.title == "全选" ? true : false,
-              },
-              on: {
-                "on-change": (e) => {
-                  currentRow.title = e.target.value;
-                  this.tableModalTableData.splice(index, 1, currentRow);
-                },
-              },
-            });
-          },
+          slot: "screenTitle",
         },
       ],
       checkedList: [], //筛选项选择的
@@ -1089,98 +1023,20 @@ export default {
         return a.sort - b.sort;
       });
     },
+    change(data) {
+      this.showModal = data;
+    },
+    handleModalOk(row1, row2) {
+      console.log(row1, "这个是checkedListHeader");
+      console.log(row2, "这是checkedList");
+    },
     //点击栏目设置按钮
     showModalTrue() {
       this.showModal = true;
-      this.$refs.selection1.selectAll(false);
-      this.$refs.selection.selectAll(false);
-      let arr = [];
-      this.tableModalTableData.forEach((e, index) => {
-        if (e.is_show == true) {
-          e._checked = true;
-          arr.push(e);
-          this.tableModalTableData.splice(index, 1, e);
-        }
-      });
-      let arrHeader = [];
-      this.tableModalTableDataHeader.forEach((e, index) => {
-        if (e.is_show == true) {
-          e._checked = true;
-          arrHeader.push(e);
-          this.tableModalTableDataHeader.splice(index, 1, e);
-        }
-      });
-      if (arr.length == this.tableModalTableData.length) {
-        this.ifCheckAll = true;
-      }
-      if (arrHeader.length == this.tableModalTableDataHeader.length) {
-        this.ifCheckAllHeader = true;
-      }
-    },
-    ifCheckAllClick() {
-      if (this.checkedList.length > 0 && this.ifCheckAll == true) {
-        this.$nextTick(() => {
-          this.ifCheckAll = true;
-          this.$refs.selection1.selectAll(true);
-        });
-      } else if (this.checkedList.length == 0 && this.ifCheckAll == true) {
-        this.$nextTick(() => {
-          this.ifCheckAll = true;
-          this.$refs.selection1.selectAll(true);
-          return;
-        });
-      } else {
-        this.$nextTick(() => {
-          this.ifCheckAll = false;
-          this.$refs.selection1.selectAll(false);
-          return;
-        });
-      }
-    },
-    ifCheckAllClickHeader() {
-      if (this.checkedListHeader.length > 0 && this.ifCheckAllHeader == true) {
-        this.$nextTick(() => {
-          this.ifCheckAllHeader = true;
-          this.$refs.selection.selectAll(true);
-        });
-      } else if (
-        this.checkedList.length == 0 &&
-        this.ifCheckAllHeader == true
-      ) {
-        this.$nextTick(() => {
-          this.ifCheckAllHeader = true;
-          this.$refs.selection.selectAll(true);
-          return;
-        });
-      } else {
-        this.$nextTick(() => {
-          this.ifCheckAllHeader = false;
-          this.$refs.selection.selectAll(false);
-          return;
-        });
-      }
-    },
-    selectList(row) {
-      this.checkedList = row;
-      if (row.length == this.tableModalTableData.length) {
-        this.ifCheckAll = true;
-      } else {
-        this.ifCheckAll = false;
-      }
-    },
-    selectListHeader(row) {
-      this.checkedListHeader = row;
-      if (row.length == this.tableModalTableDataHeader.length) {
-        this.ifCheckAllHeader = true;
-      } else {
-        this.ifCheckAllHeader = false;
-      }
+      this.$refs.child.showModalTrue();
     },
     changeSize() {},
     changePage() {},
-    handleModalOk() {
-      console.log("hande");
-    },
     searchModalOk() {
       console.log("查找");
     },