订单系统

src/components/ex-table/main.vue

@@ -4,7 +4,7 @@
       ref="elTable"
       :data="data"
       v-bind="table"
-      style="width:100%;"
+      style="width: 100%"
       v-on="$listeners"
       @selection-change="tableSelection = $event"
     >
@@ -32,7 +32,6 @@
               />
               <el-tooltip
                 v-else
-                 
                 :effect="column._screen_tip_effect_ || 'dark'"
                 :content="column._screen_tip_ || '筛选'"
                 :placement="column._screen_tip_placement_ || 'top'"
@@ -75,7 +74,7 @@
       :page-sizes="[10, 20, 50, 100]"
       :total="page.total"
       layout="total, sizes, prev, pager, next, jumper"
-      style="text-align:right"
+      style="text-align: right"
       class="fu-page"
       @current-change="$emit('page-curr-change', $event)"
       @size-change="$emit('page-size-change', $event)"
@@ -100,11 +99,11 @@
               :key="'conditionItem' + conditionIndex"
               class="condition-item"
             >
-              <hr>
+              <hr />
               <el-select
                 v-model="conditionItem.prop"
                 :class="{
-                  'el-error': !conditionItem.prop || conditionItem.prop == ''
+                  'el-error': !conditionItem.prop || conditionItem.prop == '',
                 }"
                 :clearable="true"
                 placeholder="请选择"
@@ -116,8 +115,8 @@
                   v-for="screenColumnItem in screenColumns"
                   :key="
                     'conditionItem_screenCol' +
-                      conditionIndex +
-                      screenColumnItem.prop
+                    conditionIndex +
+                    screenColumnItem.prop
                   "
                   :label="screenColumnItem.label"
                   :value="screenColumnItem.prop"
@@ -126,7 +125,7 @@
               <el-select
                 v-model="conditionItem.keyId"
                 :class="{
-                  'el-error': !conditionItem.keyId || conditionItem.keyId == ''
+                  'el-error': !conditionItem.keyId || conditionItem.keyId == '',
                 }"
                 :clearable="true"
                 placeholder="请选择"
@@ -138,8 +137,8 @@
                   v-for="screenKeyItem in conditionItem._screenKeys_"
                   :key="
                     'conditionItem_screenKey' +
-                      conditionIndex +
-                      screenKeyItem.id
+                    conditionIndex +
+                    screenKeyItem.id
                   "
                   :label="screenKeyItem.label"
                   :value="screenKeyItem.id"
@@ -152,7 +151,7 @@
                     'conditionItem_hr' + conditionIndex + typeItem + typeIndex
                   "
                   :class="'divider-hr'"
-                >
+                />
                 <el-input
                   v-if="typeIndex == 0 && typeItem === 'text'"
                   :key="
@@ -162,7 +161,7 @@
                   :class="{
                     'el-error':
                       conditionItem.value === undefined ||
-                      conditionItem.value === ''
+                      conditionItem.value === '',
                   }"
                   placeholder="请输入内容"
                   maxlength="50"
@@ -172,15 +171,15 @@
                   v-else-if="typeIndex > 0 && typeItem === 'text'"
                   :key="
                     'conditionItem_val_end' +
-                      conditionIndex +
-                      typeItem +
-                      typeIndex
+                    conditionIndex +
+                    typeItem +
+                    typeIndex
                   "
                   v-model="conditionItem.value_end"
                   :class="{
                     'el-error':
                       conditionItem.value_end === undefined ||
-                      conditionItem.value_end === ''
+                      conditionItem.value_end === '',
                   }"
                   placeholder="请输入内容"
                   maxlength="50"
@@ -195,7 +194,7 @@
                   :class="{
                     'el-error':
                       conditionItem.value === undefined ||
-                      conditionItem.value === ''
+                      conditionItem.value === '',
                   }"
                   :min="0"
                   :max="999"
@@ -205,15 +204,15 @@
                   v-else-if="typeIndex > 0 && typeItem === 'number'"
                   :key="
                     'conditionItem_val_end' +
-                      conditionIndex +
-                      typeItem +
-                      typeIndex
+                    conditionIndex +
+                    typeItem +
+                    typeIndex
                   "
                   v-model="conditionItem.value_end"
                   :class="{
                     'el-error':
                       conditionItem.value_end === undefined ||
-                      conditionItem.value_end === ''
+                      conditionItem.value_end === '',
                   }"
                   :min="0"
                   :max="999"
@@ -222,7 +221,7 @@
                 <el-date-picker
                   v-else-if="
                     typeIndex == 0 &&
-                      (typeItem === 'date' || typeItem === 'datetime')
+                    (typeItem === 'date' || typeItem === 'datetime')
                   "
                   :key="
                     'conditionItem_val' + conditionIndex + typeItem + typeIndex
@@ -231,7 +230,7 @@
                   :class="{
                     'el-error':
                       conditionItem.value === undefined ||
-                      conditionItem.value === ''
+                      conditionItem.value === '',
                   }"
                   :type="typeItem"
                   :value-format="'timestamp'"
@@ -242,19 +241,19 @@
                 <el-date-picker
                   v-else-if="
                     typeIndex > 0 &&
-                      (typeItem === 'date' || typeItem === 'datetime')
+                    (typeItem === 'date' || typeItem === 'datetime')
                   "
                   :key="
                     'conditionItem_val_end' +
-                      conditionIndex +
-                      typeItem +
-                      typeIndex
+                    conditionIndex +
+                    typeItem +
+                    typeIndex
                   "
                   v-model="conditionItem.value_end"
                   :class="{
                     'el-error':
                       conditionItem.value_end === undefined ||
-                      conditionItem.value_end === ''
+                      conditionItem.value_end === '',
                   }"
                   :type="typeItem"
                   :value-format="'timestamp'"
@@ -272,21 +271,22 @@
                     'el-select-val': true,
                     'el-error':
                       conditionItem.value === undefined ||
-                      conditionItem.value === ''
+                      conditionItem.value === '',
                   }"
                   :clearable="true"
                   placeholder="请选择"
                   @change="$forceUpdate()"
                 >
                   <el-option
-                    v-for="(optionItem,
-                            optionIndex) in conditionItem._select_options_"
+                    v-for="(
+                      optionItem, optionIndex
+                    ) in conditionItem._select_options_"
                     :key="
                       'conditionItem_val_option' +
-                        conditionIndex +
-                        typeItem +
-                        typeIndex +
-                        optionIndex
+                      conditionIndex +
+                      typeItem +
+                      typeIndex +
+                      optionIndex
                     "
                     :label="optionItem.label"
                     :value="optionItem.id"
@@ -296,30 +296,31 @@
                   v-else-if="typeIndex > 0 && typeItem === 'select'"
                   :key="
                     'conditionItem_val_end' +
-                      conditionIndex +
-                      typeItem +
-                      typeIndex
+                    conditionIndex +
+                    typeItem +
+                    typeIndex
                   "
                   v-model="conditionItem.value_end"
                   :class="{
                     'el-select-val': true,
                     'el-error':
                       conditionItem.value_end === undefined ||
-                      conditionItem.value_end === ''
+                      conditionItem.value_end === '',
                   }"
                   :clearable="true"
                   placeholder="请选择"
                   @change="$forceUpdate()"
                 >
                   <el-option
-                    v-for="(optionItem,
-                            optionIndex) in conditionItem._select_options_end_"
+                    v-for="(
+                      optionItem, optionIndex
+                    ) in conditionItem._select_options_end_"
                     :key="
                       'conditionItem_val_option_end' +
-                        conditionIndex +
-                        typeItem +
-                        typeIndex +
-                        optionIndex
+                      conditionIndex +
+                      typeItem +
+                      typeIndex +
+                      optionIndex
                     "
                     :label="optionItem.label"
                     :value="optionItem.id"
@@ -334,7 +335,7 @@
               />
             </div>
             <div class="condition-item">
-              <hr>
+              <hr />
               <el-button
                 type="primary"
                 icon="el-icon-circle-plus-outline"
@@ -355,70 +356,69 @@
 </template>
 
 <script>
-import Sortable from 'sortablejs'
+import Sortable from "sortablejs";
 
 export default {
-  name: 'ExTable',
+  name: "ExTable",
   components: {
-    'ex-slot': {
+    "ex-slot": {
       functional: true,
       props: {
         render: Function,
         scope: {
           type: Object,
-          default: null
+          default: null,
         },
         column: {
           type: Object,
-          default: null
-        }
+          default: null,
+        },
       },
       render: (h, data) => {
-        if (data.props.column) data.props.scope.column = data.props.column
-        return data.props.render(h, data.props.scope)
-      }
-    }
+        if (data.props.column) data.props.scope.column = data.props.column;
+        return data.props.render(h, data.props.scope);
+      },
+    },
   },
   directives: {
     // v-drap  可拖拽指令
     drap: {
-      inserted: function(element, binding) {
-        element.onmousedown = function(e) {
-          const el = binding.modifiers.parent ? element.parentNode : element
-          const bodyWidth = document.body.offsetWidth
-          const bodyHeight = document.body.offsetHeight
-          const elWidth = el.offsetWidth
-          const elHeight = el.offsetHeight
+      inserted: function (element, binding) {
+        element.onmousedown = function (e) {
+          const el = binding.modifiers.parent ? element.parentNode : element;
+          const bodyWidth = document.body.offsetWidth;
+          const bodyHeight = document.body.offsetHeight;
+          const elWidth = el.offsetWidth;
+          const elHeight = el.offsetHeight;
           // 开始拖动，记录左上角坐标点
-          const disX = e.clientX - el.offsetLeft
-          const disY = e.clientY - el.offsetTop
-          document.onmousemove = function(e) {
+          const disX = e.clientX - el.offsetLeft;
+          const disY = e.clientY - el.offsetTop;
+          document.onmousemove = function (e) {
             // 拖动中，修改dom的左上角坐标点
-            let l = e.clientX - disX
-            let t = e.clientY - disY
+            let l = e.clientX - disX;
+            let t = e.clientY - disY;
             if (binding.modifiers.limit) {
-              l = l < 0 ? 0 : l
-              t = t < 0 ? 0 : t
-              l = l > bodyWidth - elWidth ? bodyWidth - elWidth : l
-              t = t > bodyHeight - elHeight ? bodyHeight - elHeight : t
+              l = l < 0 ? 0 : l;
+              t = t < 0 ? 0 : t;
+              l = l > bodyWidth - elWidth ? bodyWidth - elWidth : l;
+              t = t > bodyHeight - elHeight ? bodyHeight - elHeight : t;
             }
-            el.style.left = l + 'px'
-            el.style.top = t + 'px'
-          }
-          document.onmouseup = function() {
+            el.style.left = l + "px";
+            el.style.top = t + "px";
+          };
+          document.onmouseup = function () {
             // 结束拖动
-            document.onmousemove = null
-          }
-        }
-      }
-    }
+            document.onmousemove = null;
+          };
+        };
+      },
+    },
   },
   props: {
-   
     // el-table 表格数据 对应data字段
     data: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     /**
      * el-table-column 表格列属性集合
@@ -439,7 +439,7 @@ export default {
      */
     columns: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     /**
      * el-pagination
@@ -455,29 +455,29 @@ export default {
      */
     page: {
       type: [Boolean, Object],
-      default: false
+      default: false,
     },
     /**
      * 筛选条件集合
      */
     conditions: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     /**
      * 是否允许拖拽行
      */
     isRowDrop: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * 是否允许拖拽列
      */
     isColDrop: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -487,70 +487,70 @@ export default {
       isScreenDialog: false,
       // 筛选的key集合
       screenKeys: [
-        { id: '1', key: '1', type: 'text', label: '包含' },
-        { id: '2', key: '2', type: 'text', label: '不包含' },
-        { id: '3', key: '3', type: 'text', label: '等于' },
-        { id: '4', key: '4', type: 'text', label: '不等于' },
-        { id: '5', key: '5', type: '', label: '为空' },
-        { id: '6', key: '6', type: '', label: '不为空' },
-        { id: '7', key: '7', type: 'date', label: '开始于' },
-        { id: '8', key: '8', type: 'date', label: '结束于' },
-        { id: '9', key: '9', type: 'date', label: '早于' },
-        { id: '10', key: '10', type: 'date', label: '晚于' },
-        { id: '11', key: '11', type: 'date', label: '不早于' },
-        { id: '12', key: '12', type: 'date', label: '不晚于' },
-        { id: '13', key: '13', type: 'datetime_datetime', label: '时间段' },
-        { id: '14', key: '14', type: 'number', label: '前N天' },
-        { id: '15', key: '15', type: 'number', label: '后N天' },
-        { id: '16', key: '16', type: 'number', label: '前N月' },
-        { id: '17', key: '17', type: 'number', label: '后N月' },
-        { id: '18', key: '18', type: 'number', label: '大于' },
-        { id: '19', key: '19', type: 'number', label: '大于等于' },
-        { id: '20', key: '20', type: 'number', label: '小于' },
-        { id: '21', key: '21', type: 'number', label: '小于等于' },
-        { id: '22', key: '22', type: 'number_number', label: '介于' },
-        { id: '23', key: '3', type: 'select', label: '单项选择' },
-        { id: '24', key: '22', type: 'select_select', label: '区间选择' }
-      ]
-    }
+        { id: "1", key: "1", type: "text", label: "包含" },
+        { id: "2", key: "2", type: "text", label: "不包含" },
+        { id: "3", key: "3", type: "text", label: "等于" },
+        { id: "4", key: "4", type: "text", label: "不等于" },
+        { id: "5", key: "5", type: "", label: "为空" },
+        { id: "6", key: "6", type: "", label: "不为空" },
+        { id: "7", key: "7", type: "date", label: "开始于" },
+        { id: "8", key: "8", type: "date", label: "结束于" },
+        { id: "9", key: "9", type: "date", label: "早于" },
+        { id: "10", key: "10", type: "date", label: "晚于" },
+        { id: "11", key: "11", type: "date", label: "不早于" },
+        { id: "12", key: "12", type: "date", label: "不晚于" },
+        { id: "13", key: "13", type: "datetime_datetime", label: "时间段" },
+        { id: "14", key: "14", type: "number", label: "前N天" },
+        { id: "15", key: "15", type: "number", label: "后N天" },
+        { id: "16", key: "16", type: "number", label: "前N月" },
+        { id: "17", key: "17", type: "number", label: "后N月" },
+        { id: "18", key: "18", type: "number", label: "大于" },
+        { id: "19", key: "19", type: "number", label: "大于等于" },
+        { id: "20", key: "20", type: "number", label: "小于" },
+        { id: "21", key: "21", type: "number", label: "小于等于" },
+        { id: "22", key: "22", type: "number_number", label: "介于" },
+        { id: "23", key: "3", type: "select", label: "单项选择" },
+        { id: "24", key: "22", type: "select_select", label: "区间选择" },
+      ],
+    };
   },
   computed: {
     // 允许筛选的列
     screenColumns() {
-      return this.columns.filter(item => item._screen_ === true)
+      return this.columns.filter((item) => item._screen_ === true);
     },
     // 允许设置的列
     setColumns() {
-      return this.columns.filter(item => !item._noset_)
+      return this.columns.filter((item) => !item._noset_);
     },
     // 筛选条件是否包含当前列
     isHasScreenColumn() {
-      return function(col) {
-        return this.conditions.some(item => item.prop === col.prop)
-      }
-    }
+      return function (col) {
+        return this.conditions.some((item) => item.prop === col.prop);
+      };
+    },
   },
   watch: {},
   mounted() {
     // 拖拽绑定
-    this.rowDrop()
-    this.columnDrop()
+    this.rowDrop();
+    this.columnDrop();
   },
   methods: {
     // 添加一行条件
     addConditionItemByCol(col, scope) {
-      this.isScreenDialog = true
+      this.isScreenDialog = true;
       // 当前项
       const index = col
-        ? this.conditions.findIndex(item => item.prop === col.prop)
-        : undefined
+        ? this.conditions.findIndex((item) => item.prop === col.prop)
+        : undefined;
       if (col && index !== undefined && index > -1) {
         const dom = document.querySelector(
           `.dialog-screen .body #conditionItem${index}`
-        )
+        );
         this.$nextTick(() => {
-          this.screenBodyScrollTop(dom.offsetTop - dom.scrollHeight)
-        })
+          this.screenBodyScrollTop(dom.offsetTop - dom.scrollHeight);
+        });
       } else {
         this.conditions.push(
           Object.assign(
@@ -558,85 +558,85 @@ export default {
             col || {},
             col
               ? {
-                _select_options_end_:
+                  _select_options_end_:
                     col._select_options_ && !col._select_options_end_
                       ? col._select_options_
                       : col._select_options_end_,
-                _screenKeys_: col._keys_
-                  ? col._keys_.map(item =>
-                    this.screenKeys.find(fitem => item == fitem.id)
-                  )
-                  : [].concat(this.screenKeys)
-              }
+                  _screenKeys_: col._keys_
+                    ? col._keys_.map((item) =>
+                        this.screenKeys.find((fitem) => item == fitem.id)
+                      )
+                    : [].concat(this.screenKeys),
+                }
               : {}
           )
-        )
+        );
         this.$nextTick(() => {
           this.screenBodyScrollTop(
-            document.querySelector('.dialog-screen .body').scrollHeight
-          )
-        })
+            document.querySelector(".dialog-screen .body").scrollHeight
+          );
+        });
       }
     },
     // 删除一行条件
     delConditionItemByIndex(index, item) {
-      this.conditions.splice(index, 1)
+      this.conditions.splice(index, 1);
     },
     // 筛选重置
     screenReset() {
-      this.conditions.splice(0)
-      this.$emit('screen-reset', this.conditions)
-      this.isScreenDialog = false
+      this.conditions.splice(0);
+      this.$emit("screen-reset", this.conditions);
+      this.isScreenDialog = false;
     },
     // 筛选提交
     screenSubmit() {
       if (this.validotarScreen()) {
-        this.$emit('screen-submit', this.conditions)
-        this.isScreenDialog = false
+        this.$emit("screen-submit", this.conditions);
+        this.isScreenDialog = false;
       } else {
-        this.$message.error('筛选项及筛选值不可为空')
+        this.$message.error("筛选项及筛选值不可为空");
       }
     },
     // 滚动筛选框body
     screenBodyScrollTop(t) {
-      document.querySelector('.dialog-screen .body').scrollTop = t
+      document.querySelector(".dialog-screen .body").scrollTop = t;
     },
     // 校验筛选框筛选条件
     validotarScreen() {
       return this.conditions.every(
-        item =>
+        (item) =>
           item.prop &&
-          item.prop != '' &&
+          item.prop != "" &&
           item.keyId &&
-          item.keyId != '' &&
+          item.keyId != "" &&
           item.key &&
-          item.key != '' &&
+          item.key != "" &&
           (item.type.length === 0 ||
             (item.type.length === 1 &&
               item.value !== undefined &&
-              item.value !== '') ||
+              item.value !== "") ||
             (item.type.length > 1 &&
               item.value !== undefined &&
-              item.value !== '' &&
+              item.value !== "" &&
               item.value_end !== undefined &&
-              item.value_end !== ''))
-      )
+              item.value_end !== ""))
+      );
     },
     // 筛选条件prop改变
     screenPropsChange(val, scindex, scitem) {
-      if (val === undefined || val === '') throw new Error('数据异常')
+      if (val === undefined || val === "") throw new Error("数据异常");
       // 选中列的原始数据
-      const columnsItem = this.columns.find(item => item.prop === val)
+      const columnsItem = this.columns.find((item) => item.prop === val);
       // 重置当前筛选条件数据
       this.$set(
         this.conditions,
         scindex,
         Object.assign(
           {
-            keyId: '',
-            key: '',
-            value: '',
-            value_end: ''
+            keyId: "",
+            key: "",
+            value: "",
+            value_end: "",
           },
           columnsItem,
           {
@@ -645,97 +645,98 @@ export default {
                 ? columnsItem._select_options_
                 : columnsItem._select_options_end_,
             _screenKeys_: columnsItem._keys_
-              ? columnsItem._keys_.map(item =>
-                this.screenKeys.find(fitem => item == fitem.id)
-              )
-              : [].concat(this.screenKeys)
+              ? columnsItem._keys_.map((item) =>
+                  this.screenKeys.find((fitem) => item == fitem.id)
+                )
+              : [].concat(this.screenKeys),
           }
         )
-      )
+      );
     },
     // 筛选条件key改变
     screenKeysChange(val, scindex, scitem) {
-      if (val === undefined || val === '') throw new Error('数据异常')
+      if (val === undefined || val === "") throw new Error("数据异常");
       // 选中key支持的类型
-      const typeText = this.screenKeys.find(item => item.id === val).type || ''
-      const key = this.screenKeys.find(item => item.id === val).key || ''
+      const typeText =
+        this.screenKeys.find((item) => item.id === val).type || "";
+      const key = this.screenKeys.find((item) => item.id === val).key || "";
       // 重置当前筛选条件数据
       this.$set(
         this.conditions,
         scindex,
         Object.assign({}, scitem, {
           key: key,
-          value: '',
-          value_end: '',
+          value: "",
+          value_end: "",
           typeText: typeText,
           type: typeText
-            .split('_')
-            .filter(item => item !== undefined && item !== '')
+            .split("_")
+            .filter((item) => item !== undefined && item !== ""),
         })
-      )
+      );
     },
     // 行拖拽
     rowDrop() {
       const tbody = document.querySelector(
-        '.el-table__body-wrapper > table > tbody'
-      )
+        ".el-table__body-wrapper > table > tbody"
+      );
       Sortable.create(tbody, {
         disabled: !this.isRowDrop,
-        ghostClass: 'sortable-ghost',
+        ghostClass: "sortable-ghost",
         animation: 180,
         delay: 0,
-        onEndevt: evt => {
-          const currItem = this.data.splice(evt.oldIndex, 1)[0]
-          this.data.splice(evt.newIndex, 0, currItem)
-        }
-      })
+        onEndevt: (evt) => {
+          const currItem = this.data.splice(evt.oldIndex, 1)[0];
+          this.data.splice(evt.newIndex, 0, currItem);
+        },
+      });
     },
     // 列拖拽
     columnDrop() {
-      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
+      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
       Sortable.create(wrapperTr, {
         disabled: !this.isColDrop,
-        ghostClass: 'sortable-ghost',
+        ghostClass: "sortable-ghost",
         animation: 180,
         delay: 0,
-        onEnd: evt => {
-          const currItem = this.columns.splice(evt.oldIndex, 1)[0]
-          this.columns.splice(evt.newIndex, 0, currItem)
-        }
-      })
+        onEnd: (evt) => {
+          const currItem = this.columns.splice(evt.oldIndex, 1)[0];
+          this.columns.splice(evt.newIndex, 0, currItem);
+        },
+      });
     },
     // 获取对象的属性
     getObjPrototype(o, a) {
-      const fn = Function
-      return new fn('obj', `return obj.${a}`)(o)
+      const fn = Function;
+      return new fn("obj", `return obj.${a}`)(o);
     },
     /** 表格方法 传递给el-table，后续有需要可继续增加 **/
     // 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
     doLayout(...arg) {
-      this.$refs.elTable.doLayout(...arg)
+      this.$refs.elTable.doLayout(...arg);
     },
     // 用于多选表格，清空用户的选择
     clearSelection(...arg) {
-      this.$refs.elTable.clearSelection(...arg)
+      this.$refs.elTable.clearSelection(...arg);
     },
     // 用于多选表格，切换某一行的选中状态
     toggleRowSelection(...arg) {
-      this.$refs.elTable.toggleRowSelection(...arg)
+      this.$refs.elTable.toggleRowSelection(...arg);
     },
     // 用于多选表格，切换所有行的选中状态
     toggleAllSelection(...arg) {
-      this.$refs.elTable.toggleAllSelection(...arg)
+      this.$refs.elTable.toggleAllSelection(...arg);
     },
     // 用于单选表格，设定某一行为选中行
     setCurrentRow(...arg) {
-      this.$refs.elTable.setCurrentRow(...arg)
+      this.$refs.elTable.setCurrentRow(...arg);
     },
     // 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
     toggleRowExpansion(...arg) {
-      this.$refs.elTable.toggleRowExpansion(...arg)
-    }
-  }
-}
+      this.$refs.elTable.toggleRowExpansion(...arg);
+    },
+  },
+};
 </script>
 
 <style lang="css">

src/views/purchaseIn/storeGoods/index.vue

@@ -10,6 +10,7 @@
         :columns="columns"
         :page="pageInfo"
         :size="size"
+        :min-width="100"
         @page-curr-change="handlePageChange"
         @page-size-change="handleSizeChange"
         @screen-reset="
@@ -27,35 +28,23 @@
           <div style="width: 100%">
             <el-row style="padding: 0 0 0 80px">
               <el-col :span="24">
-                <el-col :span="8" style="width: 470px">
-                  <period-date-picker :size="searchSize"></period-date-picker>
+                <el-col :span="8" style="width: 200px">
+                  <search-supplier
+                    :placeholder="'请输入供应商'"
+                    :size="searchSize"
+                  ></search-supplier>
                 </el-col>
 
-                <!-- <el-col :span="4">
-                  <company-search :size="searchSize"></company-search>
-                </el-col> -->
-
-                <el-col :span="4" style="width: 300px">
-                  <!-- <el-select
-                    v-model="product"
+                <el-col :span="4" style="width: 200px; padding-left: 10px">
+                  <search-stock
+                    :placeholder="'请输入仓库'"
                     :size="searchSize"
-                    multiple
-                    filterable
-                    remote
-                    reserve-keyword
-                    placeholder="请输入商品名称"
-                    :remote-method="remoteMethod"
-                    :loading="loading"
-                  >
-                    <el-option
-                      v-for="item in product_options"
-                      :key="item.id"
-                      :label="item.good_name"
-                      :value="item.type_code"
-                    >
-                    </el-option>
-                  </el-select> -->
+                  ></search-stock>
+                </el-col>
+
+                <el-col :span="4" style="width: 200px; padding-left: 10px">
                   <el-input
+                    :size="searchSize"
                     placeholder="请输入商品名称"
                     v-model="product_name"
                     clearable
@@ -63,53 +52,15 @@
                   </el-input>
                 </el-col>
 
-                <el-col :span="4">
+                <el-col :span="4" style="width: 200px; padding-left: 10px">
                   <el-input
+                    :size="searchSize"
                     placeholder="请输入商品编码"
                     v-model="product_code"
                     clearable
                   >
                   </el-input>
                 </el-col>
-
-                <!-- <el-col :span="4" style="width: 120px">
-                  <el-select
-                    :size="searchSize"
-                    v-model="parmValue.status"
-                    filterable
-                    clearable
-                    placeholder="账号状态"
-                    style="width: 100%"
-                    @change="
-                      pageInfo.curr = 1;
-                      parmValue.page = 1;
-                      searchList();
-                    "
-                  >
-                    <el-option
-                      v-for="item in statusList"
-                      :key="'status' + item.code"
-                      :label="item.name"
-                      :value="item.code"
-                    />
-                  </el-select>
-                </el-col> -->
-                <!-- <el-col :span="4" style="width: 150px; padding: 0 0 0 10px">
-                  <el-input
-                    :size="searchSize"
-                    v-model="parmValue.name"
-                    :maxlength="40"
-                    placeholder="业务员姓名"
-                  />
-                </el-col> -->
-                <!-- <el-col :span="4" style="width: 160px; padding: 0 0 0 10px">
-                  <el-input
-                    :size="searchSize"
-                    v-model="parmValue.username"
-                    :maxlength="40"
-                    placeholder="手机号"
-                  />
-                </el-col> -->
                 <el-col :span="4" style="width: 54px">
                   <el-button
                     :size="searchSize"
@@ -153,41 +104,6 @@
           ></el-tag>
         </template>
         <template #operation="{ scope }">
-          <!-- <el-tooltip
-            v-if="powers.some((item) => item == '002')"
-            effect="dark"
-            content="重置密码"
-            placement="top"
-          >
-            <i
-              class="el-icon-refresh-left tb-icon"
-              @click="openPasswordModal(scope.row.id, false)"
-            ></i>
-          </el-tooltip> -->
-
-          <!-- <el-tooltip
-            v-if="powers.some((item) => item == '007')"
-            effect="dark"
-            content="详情"
-            placement="top"
-          >
-            <i
-              class="el-icon-view tb-icon"
-              @click="openModal(scope.row.id, true, scope.row)"
-            ></i>
-          </el-tooltip> -->
-          <!-- <el-tooltip
-            v-if="powers.some((item) => item == '005')"
-            effect="dark"
-            content="修改"
-            placement="top"
-          >
-            <i
-              class="el-icon-edit tb-icon"
-              @click="openModal(scope.row.id, false, scope.row)"
-            ></i>
-            <p @click="openModal(scope.row.id, false, scope.row)">修改</p>
-          </el-tooltip> -->
           <el-tooltip
             v-if="
               powers.some((item) => item == '004') && scope.row.bstatus === '1'
@@ -264,8 +180,8 @@ export default {
     return {
       product_code: "", //商品编码
       product_name: "", //商品名称
-      product_options: [],
-      product: [],
+      // product_options: [],
+      // code_options: [],
       // 饿了么
       product: "", //商品名称绑定的数据
       sitem: null,
@@ -282,6 +198,9 @@ export default {
       parmValue: {
         page: 1, // 页码
         size: 100, // 每页显示条数
+        good_code: "", //商品编码
+        good_name: "", //商品名称
+        gys_code: "", //供应商编码
       },
       tableData: [],
       passwordModel: false,
@@ -301,11 +220,11 @@ export default {
         curr: 1,
         total: 0,
       },
-      // 表格 - 列参数
       columns: [
         {
-          prop: "good_code",
-          label: "商品编号",
+          prop: "id",
+          label: "商品ID",
+          width: "60px",
         },
         {
           prop: "brand",
@@ -314,61 +233,73 @@ export default {
         {
           prop: "good_name",
           label: "商品名称",
+          // min-width: "200",
         },
-        // {
-        //   prop: "good_desc",
-        //   label: "商品描述",
-        // },
+
         {
-          prop: "type_code",
-          label: "商品属性", //商品属性code
+          prop: "classArr",
+          label: "商品类别",
         },
         {
-          prop: "original_price",
-          label: "采购价",
+          prop: "color",
+          label: "商品颜色",
         },
         {
-          prop: "da", //接口未返回
-          label: "单位",
+          prop: "material",
+          label: "商品材质",
         },
-        // {
-        //   prop: "status",
-        //   label: "商品名状态",
-        // },
         {
-          prop: "type_code",
-          label: "商品属性",
+          prop: "specs",
+          label: "商品规格",
         },
         {
-          prop: "usable_stock",
-          label: "当前库存",
+          prop: "unit",
+          label: "单位",
         },
         {
-          prop: "qq", //接口未返回
-          label: "供应商编码",
+          prop: "good_type",
+          label: "商品类型",
         },
         {
-          prop: "aa", //接口未返回
-          label: "公司编码",
+          prop: "cg_saler",
+          label: "采购员",
         },
+        {
+          prop: "usable_stock",
+          label: "商品库存",
+        },
+
         {
           prop: "bstatus",
           label: "当前状态",
           _slot_: "status",
           width: "80px",
         },
+        {
+          prop: "supplier_name",
+          label: "供货商",
+        },
+
+        {
+          prop: "type_code",
+          label: "商品属性编码",
+        },
+        {
+          prop: "good_code",
+          label: "商品编码",
+        },
+        {
+          prop: "gys_code",
+          label: "供应商编码",
+        },
         {
           prop: "",
           label: "操作",
+          width: "80px",
           fixed: "right",
           _noset_: true,
           _slot_: "operation",
         },
-        // {
-        //   prop: "addtime",
-        //   label: "创建时间",
-        //   sortable: true,
-        // },
       ],
     };
   },
@@ -379,6 +310,9 @@ export default {
   methods: {
     restSearch() {
       this.parmValue = {
+        good_code: "", //商品编码
+        good_name: "", //商品名称
+        gys_code: "", //供应商编码
         page: 1, // 页码
         size: 100, // 每页显示条数
       };
@@ -422,12 +356,23 @@ export default {
     },
     // 获取商品列表功能函数
     async searchList() {
-      console.log();
       this.loading = true;
-      // console.log(this.tableData);
+      // console.log(this.product_name);
+      // console.log(this.product_code);
+      console.log(this.parmValue);
+
       const res = await asyncRequest.list(this.parmValue);
+      console.log(this.product_name);
+      this.parmValue.good_name = this.product_name;
+      this.parmValue.good_code = this.product_code;
       if (res && res.code === 0 && res.data) {
-        // console.log(res.data.list);
+        res.data.list.forEach((element) => {
+          element.classArr = `${element.sort_f}/${element.sort_s}${element.sort_t}`;
+        });
+
+        res.data.list.forEach((ele) => {
+          // ele.good_name.
+        });
         this.tableData = res.data.list;
         this.pageInfo.total = Number(res.data.count);
       } else if (res && res.code >= 100 && res.code <= 104) {
@@ -474,20 +419,24 @@ export default {
           console.log("取消");
         });
     },
-    // 饿了么
-    async remoteMethod(query) {
-      if (query !== "") {
-        let parmValue = {
-          page: 1,
-          size: 100,
-        };
-        this.product_options = this.tableData.filter((item) => {
-          return item.good_name.toLowerCase().indexOf(query.toLowerCase()) > -1;
-        });
-      } else {
-        this.product_options = [];
-      }
-    },
+    // // 饿了么
+    // async remoteMethod(query) {
+    //   if (query !== "") {
+    //     // let parmValue = {
+    //     //   page: 1,
+    //     //   size: 100,
+    //     // };
+    //     this.product_options = this.tableData.filter((item) => {
+    //       return item.good_name.toLowerCase().indexOf(query.toLowerCase()) > -1;
+    //     });
+    //   } else {
+    //     this.product_options = [];
+    //   }
+    // },
+    // selectProduct(val) {
+    //   // console.log(val);
+    //   console.log(this.product_name);
+    // },
   },
 };
 </script>