From 8155a41219ecd7841f90ab5b331acb6ceebadc97 Mon Sep 17 00:00:00 2001
From: xhj <xhjzrq@163.com>
Date: Thu, 14 Sep 2023 14:55:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=88=B9=E5=8F=AA=E7=BB=B4=E6=8A=A4=EF=BC=8C?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E8=A1=A8=E7=BB=B4=E6=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sjzx/jcsj.js                          |   25 +
 .../renderer/combination/Combination.vue      | 1154 +++++++++--------
 .../renderer/combination/FilterExcel.vue      |  392 +++---
 .../vxe-table/renderer/combination/index.js   |    4 +-
 src/styles/index.scss                         |    3 +-
 src/views/sjzx/czbhwh.vue                     |  426 ++++++
 src/views/sjzx/czplwh.vue                     |  650 ++++++++++
 7 files changed, 1890 insertions(+), 764 deletions(-)
 create mode 100644 src/api/sjzx/jcsj.js
 create mode 100644 src/views/sjzx/czbhwh.vue
 create mode 100644 src/views/sjzx/czplwh.vue

diff --git a/src/api/sjzx/jcsj.js b/src/api/sjzx/jcsj.js
new file mode 100644
index 0000000..601cef2
--- /dev/null
+++ b/src/api/sjzx/jcsj.js
@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getList(data) {return request({url: '/dmCbxxp/getList', method: 'post', data})}
+export function del(data) {return request({url: '/dmCbxxp/del', method: 'post', data})}
+export function edit(data) {return request({url: '/dmCbxxp/edit', method: 'post', data})}
+export function add(data) {return request({url: '/dmCbxxp/add', method: 'post', data})}
+
+
+export function getCzplBase(data) {return request({url: '/dmCzplpNew/getCzplBase', method: 'post', data})}
+export function wgetCzplBase(data) {return request({url: '/dmCzplpNew/getCzplBase', method: 'post', data})}
+export function czPlupdate(data) {return request({url: '/dmCzplpNew/czPlupdate', method: 'post', data})}
+export function getCzplList(data) {return request({url: '/dmCzplpNew/getCzplList', method: 'post', data})}
+export function uploadPl(data) {
+  const param = new FormData()
+  param.append('file', data.file)
+  param.append('czbh', data.czbh)
+  param.append('isupload', data.isupload)
+  return request({
+    url: '/dmCzplpNew/uploadPl',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    data: param
+  })
+}
+
diff --git a/src/plugins/vxe-table/renderer/combination/Combination.vue b/src/plugins/vxe-table/renderer/combination/Combination.vue
index 148fe77..b9c3b22 100644
--- a/src/plugins/vxe-table/renderer/combination/Combination.vue
+++ b/src/plugins/vxe-table/renderer/combination/Combination.vue
@@ -84,621 +84,647 @@
 </template>
 
 <script>
-  import XEUtils from 'xe-utils'
-  import VXETable from 'vxe-table'
+import XEUtils from 'xe-utils'
+import VXETable from 'vxe-table'
 
-  /**
-   * 通配符有3个，分别为?（问号）、*（星号）、~（波形符）
-   * ?（问号）可代表任意单个字符；
-   * *（星号）可代表任意数量的字符；
-   * ~（波形符）后面可跟着 ?、* 、~ 分别用来查找 ?、*、 ~
-   * 例如：'~?' 可查找到 '?'
-   * 例如：'~*' 可查找到 '*'
-   * 例如：'~~' 可查找到 '~'
-   *
-   * 参数：
-   * filters=[{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }]
-   *
-   * 说明：
-   * checks：勾选的单元格值列表
-   * sVal: 搜索的值
-   * sMenu: 选中的菜单
-   * fType1: 第一个条件类型
-   * fVal1: 第一个条件的值
-   * fMode: 组合方式（与、或）
-   * fType2: 第二个条件类型
-   * fVal2: 第二个条件的值
-   *
-   * 参数：
-   * filter-render={ name: 'FilterCombination', cellType: 'string', props: {} }
-   *
-   * 说明：
-   * cellType: 单元格的类型（string字符串、number数值）
-   * props：对应 vxe-input 配置项
-   */
-  export default {
-    name: 'VxeTmplFilterCombination',
-    props: {
-      menus: { type: Array, default: () => [] },
-      renderParams: Object,
-      renderOpts: Object
-    },
-    data () {
-      const { getI18n } = this
-      // 运算规则列表
-      const allCaseList = [
-        { value: 'equal', label: getI18n('vxe.renderer.cases.equal') },
-        { value: 'unequal', label: getI18n('vxe.renderer.cases.unequal') },
-        { value: 'gt', label: getI18n('vxe.renderer.cases.gt') },
-        { value: 'ge', label: getI18n('vxe.renderer.cases.ge') },
-        { value: 'lt', label: getI18n('vxe.renderer.cases.lt') },
-        { value: 'le', label: getI18n('vxe.renderer.cases.le') },
-        { value: 'begin', label: getI18n('vxe.renderer.cases.begin') },
-        { value: 'notbegin', label: getI18n('vxe.renderer.cases.notbegin') },
-        { value: 'endin', label: getI18n('vxe.renderer.cases.endin') },
-        { value: 'notendin', label: getI18n('vxe.renderer.cases.notendin') },
-        { value: 'include', label: getI18n('vxe.renderer.cases.include') },
-        { value: 'exclude', label: getI18n('vxe.renderer.cases.exclude') }
-      ]
-      const allCaseMaps = {}
-      allCaseList.forEach(item => {
-        allCaseMaps[item.value] = item
-      })
-      return {
-        //筛选数据
-        oldDataList:null,
-        hoverMenu: null,
-        childMenuPos: 'right',
-        size: 'mini',
-        column: null,
-        option: null,
-        isAll: false,
-        isIndeterminate: false,
-        hasFilter: false,
-        colValList: [],
-        valList: [],
-        textCaseGroups: [
-          [allCaseMaps.equal, allCaseMaps.unequal],
-          [allCaseMaps.begin, allCaseMaps.endin],
-          [allCaseMaps.include, allCaseMaps.exclude],
-          [
-            { value: 'custom', label: getI18n('vxe.renderer.cases.custom') }
-          ]
-        ],
-        numCaseGroups: [
-          [allCaseMaps.equal, allCaseMaps.unequal],
-          [
-            allCaseMaps.gt,
-            allCaseMaps.ge,
-            allCaseMaps.lt,
-            allCaseMaps.le,
-            { value: 'between', label: getI18n('vxe.renderer.cases.between') }
-          ],
-          [
-            { value: 'custom', label: getI18n('vxe.renderer.cases.custom') }
-          ]
+/**
+ * 通配符有3个，分别为?（问号）、*（星号）、~（波形符）
+ * ?（问号）可代表任意单个字符；
+ * *（星号）可代表任意数量的字符；
+ * ~（波形符）后面可跟着 ?、* 、~ 分别用来查找 ?、*、 ~
+ * 例如：'~?' 可查找到 '?'
+ * 例如：'~*' 可查找到 '*'
+ * 例如：'~~' 可查找到 '~'
+ *
+ * 参数：
+ * filters=[{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }]
+ *
+ * 说明：
+ * checks：勾选的单元格值列表
+ * sVal: 搜索的值
+ * sMenu: 选中的菜单
+ * fType1: 第一个条件类型
+ * fVal1: 第一个条件的值
+ * fMode: 组合方式（与、或）
+ * fType2: 第二个条件类型
+ * fVal2: 第二个条件的值
+ *
+ * 参数：
+ * filter-render={ name: 'FilterCombination', cellType: 'string', props: {} }
+ *
+ * 说明：
+ * cellType: 单元格的类型（string字符串、number数值）
+ * props：对应 vxe-input 配置项
+ */
+export default {
+  name: 'VxeTmplFilterCombination',
+  props: {
+    menus: { type: Array, default: () => [] },
+    renderParams: Object,
+    renderOpts: Object
+  },
+  data () {
+    const { getI18n } = this
+    // 运算规则列表
+    const allCaseList = [
+      { value: 'equal', label: getI18n('vxe.renderer.cases.equal') },
+      { value: 'unequal', label: getI18n('vxe.renderer.cases.unequal') },
+      { value: 'gt', label: getI18n('vxe.renderer.cases.gt') },
+      { value: 'ge', label: getI18n('vxe.renderer.cases.ge') },
+      { value: 'lt', label: getI18n('vxe.renderer.cases.lt') },
+      { value: 'le', label: getI18n('vxe.renderer.cases.le') },
+      { value: 'begin', label: getI18n('vxe.renderer.cases.begin') },
+      { value: 'notbegin', label: getI18n('vxe.renderer.cases.notbegin') },
+      { value: 'endin', label: getI18n('vxe.renderer.cases.endin') },
+      { value: 'notendin', label: getI18n('vxe.renderer.cases.notendin') },
+      { value: 'include', label: getI18n('vxe.renderer.cases.include') },
+      { value: 'exclude', label: getI18n('vxe.renderer.cases.exclude') }
+    ]
+    const allCaseMaps = {}
+    allCaseList.forEach(item => {
+      allCaseMaps[item.value] = item
+    })
+    return {
+      //筛选数据
+      oldDataList:null,
+      hoverMenu: null,
+      childMenuPos: 'right',
+      size: 'mini',
+      column: null,
+      option: null,
+      isAll: false,
+      isIndeterminate: false,
+      hasFilter: false,
+      colValList: [],
+      valList: [],
+      textCaseGroups: [
+        [allCaseMaps.equal, allCaseMaps.unequal],
+        [allCaseMaps.begin, allCaseMaps.endin],
+        [allCaseMaps.include, allCaseMaps.exclude],
+        [
+          { value: 'custom', label: getI18n('vxe.renderer.cases.custom') }
+        ]
+      ],
+      numCaseGroups: [
+        [allCaseMaps.equal, allCaseMaps.unequal],
+        [
+          allCaseMaps.gt,
+          allCaseMaps.ge,
+          allCaseMaps.lt,
+          allCaseMaps.le,
+          { value: 'between', label: getI18n('vxe.renderer.cases.between') }
         ],
-        allCaseList,
-        combiner: {
-          type1: '',
-          val1: '',
-          mode: '',
-          type2: '',
-          val2: ''
-        }
+        [
+          { value: 'custom', label: getI18n('vxe.renderer.cases.custom') }
+        ]
+      ],
+      allCaseList,
+      combiner: {
+        type1: '',
+        val1: '',
+        mode: '',
+        type2: '',
+        val2: ''
       }
+    }
+  },
+  computed: {
+    hasSortable () {
+      const { renderParams } = this
+      const { column } = renderParams
+      return column.sortable
     },
-    computed: {
-      hasSortable () {
-        const { renderParams } = this
-        const { column } = renderParams
-        return column.sortable
-      },
-      isNumType () {
-        return this.renderOpts.cellType === 'number'
-      },
-      inputProps () {
-        const { isNumType, getI18n } = this
-        return Object.assign({
-          type: isNumType ? 'number' : 'text',
-          clearable: true,
-          placeholder: getI18n('vxe.renderer.search'),
-          suffixIcon: isNumType ? null : 'vxe-icon--search'
-        }, this.renderOpts.props)
-      },
-      isVaildChecked () {
-        const { valList, colValList } = this
-        return valList.length && colValList.some(item => item.checked)
-      },
-      caseGroups () {
-        return this.isNumType ? this.numCaseGroups : this.textCaseGroups
-      }
+    isNumType () {
+      return this.renderOpts.cellType === 'number'
     },
-    watch: {
-      renderParams () {
-        // 当点击不同列时刷新数据
-
-        this.load()
-      },
-      colValList () {
-        this.handleSearch()
-      }
+    inputProps () {
+      const { isNumType, getI18n } = this
+      return Object.assign({
+        type: isNumType ? 'number' : 'text',
+        clearable: true,
+        placeholder: getI18n('vxe.renderer.search'),
+        suffixIcon: isNumType ? null : 'vxe-icon--search'
+      }, this.renderOpts.props)
+    },
+    isVaildChecked () {
+      const { valList, colValList } = this
+      return valList.length && colValList.some(item => item.checked)
     },
-    created () {
+    caseGroups () {
+      return this.isNumType ? this.numCaseGroups : this.textCaseGroups
+    }
+  },
+  watch: {
+    renderParams () {
+      // 当点击不同列时刷新数据
+
       this.load()
-      this.handleSearch()
     },
-    methods: {
-      load () {
-        const { renderParams, getI18n } = this
-        const { $table, column } = renderParams
-        //修改筛选功能,显示可筛选数据内容
-        // const visibleData = $table.data
-        // const { visibleData } = $table.getTableData()
-        // const visibleData = $table.data
-        const { visibleData } = $table.getTableData()
-        const option = column.filters[0]
-        const { checks } = option.data
-        const colValMaps = {}
-        const colValList = []
-        // 根据显示的数据，生成可搜索的列表
-        visibleData.forEach((item, index) => {
-          const value = XEUtils.toString(XEUtils.get(item, column.property))
-          if (!colValMaps[value]) {
-            const vItem = {
-              key: index,
-              checked: checks.includes(value),
-              value,
-              label: $table.getCellLabel(item, column) || getI18n('vxe.renderer.combination.empty')
-            }
-            if (value === '') {
-              colValList.unshift(vItem)
-            } else {
-              colValList.push(vItem)
-            }
-            colValMaps[value] = item
+    colValList () {
+      this.handleSearch()
+    }
+  },
+  created () {
+    this.load()
+    this.handleSearch()
+  },
+  methods: {
+    load () {
+      const { renderParams, getI18n } = this
+      const { $table, column } = renderParams
+      //修改筛选功能,显示可筛选数据内容
+      // const visibleData = $table.data
+      // const { visibleData } = $table.getTableData()
+      // const visibleData = $table.data
+
+      const { visibleData } = $table.getTableData()
+      const option = column.filters[0]
+      const { checks } = option.data
+      const colValMaps = {}
+      const colValList = []
+      // 根据显示的数据，生成可搜索的列表
+      visibleData.forEach((item, index) => {
+        const value = XEUtils.toString(XEUtils.get(item, column.property))
+        if (!colValMaps[value]) {
+          const vItem = {
+            key: index,
+            checked: checks.includes(value),
+            value,
+            label: $table.getCellLabel(item, column) || getI18n('vxe.renderer.combination.empty')
           }
-        })
-        // 将相关的信息记录
-        this.column = column
-        this.option = option
-        this.colValList = colValList
-        this.valList = colValList
-        this.hasFilter = $table.isFilter(column.property)
-      },
-      getI18n (key, args) {
-        const { $vxe } = this
-        return $vxe.t(key, args)
-      },
-      handleSearch () {
-        const { option, colValList } = this
-        this.valList = option.data.sVal ? colValList.filter(item => item.value.toLowerCase().indexOf(XEUtils.toString(option.data.sVal).toLowerCase()) > -1) : colValList
-        this.updateCheckStatus()
-      },
-      // 创建一个去抖函数，当用户搜索时，至少 500 毫秒才搜索，避免实时搜索卡顿
-      searchEvent: XEUtils.debounce(function () {
-        this.handleSearch()
-      }, 500, { leading: false, trailing: true }),
-      changeAllEvent () {
-        const { isAll } = this
-        this.valList.forEach(item => {
-          item.checked = isAll
-        })
-        this.isIndeterminate = false
-      },
-      updateCheckStatus () {
-        const { valList } = this
-        const isAll = valList.every(item => item.checked)
-        this.isAll = isAll
-        this.isIndeterminate = !isAll && valList.some(item => item.checked)
-      },
-      changeItemEvent () {
-        this.updateCheckStatus()
-      },
-      confirmFilterEvent (evnt) {
-        const { renderParams, option, valList } = this
-        const { data } = option
-        const { $panel } = renderParams
-        data.f1 = ''
-        data.f2 = ''
-        data.fType1 = ''
-        data.fType2 = ''
-        data.sMenu = ''
-        data.checks = valList.filter(item => item.checked).map(item => item.value)
-        // 调佣筛选面板的 changeOption 方法，用于改变当前选项
-        $panel.changeOption(evnt, true, option)
-        // 最后触发确认筛选按钮
-        $panel.confirmFilter(evnt)
-      },
-      resetFilterEvent (evnt) {
-        const { renderParams } = this
-        const { $panel } = renderParams
-        // 触发筛选面板的重置事件，会自动将每个选项的值清空
-        $panel.resetFilter(evnt)
-      },
-      openCombinerEvent (cItem) {
-        const { size, renderParams, option, allCaseList, valList, combiner, getI18n } = this
-        const { $table, $panel, column } = renderParams
-        const { data } = option
-        const caseType = cItem.value === 'custom' ? (data.sMenu || cItem.value) : cItem.value
-        // 处理默运算规则认值，当打开弹出框时，设置/校验默认值
-        if (caseType !== data.sMenu) {
-          data.fVal1 = ''
-          data.fMode = 'and'
-          data.fVal2 = ''
-          data.fType2 = ''
+          if (value === '') {
+            colValList.unshift(vItem)
+          } else {
+            colValList.push(vItem)
+          }
+          colValMaps[value] = item
         }
-        switch (caseType) {
-          case 'between':
-            data.fType1 = 'ge'
-            data.fType2 = 'le'
-            break
-          case 'custom':
-            if (!data.fType1) {
-              data.fType1 = 'equal'
-            }
-            break
-          default:
-            data.fType1 = caseType
+      })
+      // 将相关的信息记录
+      this.column = column
+
+      this.option = option
+
+      this.colValList = colValList
+      console.log(this.colValList)
+      this.valList = colValList.sort(function(a, b) {
+        // 先按照 value.length() 排序升序
+        if (a.value.length < b.value.length) {
+          return -1;
         }
-        combiner.type1 = data.fType1
-        combiner.val1 = data.fVal1
-        combiner.mode = data.fMode
-        combiner.type2 = data.fType2
-        combiner.val2 = data.fVal2
-        // 当弹出打开时，将筛选面板手动关闭
-        $table.closeFilter()
-        // 动态创建一个模态窗口
-        VXETable.modal.open({
-          title: getI18n('vxe.renderer.combination.popup.title'),
-          width: 580,
-          events: {
-            show ({ $modal }) {
-              const inputElem = $modal.$el.querySelector('.combination-popup-filter-input .vxe-input--inner')
-              // 当窗口显示时，将输入框自动聚焦
-              if (inputElem) {
-                inputElem.focus()
-              }
+        else if (a.value.length > b.value.length) {
+          return 1;
+        }
+        else {
+          // 如果 value.length() 相等，则按照 value 排序升序
+          if (a.value < b.value) {
+            return -1;
+          }
+          else if (a.value > b.value) {
+            return 1;
+          }
+          else {
+            return 0;
+          }
+        }
+      });
+
+      this.hasFilter = $table.isFilter(column.property)
+    },
+    getI18n (key, args) {
+      const { $vxe } = this
+      return $vxe.t(key, args)
+    },
+    handleSearch () {
+      const { option, colValList } = this
+      this.valList = option.data.sVal ? colValList.filter(item => item.value.toLowerCase().indexOf(XEUtils.toString(option.data.sVal).toLowerCase()) > -1) : colValList
+      this.updateCheckStatus()
+    },
+    // 创建一个去抖函数，当用户搜索时，至少 500 毫秒才搜索，避免实时搜索卡顿
+    searchEvent: XEUtils.debounce(function () {
+      this.handleSearch()
+    }, 500, { leading: false, trailing: true }),
+    changeAllEvent () {
+      const { isAll } = this
+      this.valList.forEach(item => {
+        item.checked = isAll
+      })
+      this.isIndeterminate = false
+    },
+    updateCheckStatus () {
+      const { valList } = this
+      const isAll = valList.every(item => item.checked)
+      this.isAll = isAll
+      this.isIndeterminate = !isAll && valList.some(item => item.checked)
+    },
+    changeItemEvent () {
+      this.updateCheckStatus()
+    },
+    confirmFilterEvent (evnt) {
+      const { renderParams, option, valList } = this
+      const { data } = option
+      const { $panel } = renderParams
+      data.f1 = ''
+      data.f2 = ''
+      data.fType1 = ''
+      data.fType2 = ''
+      data.sMenu = ''
+      data.checks = valList.filter(item => item.checked).map(item => item.value)
+      // 调佣筛选面板的 changeOption 方法，用于改变当前选项
+      $panel.changeOption(evnt, true, option)
+      // 最后触发确认筛选按钮
+      $panel.confirmFilter(evnt)
+    },
+    resetFilterEvent (evnt) {
+      const { renderParams } = this
+      const { $panel } = renderParams
+      // 触发筛选面板的重置事件，会自动将每个选项的值清空
+      $panel.resetFilter(evnt)
+    },
+    openCombinerEvent (cItem) {
+      const { size, renderParams, option, allCaseList, valList, combiner, getI18n } = this
+      const { $table, $panel, column } = renderParams
+      const { data } = option
+      const caseType = cItem.value === 'custom' ? (data.sMenu || cItem.value) : cItem.value
+      // 处理默运算规则认值，当打开弹出框时，设置/校验默认值
+      if (caseType !== data.sMenu) {
+        data.fVal1 = ''
+        data.fMode = 'and'
+        data.fVal2 = ''
+        data.fType2 = ''
+      }
+      switch (caseType) {
+        case 'between':
+          data.fType1 = 'ge'
+          data.fType2 = 'le'
+          break
+        case 'custom':
+          if (!data.fType1) {
+            data.fType1 = 'equal'
+          }
+          break
+        default:
+          data.fType1 = caseType
+      }
+      combiner.type1 = data.fType1
+      combiner.val1 = data.fVal1
+      combiner.mode = data.fMode
+      combiner.type2 = data.fType2
+      combiner.val2 = data.fVal2
+      // 当弹出打开时，将筛选面板手动关闭
+      $table.closeFilter()
+      // 动态创建一个模态窗口
+      VXETable.modal.open({
+        title: getI18n('vxe.renderer.combination.popup.title'),
+        width: 580,
+        events: {
+          show ({ $modal }) {
+            const inputElem = $modal.$el.querySelector('.combination-popup-filter-input .vxe-input--inner')
+            // 当窗口显示时，将输入框自动聚焦
+            if (inputElem) {
+              inputElem.focus()
             }
-          },
-          slots: {
-            default ({ $modal }) {
-              return [
-                <div class="vxe-tmpl-filter-combination-popup">
-                  <div class="combination-popup-title">{ getI18n('vxe.renderer.combination.popup.currColumnTitle') }<span><span>{ column.title }</span></span></div>
-                  <div class="combination-popup-filter">
-                    <vxe-select class="combination-popup-filter-select" v-model={ combiner.type1 } size={ size } options={ allCaseList } transfer clearable></vxe-select>
-                    <vxe-input class="combination-popup-filter-input" v-model={ combiner.val1 } size={ size } clearable></vxe-input>
-                  </div>
-                  <div class="combination-popup-concat">
-                    <vxe-radio-group v-model={ combiner.mode } size={ size }>
-                      <vxe-radio label="and" content={ getI18n('vxe.renderer.combination.popup.and') }></vxe-radio>
-                      <vxe-radio label="or" content={ getI18n('vxe.renderer.combination.popup.or') }></vxe-radio>
-                    </vxe-radio-group>
-                  </div>
-                  <div class="combination-popup-filter">
-                    <vxe-select class="combination-popup-filter-select" v-model={ combiner.type2 } size={ size } options={ allCaseList } transfer clearable></vxe-select>
-                    <vxe-input class="combination-popup-filter-input" v-model={ combiner.val2 } size={ size } clearable></vxe-input>
-                  </div>
-                  <div class="combination-popup-describe">
-                    <span domPropsInnerHTML={ getI18n('vxe.renderer.combination.popup.describeHtml') }></span>
-                  </div>
-                  <div class="combination-popup-footer">
-                    <vxe-button status="primary" onClick={
-                      (evnt) => {
-                        valList.forEach(item => {
-                          item.checked = false
-                        })
+          }
+        },
+        slots: {
+          default ({ $modal }) {
+            return [
+              <div class="vxe-tmpl-filter-combination-popup">
+                <div class="combination-popup-title">{ getI18n('vxe.renderer.combination.popup.currColumnTitle') }<span><span>{ column.title }</span></span></div>
+                <div class="combination-popup-filter">
+                  <vxe-select class="combination-popup-filter-select" v-model={ combiner.type1 } size={ size } options={ allCaseList } transfer clearable></vxe-select>
+                  <vxe-input class="combination-popup-filter-input" v-model={ combiner.val1 } size={ size } clearable></vxe-input>
+                </div>
+                <div class="combination-popup-concat">
+                  <vxe-radio-group v-model={ combiner.mode } size={ size }>
+                    <vxe-radio label="and" content={ getI18n('vxe.renderer.combination.popup.and') }></vxe-radio>
+                    <vxe-radio label="or" content={ getI18n('vxe.renderer.combination.popup.or') }></vxe-radio>
+                  </vxe-radio-group>
+                </div>
+                <div class="combination-popup-filter">
+                  <vxe-select class="combination-popup-filter-select" v-model={ combiner.type2 } size={ size } options={ allCaseList } transfer clearable></vxe-select>
+                  <vxe-input class="combination-popup-filter-input" v-model={ combiner.val2 } size={ size } clearable></vxe-input>
+                </div>
+                <div class="combination-popup-describe">
+                  <span domPropsInnerHTML={ getI18n('vxe.renderer.combination.popup.describeHtml') }></span>
+                </div>
+                <div class="combination-popup-footer">
+                  <vxe-button status="primary" onClick={
+                    (evnt) => {
+                      valList.forEach(item => {
+                        item.checked = false
+                      })
 
-                        // 设置参数
-                        data.fType1 = combiner.type1
-                        data.fVal1 = combiner.val1
-                        data.fMode = combiner.mode
-                        data.fType2 = combiner.type2
-                        data.fVal2 = combiner.val2
-                        data.sMenu = cItem.value
-                        data.checks = []
+                      // 设置参数
+                      data.fType1 = combiner.type1
+                      data.fVal1 = combiner.val1
+                      data.fMode = combiner.mode
+                      data.fType2 = combiner.type2
+                      data.fVal2 = combiner.val2
+                      data.sMenu = cItem.value
+                      data.checks = []
 
-                        // 面板已被关闭，需手动设置
-                        option._checked = true
-                        option.checked = true
+                      // 面板已被关闭，需手动设置
+                      option._checked = true
+                      option.checked = true
 
-                        // 调用关闭窗口方法
-                        $modal.close()
+                      // 调用关闭窗口方法
+                      $modal.close()
 
-                        // 手动触发筛选面板确认事件
-                        $panel.confirmFilter(evnt)
-                      }
-                    }>{ getI18n('vxe.button.confirm') }</vxe-button>
-                    <vxe-button onClick={
-                      () => {
-                        // 调用关闭窗口方法
-                        $modal.close()
-                      }
-                    }>{ getI18n('vxe.button.cancel') }</vxe-button>
-                  </div>
+                      // 手动触发筛选面板确认事件
+                      $panel.confirmFilter(evnt)
+                    }
+                  }>{ getI18n('vxe.button.confirm') }</vxe-button>
+                  <vxe-button onClick={
+                    () => {
+                      // 调用关闭窗口方法
+                      $modal.close()
+                    }
+                  }>{ getI18n('vxe.button.cancel') }</vxe-button>
                 </div>
-              ]
-            }
-          }
-        })
-      },
-      sortColumn (order) {
-        const { hasSortable, renderParams } = this
-        const { $table, column } = renderParams
-        if (hasSortable) {
-          // 关闭筛选面板
-          $table.closeFilter()
-          // 手动调用表格排序方法
-          $table.sort(column.property, column.order === order ? null : order)
-        }
-      },
-      fixedColumn (fixed) {
-        const { renderParams } = this
-        const { $table, column } = renderParams
-        let targetColumn = column
-        if (column.parentId) {
-          do {
-            targetColumn = $table.getColumnById(column.parentId)
-          } while (targetColumn.parentId)
-        }
-        if (fixed ? targetColumn.fixed !== fixed : targetColumn.fixed) {
-          // 同时支持分组表头，如果是分组表头，将所有子列同时设置固定列
-          XEUtils.eachTree([targetColumn], item => {
-            item.fixed = fixed
-          })
-          // 固定列发生改动，必须调用方法刷新列
-          $table.refreshColumn()
-          // 最后关闭筛选面板
-          $table.closeFilter()
-        }
-      },
-      mouseenterEvent (evnt, menuType) {
-        this.childMenuPos = 'right'
-        this.hoverMenu = menuType
-        const menuElem = evnt.currentTarget
-        if (menuElem.className.indexOf('is-disabled') === -1) {
-          const childMenuElem = menuElem.querySelector('.vxe-tmpl-filter--child-menu-group')
-          clearTimeout(this.menuleaveTime)
-          menuElem.setAttribute('_active', 1)
-          if (childMenuElem) {
-            this.$nextTick(() => {
-              const visibleWidth = document.documentElement.clientWidth || document.body.clientWidth
-              const bounding = childMenuElem.getBoundingClientRect()
-              if (bounding.left + childMenuElem.clientWidth + 20 > visibleWidth) {
-                this.childMenuPos = 'left'
-              }
-            })
+              </div>
+            ]
           }
-        } else {
-          this.hoverMenu = null
-          menuElem.removeAttribute('_active')
         }
-      },
-      mouseleaveEvent (evnt) {
-        const menuElem = evnt.currentTarget
+      })
+    },
+    sortColumn (order) {
+      const { hasSortable, renderParams } = this
+      const { $table, column } = renderParams
+      if (hasSortable) {
+        // 关闭筛选面板
+        $table.closeFilter()
+        // 手动调用表格排序方法
+        $table.sort(column.property, column.order === order ? null : order)
+      }
+    },
+    fixedColumn (fixed) {
+      const { renderParams } = this
+      const { $table, column } = renderParams
+      let targetColumn = column
+      if (column.parentId) {
+        do {
+          targetColumn = $table.getColumnById(column.parentId)
+        } while (targetColumn.parentId)
+      }
+      if (fixed ? targetColumn.fixed !== fixed : targetColumn.fixed) {
+        // 同时支持分组表头，如果是分组表头，将所有子列同时设置固定列
+        XEUtils.eachTree([targetColumn], item => {
+          item.fixed = fixed
+        })
+        // 固定列发生改动，必须调用方法刷新列
+        $table.refreshColumn()
+        // 最后关闭筛选面板
+        $table.closeFilter()
+      }
+    },
+    mouseenterEvent (evnt, menuType) {
+      this.childMenuPos = 'right'
+      this.hoverMenu = menuType
+      const menuElem = evnt.currentTarget
+      if (menuElem.className.indexOf('is-disabled') === -1) {
         const childMenuElem = menuElem.querySelector('.vxe-tmpl-filter--child-menu-group')
-        menuElem.removeAttribute('_active')
+        clearTimeout(this.menuleaveTime)
+        menuElem.setAttribute('_active', 1)
         if (childMenuElem) {
-          this.menuleaveTime = setTimeout(() => {
-            if (!menuElem.hasAttribute('_active')) {
-              this.hoverMenu = null
+          this.$nextTick(() => {
+            const visibleWidth = document.documentElement.clientWidth || document.body.clientWidth
+            const bounding = childMenuElem.getBoundingClientRect()
+            if (bounding.left + childMenuElem.clientWidth + 20 > visibleWidth) {
+              this.childMenuPos = 'left'
             }
-          }, 250)
-        } else {
-          this.hoverMenu = null
+          })
         }
+      } else {
+        this.hoverMenu = null
+        menuElem.removeAttribute('_active')
+      }
+    },
+    mouseleaveEvent (evnt) {
+      const menuElem = evnt.currentTarget
+      const childMenuElem = menuElem.querySelector('.vxe-tmpl-filter--child-menu-group')
+      menuElem.removeAttribute('_active')
+      if (childMenuElem) {
+        this.menuleaveTime = setTimeout(() => {
+          if (!menuElem.hasAttribute('_active')) {
+            this.hoverMenu = null
+          }
+        }, 250)
+      } else {
+        this.hoverMenu = null
       }
     }
   }
+}
 </script>
 
 <style lang="scss">
-  .vxe-tmpl-filter--menu-group {
-    position: relative;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    user-select: none;
-    &:after {
-      content: "";
-      position: absolute;
-      width: 210px;
-      right: 0;
-      bottom: 0;
-      border-bottom: 1px solid #E2E4E7;
-    }
+.vxe-tmpl-filter--menu-group {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  user-select: none;
+  &:after {
+    content: "";
+    position: absolute;
+    width: 210px;
+    right: 0;
+    bottom: 0;
+    border-bottom: 1px solid #E2E4E7;
   }
-  .vxe-tmpl-filter--menu-item {
-    position: relative;
-    padding: 4px 20px 4px 30px;
-    &:not(.is-disabled) {
-      cursor: pointer;
-      &:hover {
-        background-color: #C5C5C5;
-      }
-    }
-    &.is-disabled {
-      cursor: default;
-      color: #B1B1B1;
-    }
-    &.is-hover {
+}
+.vxe-tmpl-filter--menu-item {
+  position: relative;
+  padding: 4px 20px 4px 30px;
+  &:not(.is-disabled) {
+    cursor: pointer;
+    &:hover {
       background-color: #C5C5C5;
-      .vxe-tmpl-filter--child-menu-group {
-        display: block;
-      }
     }
-    &.is-active {
-      & > .vxe-tmpl-filter--menu-left-icon {
-        color: #1890ff;
-      }
+  }
+  &.is-disabled {
+    cursor: default;
+    color: #B1B1B1;
+  }
+  &.is-hover {
+    background-color: #C5C5C5;
+    .vxe-tmpl-filter--child-menu-group {
+      display: block;
+    }
+  }
+  &.is-active {
+    & > .vxe-tmpl-filter--menu-left-icon {
+      color: #1890ff;
     }
   }
-  .vxe-tmpl-filter--menu-item-label,
-  .vxe-tmpl-filter--child-menu-label {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+}
+.vxe-tmpl-filter--menu-item-label,
+.vxe-tmpl-filter--child-menu-label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vxe-tmpl-filter--child-menu-group {
+  display: none;
+  position: absolute;
+  top: 0;
+  width: 150px;
+  background-color: #fff;
+  border: 1px solid #DADCE0;
+  box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
+  &.pos-left {
+    left: -150px;
   }
-  .vxe-tmpl-filter--child-menu-group {
-    display: none;
+  &.pos-right {
+    right: -150px;
+  }
+}
+.vxe-tmpl-filter--child-menu-list {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  &:after {
+    content: "";
     position: absolute;
-    top: 0;
-    width: 150px;
-    background-color: #fff;
-    border: 1px solid #DADCE0;
-    box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
-    &.pos-left {
-      left: -150px;
-    }
-    &.pos-right {
-      right: -150px;
+    width: 90px;
+    right: 0;
+    bottom: 0;
+    border-bottom: 1px solid #E2E4E7;
+  }
+}
+.vxe-tmpl-filter--child-menu-item {
+  position: relative;
+  padding: 4px 20px 4px 30px;
+  &:not(.is-disabled) {
+    &:hover {
+      background-color: #C5C5C5;
     }
   }
-  .vxe-tmpl-filter--child-menu-list {
-    position: relative;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    &:after {
-      content: "";
-      position: absolute;
-      width: 90px;
-      right: 0;
-      bottom: 0;
-      border-bottom: 1px solid #E2E4E7;
+  &.is-disabled {
+    cursor: default;
+    color: #B1B1B1;
+  }
+  &.is-active {
+    .vxe-tmpl-filter--child-menu-left-icon {
+      display: block;
     }
   }
-  .vxe-tmpl-filter--child-menu-item {
+}
+.vxe-tmpl-filter--child-menu-left-icon {
+  display: none;
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.vxe-tmpl-filter--menu-left-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.vxe-tmpl-filter--menu-right-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+}
+.vxe-tmpl-filter-combination {
+  width: 340px;
+  user-select: none;
+  .combination-search {
+    padding: 0 10px 0 30px;
+  }
+  .combination-search-header {
     position: relative;
-    padding: 4px 20px 4px 30px;
-    &:not(.is-disabled) {
-      &:hover {
-        background-color: #C5C5C5;
-      }
-    }
-    &.is-disabled {
-      cursor: default;
-      color: #B1B1B1;
-    }
-    &.is-active {
-      .vxe-tmpl-filter--child-menu-left-icon {
-        display: block;
-      }
-    }
+    padding: 5px 0;
   }
-  .vxe-tmpl-filter--child-menu-left-icon {
-    display: none;
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%);
+  .combination-search-body {
+    border: 1px solid #E2E4E7;
+    border-radius: 4px;
   }
-  .vxe-tmpl-filter--menu-left-icon {
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%);
+  .combination-search-list-header {
+    background-color: #f8f8f9;
+    border-bottom: 1px solid #E2E4E7;
   }
-  .vxe-tmpl-filter--menu-right-icon {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
+  .combination-search-list-body {
+    .vxe-list--virtual-wrapper {
+      height: 120px;
+      width: 340px;
+    }
   }
-  .vxe-tmpl-filter-combination {
-    width: 240px;
-    user-select: none;
-    .combination-search {
-      padding: 0 10px 0 30px;
+  .combination-search-item {
+    height: 24px;
+    line-height: 20px;
+    padding: 0 10px;
+  }
+  .combination-search-checkbox {
+    .vxe-checkbox--label {
+      max-width: 340px;
     }
-    .combination-search-header {
+  }
+  .combination-search-body-empty {
+    text-align: center;
+    line-height: 145px;
+  }
+  .combination-footer {
+    text-align: right;
+    padding: 10px 10px 10px 0;
+  }
+}
+.vxe-tmpl-filter-combination-popup {
+  .combination-popup-title {
+    padding: 0 5px 5px 0;
+    & > span {
       position: relative;
-      padding: 5px 0;
-    }
-    .combination-search-body {
-      border: 1px solid #E2E4E7;
-      border-radius: 4px;
-    }
-    .combination-search-list-header {
-      background-color: #f8f8f9;
-      border-bottom: 1px solid #E2E4E7;
-    }
-    .combination-search-list-body {
-      .vxe-list--virtual-wrapper {
-        height: 120px;
+      display: block;
+      padding-left: 15px;
+      padding: 0 0 0 15px;
+      font-size: 12px;
+      line-height: 22px;
+      height: 22px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      & > span {
+        background-color: #fff;
+        padding-right: 5px;
       }
-    }
-    .combination-search-item {
-      height: 24px;
-      line-height: 20px;
-      padding: 0 10px;
-    }
-    .combination-search-checkbox {
-      .vxe-checkbox--label {
-        max-width: 140px;
+      &:after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        left: 30px;
+        top: 50%;
+        border-bottom: 1px solid #E2E4E7;
+        z-index: -1;
       }
     }
-    .combination-search-body-empty {
-      text-align: center;
-      line-height: 145px;
-    }
-    .combination-footer {
-      text-align: right;
-      padding: 10px 10px 10px 0;
-    }
   }
-  .vxe-tmpl-filter-combination-popup {
-    .combination-popup-title {
-      padding: 0 5px 5px 0;
-      & > span {
-        position: relative;
-        display: block;
-        padding-left: 15px;
-        padding: 0 0 0 15px;
-        font-size: 12px;
-        line-height: 22px;
-        height: 22px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        & > span {
-          background-color: #fff;
-          padding-right: 5px;
-        }
-        &:after {
-          content: "";
-          position: absolute;
-          width: 100%;
-          left: 30px;
-          top: 50%;
-          border-bottom: 1px solid #E2E4E7;
-          z-index: -1;
-        }
-      }
-    }
-    .combination-popup-filter {
-      padding-left: 30px;
-    }
-    .combination-popup-filter-select {
-      width: 120px;
-    }
-    .combination-popup-filter-input {
-      margin-left: 15px;
-      width: 380px;
-    }
-    .combination-popup-describe {
-      font-size: 12px;
-      padding: 20px 0 10px 0;
-    }
-    .combination-popup-concat {
-      padding: 0 5px 5px 40px;
-    }
-    .combination-popup-footer {
-      text-align: right;
-    }
+  .combination-popup-filter {
+    padding-left: 30px;
+  }
+  .combination-popup-filter-select {
+    width: 120px;
+  }
+  .combination-popup-filter-input {
+    margin-left: 15px;
+    width: 380px;
+  }
+  .combination-popup-describe {
+    font-size: 12px;
+    padding: 20px 0 10px 0;
+  }
+  .combination-popup-concat {
+    padding: 0 5px 5px 40px;
+  }
+  .combination-popup-footer {
+    text-align: right;
   }
+}
 </style>
 
diff --git a/src/plugins/vxe-table/renderer/combination/FilterExcel.vue b/src/plugins/vxe-table/renderer/combination/FilterExcel.vue
index fc06a81..7cfc484 100644
--- a/src/plugins/vxe-table/renderer/combination/FilterExcel.vue
+++ b/src/plugins/vxe-table/renderer/combination/FilterExcel.vue
@@ -51,212 +51,212 @@
 </template>
 
 <script>
-  import XEUtils from 'xe-utils'
+import XEUtils from 'xe-utils'
 
-  export default {
-    name: 'FilterExcel',
-    props: {
-      params: Object
-    },
-    data () {
-      return {
-        column: null,
-        option: null,
-        colValList: [],
-        caseGroups: [
-          [
-            { value: 'equal', label: '等于' },
-            { value: 'ne', label: '不等于' }
-          ],
-          [
-            { value: 'greater', label: '大于' },
-            { value: 'ge', label: '大于或等于' },
-            { value: 'less', label: '小于' },
-            { value: 'le', label: '小于或等于' }
-          ]
+export default {
+  name: 'FilterExcel',
+  props: {
+    params: Object
+  },
+  data () {
+    return {
+      column: null,
+      option: null,
+      colValList: [],
+      caseGroups: [
+        [
+          { value: 'equal', label: '等于' },
+          { value: 'ne', label: '不等于' }
+        ],
+        [
+          { value: 'greater', label: '大于' },
+          { value: 'ge', label: '大于或等于' },
+          { value: 'less', label: '小于' },
+          { value: 'le', label: '小于或等于' }
         ]
+      ]
+    }
+  },
+  computed: {
+    searchList () {
+      const { option, colValList } = this
+      return option.data.sVal ? colValList.filter(val => val.indexOf(option.data.sVal) > -1) : colValList
+    }
+  },
+  created () {
+    this.load()
+  },
+  methods: {
+    load () {
+      const { $table, column } = this.params
+      const { fullData } = $table.getTableData()
+      const option = column.filters[0]
+      const colValList = Object.keys(XEUtils.groupBy(fullData, column.property))
+      this.column = column
+      this.option = option
+      this.colValList = colValList
+    },
+    sAllEvent () {
+      const { data } = this.option
+      if (data.vals.length > 0) {
+        data.vals = []
+      } else {
+        data.vals = this.colValList
       }
     },
-    computed: {
-      searchList () {
-        const { option, colValList } = this
-        return option.data.sVal ? colValList.filter(val => val.indexOf(option.data.sVal) > -1) : colValList
+    sItemEvent (val) {
+      const { data } = this.option
+      const vIndex = data.vals.indexOf(val)
+      if (vIndex === -1) {
+        data.vals.push(val)
+      } else {
+        data.vals.splice(vIndex, 1)
       }
     },
-    created () {
-      this.load()
+    confirmFilterEvent (evnt) {
+      const { params, option } = this
+      const { data } = option
+      const { $panel } = params
+      data.f1 = ''
+      data.f2 = ''
+      $panel.changeOption(evnt, true, option)
+      $panel.confirmFilter()
     },
-    methods: {
-      load () {
-        const { $table, column } = this.params
-        const { fullData } = $table.getTableData()
-        const option = column.filters[0]
-        const colValList = Object.keys(XEUtils.groupBy(fullData, column.property))
-        this.column = column
-        this.option = option
-        this.colValList = colValList
-      },
-      sAllEvent () {
-        const { data } = this.option
-        if (data.vals.length > 0) {
-          data.vals = []
-        } else {
-          data.vals = this.colValList
-        }
-      },
-      sItemEvent (val) {
-        const { data } = this.option
-        const vIndex = data.vals.indexOf(val)
-        if (vIndex === -1) {
-          data.vals.push(val)
-        } else {
-          data.vals.splice(vIndex, 1)
-        }
-      },
-      confirmFilterEvent (evnt) {
-        const { params, option } = this
-        const { data } = option
-        const { $panel } = params
-        data.f1 = ''
-        data.f2 = ''
-        $panel.changeOption(evnt, true, option)
-        $panel.confirmFilter()
-      },
-      resetFilterEvent () {
-        const { $panel } = this.params
-        $panel.resetFilter()
-      },
-      childMenuClickEvent (cItem) {
-        this.$XModal.alert({ content: cItem.label })
-      }
+    resetFilterEvent () {
+      const { $panel } = this.params
+      $panel.resetFilter()
+    },
+    childMenuClickEvent (cItem) {
+      this.$XModal.alert({ content: cItem.label })
     }
   }
+}
 </script>
 
 <style>
-  .my-filter-excel {
-    user-select: none;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group {
-    position: relative;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group:after {
-    content: "";
-    position: absolute;
-    width: 190px;
-    right: 0;
-    bottom: 0;
-    border-bottom: 1px solid #E2E4E7;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link {
-    position: relative;
-    padding: 4px 20px 4px 30px;
-    cursor: pointer;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover {
-    background-color: #C5C5C5;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-left-icon {
-    position: absolute;
-    left: 10px;
-    top: 6px;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-right-icon {
-    position: absolute;
-    right: 10px;
-    top: 6px;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover .my-fe-menu-child-list {
-    display: block;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-menu-child-list {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: -120px;
-    width: 120px;
-    background-color: #fff;
-    border: 1px solid #DADCE0;
-    box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list {
-    position: relative;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list:after {
-    content: "";
-    position: absolute;
-    width: 90px;
-    right: 0;
-    bottom: 0;
-    border-bottom: 1px solid #E2E4E7;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list > .my-fe-child-menu-item {
-    position: relative;
-    padding: 4px 20px 4px 30px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list > .my-fe-child-menu-item:hover {
-    background-color: #C5C5C5;
-  }
-  .my-filter-excel .my-fe-search {
-    padding: 0 10px 0 30px;
-  }
-  .my-filter-excel .my-fe-search .my-fe-search-top {
-    position: relative;
-    padding: 5px 0;
-  }
-  .my-filter-excel .my-fe-search .my-fe-search-top > input {
-    border: 1px solid #ABABAB;
-    padding: 0 20px 0 2px;
-    width: 200px;
-    height: 22px;
-    line-height: 22px;
-  }
-  .my-filter-excel .my-fe-search .my-fe-search-top > .my-fe-search-icon {
-    position: absolute;
-    right: 5px;
-    top: 10px;
-  }
-  .my-filter-excel .my-fe-search .my-fe-search-list {
-    margin: 0;
-    border: 1px solid #E2E4E7;
-    padding: 2px 10px;
-    overflow: auto;
-    height: 140px;
-  }
-  .my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item {
-    cursor: pointer;
-    padding: 2px 0;
-  }
-  .my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item .my-fe-search-item-icon {
-    width: 16px;
-  }
-  .my-filter-excel .my-fe-footer {
-    text-align: right;
-    padding: 10px 10px 10px 0;
-  }
-  .my-fe-popup .my-fe-popup-filter {
-    padding-left: 30px;
-  }
-  .my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-select {
-    width: 120px;
-  }
-  .my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-input {
-    margin-left: 15px;
-    width: 380px;
-  }
-  .my-fe-popup .my-fe-popup-describe {
-    padding: 20px 0 10px 0;
-  }
-  .my-fe-popup .my-fe-popup-concat {
-    padding-left: 50px;
-  }
-  .my-fe-popup .my-fe-popup-footer {
-    text-align: right;
-  }
+.my-filter-excel {
+  user-select: none;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group:after {
+  content: "";
+  position: absolute;
+  width: 190px;
+  right: 0;
+  bottom: 0;
+  border-bottom: 1px solid #E2E4E7;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link {
+  position: relative;
+  padding: 4px 20px 4px 30px;
+  cursor: pointer;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover {
+  background-color: #C5C5C5;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-left-icon {
+  position: absolute;
+  left: 10px;
+  top: 6px;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link-right-icon {
+  position: absolute;
+  right: 10px;
+  top: 6px;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link:hover .my-fe-menu-child-list {
+  display: block;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-menu-child-list {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: -120px;
+  width: 120px;
+  background-color: #fff;
+  border: 1px solid #DADCE0;
+  box-shadow: 3px 3px 4px -2px rgba(0, 0, 0, 0.6);
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list {
+  position: relative;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list:after {
+  content: "";
+  position: absolute;
+  width: 90px;
+  right: 0;
+  bottom: 0;
+  border-bottom: 1px solid #E2E4E7;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list > .my-fe-child-menu-item {
+  position: relative;
+  padding: 4px 20px 4px 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.my-filter-excel .my-fe-top .my-fe-menu-group .my-fe-menu-link .my-fe-child-menu-group-list > .my-fe-child-menu-item:hover {
+  background-color: #C5C5C5;
+}
+.my-filter-excel .my-fe-search {
+  padding: 0 10px 0 30px;
+}
+.my-filter-excel .my-fe-search .my-fe-search-top {
+  position: relative;
+  padding: 5px 0;
+}
+.my-filter-excel .my-fe-search .my-fe-search-top > input {
+  border: 1px solid #ABABAB;
+  padding: 0 20px 0 2px;
+  width: 200px;
+  height: 22px;
+  line-height: 22px;
+}
+.my-filter-excel .my-fe-search .my-fe-search-top > .my-fe-search-icon {
+  position: absolute;
+  right: 5px;
+  top: 10px;
+}
+.my-filter-excel .my-fe-search .my-fe-search-list {
+  margin: 0;
+  border: 1px solid #E2E4E7;
+  padding: 2px 10px;
+  overflow: auto;
+  height: 140px;
+}
+.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item {
+  cursor: pointer;
+  padding: 2px 0;
+}
+.my-filter-excel .my-fe-search .my-fe-search-list .my-fe-search-item .my-fe-search-item-icon {
+  width: 16px;
+}
+.my-filter-excel .my-fe-footer {
+  text-align: right;
+  padding: 10px 10px 10px 0;
+}
+.my-fe-popup .my-fe-popup-filter {
+  padding-left: 30px;
+}
+.my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-select {
+  width: 120px;
+}
+.my-fe-popup .my-fe-popup-filter > .my-fe-popup-filter-input {
+  margin-left: 15px;
+  width: 380px;
+}
+.my-fe-popup .my-fe-popup-describe {
+  padding: 20px 0 10px 0;
+}
+.my-fe-popup .my-fe-popup-concat {
+  padding-left: 50px;
+}
+.my-fe-popup .my-fe-popup-footer {
+  text-align: right;
+}
 </style>
diff --git a/src/plugins/vxe-table/renderer/combination/index.js b/src/plugins/vxe-table/renderer/combination/index.js
index 85c166d..c8ad7ca 100644
--- a/src/plugins/vxe-table/renderer/combination/index.js
+++ b/src/plugins/vxe-table/renderer/combination/index.js
@@ -71,7 +71,7 @@ VXETable.renderer.add('FilterCombination', {
             return cellValue < matchText
           case 'le':
             return cellValue < matchText || cellValue == matchText
-            // 通用匹配
+          // 通用匹配
           case 'equal':
             return getMatchRE(matchText, true, true).test(cellValue)
           case 'unequal':
@@ -132,5 +132,3 @@ VXETable.renderer.add('FilterExcell', {
     return false
   }
 })
-
-
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a045177..be150cb 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -15,7 +15,8 @@ body {
 }
 
 label {
-  font-weight: 700;
+  //font-weight: 700;
+  font-size: 12px
 }
 
 html {
diff --git a/src/views/sjzx/czbhwh.vue b/src/views/sjzx/czbhwh.vue
new file mode 100644
index 0000000..5d003b9
--- /dev/null
+++ b/src/views/sjzx/czbhwh.vue
@@ -0,0 +1,426 @@
+<template>
+  <!--  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">-->
+  <el-container>
+    <el-header style="width: 100%; height: 80px;font-size: 12px">
+
+      <el-form :inline="true"  label-width="65px"  label-position="left">
+        <el-row>
+
+          <el-col :span="22">
+
+            <el-form-item label="船号:">
+              <el-input v-model="request.cbbm" type="search" placeholder="船号" ></el-input>
+            </el-form-item>
+<!--            <el-form-item label="场地名称:">-->
+<!--              <el-input v-model="request.cdmc" type="search" placeholder="场地名称" ></el-input>-->
+<!--            </el-form-item>-->
+
+
+          </el-col>
+          <el-col :span="2">
+            <el-form-item style="float: right" >
+              <el-button type="success" @click="initList">查询</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="10" :offset="14">
+            <el-form-item style="float: right" >
+
+              <el-button
+                type="success"
+                @click="toolbarButtonClickEvent('save')"
+              >保存</el-button>
+              <el-button type="success" @click="toolbarButtonClickEvent('insert')">添加</el-button>
+              <el-button
+                type="danger"
+                @click="toolbarButtonClickEvent('delete')"
+              >删除
+              </el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-header>
+    <el-container  style="padding-top: 0px">
+      <el-container>
+        <el-main>
+          <div class="mytable">
+            <vxe-grid
+              id="id"
+              ref="xGrid"
+              border
+              resizable
+              keep-source
+              :align="'center'"
+              :height="height"
+              :auto-resize="true"
+              :columns="tableColumn"
+              highlight-current-row
+              :data="list"
+              :custom-config="{ storage: true }"
+              :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true}"
+              highlight-hover-row
+              show-overflow
+              show-header-overflow
+
+            >
+              <template #wgbsEdit="{ row}">
+                <vxe-checkbox v-model="row.wgbs"  checked-value="Y" unchecked-value="N"  @change="checkBoxClick(row,'tzDsqx01')"></vxe-checkbox>
+              </template>
+              <template #ckxsztEdit="{ row}">
+                <vxe-checkbox v-model="row.ckxszt"  checked-value="Y" unchecked-value="N"  @change="checkBoxClick(row,'tzDsqx01')"></vxe-checkbox>
+              </template>
+              <template #cwfzbsEdit="{ row}">
+                <vxe-checkbox v-model="row.cwfzbs"  checked-value="Y" unchecked-value="N"  @change="checkBoxClick(row,'tzDsqx01')"></vxe-checkbox>
+              </template>
+              <template #xbzEdit="{ row}">
+                <vxe-checkbox v-model="row.xbz"  checked-value="Y" unchecked-value="N"  @change="checkBoxClick(row,'tzDsqx01')"></vxe-checkbox>
+              </template>
+
+            </vxe-grid>
+          </div>
+
+
+        </el-main>
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import {
+  getList,
+  add,
+  edit,
+  del,
+} from '@/api/sjzx/jcsj'
+import { mapGetters } from 'vuex'
+import XEUtils from 'xe-utils'
+import {null2str} from "@/utils/rpkj";
+export default {
+  name:'czbhwh',
+  data() {
+    return {
+      request: {
+        cbbm:'',
+
+      },
+      list: [],
+
+      dictData:{},
+      height: '500px',
+
+      tableColumn: [
+        { type: 'checkbox', width: 50 ,
+        },
+        { type: 'seq', width: 60, title: '序号' },
+
+        { field: 'cbbm', title: '船号编码', width: 120,editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'cbmc', title: '船号名称', width: 120,editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'wgbs', title: '完工标识', width: 120, editRender: {},
+          slots:{
+            //
+            edit:'wgbsEdit',
+            default: 'wgbsEdit'
+          },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'ckxszt', title: '库存系统显示标识', width: 120, editRender: {  },
+          slots:{
+            //
+            edit:'ckxsztEdit',
+            default: 'ckxsztEdit'
+          },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'cjs', title: '船级社', width: 120, editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'sCzbh', title: '目标船只', width: 120, editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'xbz', title: '标准', width: 120, editRender: {  },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+          slots:{
+            //
+            edit:'xbzEdit',
+            default: 'xbzEdit'
+          },
+        },
+
+        { field: 'kgrq', title: '开工日期', width: 120,  editRender: {
+            name: '$input',
+            props: {type: 'date', labelFormat: "yyyy/MM/dd", valueFormat: "yyyy/MM/dd"},
+            formatter: this.formatDate,
+            events: {change: this.selectChange}
+          },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'pdrq', title: '铺底日期', width: 120,  editRender: {
+            name: '$input',
+            props: {type: 'date', labelFormat: "yyyy/MM/dd", valueFormat: "yyyy/MM/dd"},
+            formatter: this.formatDate,
+            events: {change: this.selectChange}
+          },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'xsrq', title: '下水日期', width: 120,  editRender: {
+            name: '$input',
+            props: {type: 'date', labelFormat: "yyyy/MM/dd", valueFormat: "yyyy/MM/dd"},
+            formatter: this.formatDate,
+            events: {change: this.selectChange},
+
+          },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'shrq', title: '试航日期', width: 120,  editRender: {
+            name: '$input',
+            props: {type: 'date', labelFormat: "yyyy/MM/dd", valueFormat: "yyyy/MM/dd"},
+            formatter: this.formatDate,
+            events: {change: this.selectChange}
+          },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'drbz', title: '导入标准', width: 120, editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'cwfzbs', title: '财务封账标识', width: 120, editRender: { },
+          slots:{
+            //
+            edit:'cwfzbsEdit',
+            default: 'cwfzbsEdit'
+          },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'bz', title: '备注', width: 120, editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'bzr', title: '编制人', width: 120,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'bzrq', title: '编制日期', width: 120,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['name', 'bmbm'])
+  },
+  created() {
+    window.addEventListener('resize', this.getHeight)
+    this.getHeight()
+    this.initBase()
+
+
+  },
+  methods: {
+
+
+
+
+
+
+    initBase(){
+      // getTpBase({}).then(res=>{
+      //   this.dictData = res.data
+      //   const xGrid = this.$refs.xGrid
+      //
+      //   const dwbm = xGrid.getColumnByField('dwbm')
+      //   dwbm.editRender.options = res.data.xqdws
+      //
+      // })
+    },
+    initList() {
+      getList(this.request).then((res) => {
+        this.list = res.data
+        if (this.$refs.xGrid) {
+          this.$refs.xGrid.loadData(this.list)
+        }
+
+      })
+    },
+    formatDate ({ cellValue }) {
+      console.log("111")
+      return XEUtils.toDateString(cellValue, 'yyyy/MM/dd')
+    },
+
+    checkBoxClick(row,column){
+      // console.log(row)
+      // this.$refs.xGrid.clearActived()
+      console.log('1')
+      this.$refs.xGrid.setActiveCell(row,column)
+    },
+
+    selectChange(row) {
+      // this.$refs.xGrid.clearActived() // 清除单元格激活状态
+      this.$refs.xGrid.clearEdit() // 清除单元格激活状态
+    //  this.$refs.xGrid.setEditCell(row.row, row.column.property) // 设置单元格为激活状态
+      null2str(row.row)
+    },
+    getHeight() {
+      this.height = window.innerHeight - 190
+    },
+    toolbarButtonClickEvent(code) {
+      const {
+        insertRecords,
+        removeRecords,
+        updateRecords
+      } = this.$refs.xGrid.getRecordset()
+      switch (code) {
+        case 'insert':
+
+          this.$refs.xGrid.insertAt({
+
+          }, -1).then(({ row }) => {
+            this.$refs.xGrid.setActiveRow(row)
+          })
+          break
+        case 'delete':
+          this.$confirm('删除, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then((type) => {
+            this.$refs.xGrid.removeCheckboxRow()
+          })
+          break
+        case 'save':
+
+
+          if (removeRecords.length !== 0) {
+            del(removeRecords).then((response) => {
+              if (response.success) {
+                for (let i = 0; i < this.list.length; i++) {
+                  if (removeRecords.indexOf(this.list[i]) !== -1) {
+                    this.list.splice(i, 1)
+                    i--
+                  }
+                }
+                this.$message({ message: '保存成功！', type: 'success' })
+                const xTable = this.$refs.xGrid
+                xTable.loadData(this.initList())
+
+              }
+            })
+          }
+
+
+
+          if (updateRecords.length !== 0) {
+            edit(updateRecords).then((response) => {
+              if (response.success) {
+                const xTable = this.$refs.xGrid
+                xTable.loadData(this.initList())
+                this.$message({message: '保存成功！', type: 'success'})
+              }
+            })
+          }
+          if (insertRecords.length !== 0) {
+            add(insertRecords).then((response) => {
+              if (response.success) {
+                this.list = this.list.concat(insertRecords)
+                const xTable = this.$refs.xGrid
+                xTable.loadData(this.initList())
+                this.$message({ message: '保存成功！', type: 'success' })
+              }
+            })
+          }
+          this.$message(
+            `新增 ${insertRecords.length} 条，删除 ${removeRecords.length} 条，更新 ${updateRecords.length} 条`
+          )
+          break
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped >
+
+.el-header{margin:0;padding: 5px;height:auto;
+  .el-input{
+    width: 140px;
+  }
+  .el-select{
+    width: 140px;
+  }
+
+}
+.el-container{padding: 0;margin:0;}
+.el-main{padding: 0;}
+.el-col{padding: 0;height: 32px;}
+.el-aside{background: #fff;padding: 0}
+.el-container{padding: 0}
+.el-row {}
+.el-row:last-child {margin-bottom: 0; }
+
+.tableStyles{
+  background: #0a76a4;
+}
+
+.my-dropdown {
+  width: 400px;
+  height: 400px;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+  font-size: 12px;
+
+}
+.mytable1{
+
+}
+.borderClass{
+
+}
+.vxe-input {
+  display: inline-block !important;
+  position: relative !important;
+  width: auto;
+}
+.el-input {
+  display: inline-block !important;
+  position: relative !important;
+  width: auto;
+}
+.keyword-lighten {
+  color: #000;
+  background-color: #FFFF00;
+}
+
+.vxe-textarea--inner {
+  line-height: inherit;
+}
+.el-form-item__label-wrap {
+  margin-left: 0px !important;
+  float: left;
+}
+.fontClass{
+  font-size: 12px;
+  font-weight: bold;
+}
+
+
+</style>
diff --git a/src/views/sjzx/czplwh.vue b/src/views/sjzx/czplwh.vue
new file mode 100644
index 0000000..bd0d4fe
--- /dev/null
+++ b/src/views/sjzx/czplwh.vue
@@ -0,0 +1,650 @@
+<template>
+  <!--  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">-->
+  <el-container>
+    <el-header style="width: 100%; height: 80px;font-size: 12px">
+
+      <el-form :inline="true"  label-width="65px"  label-position="left">
+        <el-row>
+
+          <el-col :span="22">
+
+            <el-form-item label="船号:">
+              <el-select v-model="queryParam.cbbm" filterable  placeholder="工程编号" @change="czbhChange" >
+                <el-option
+                  v-for="item in dictData.cbbm"
+                  :key="item.cbbm"
+                  :label="item.cbbm"
+                  :value="item.cbbm">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="批量:">
+              <el-input v-model="queryParam.dcpl" type="search" placeholder="批量" ></el-input>
+            </el-form-item>
+
+
+          </el-col>
+          <el-col :span="2">
+            <el-form-item style="float: right" >
+              <el-button type="success" @click="initList">查询</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="10" :offset="14">
+            <el-form-item style="float: right" >
+
+
+              <el-button
+                type="success"
+                @click="toolbarButtonClickEvent('save')"
+              >保存</el-button>
+              <div style="float: right;margin-left: 5px" >
+
+                <el-upload
+                  :action="uploadAction"
+                  :show-file-list="false"
+                  :before-upload="beforeAvatarUpload"
+                  :data="uploadData"
+                  :on-success="handleAvatarSuccess"
+                  :disabled="filedis"
+                  :headers="heads"
+                >
+                  <el-button type="success" @click="uploadExcel" >        批量表导入    </el-button>
+                </el-upload>
+
+              </div>
+
+
+
+<!--              <el-button-->
+<!--                type="danger"-->
+<!--                @click="toolbarButtonClickEvent('delete')"-->
+<!--              >删除-->
+<!--              </el-button>-->
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-header>
+    <el-container  style="padding-top: 0px">
+      <el-container>
+        <el-main>
+          <div class="mytable">
+            <vxe-grid
+              id="id"
+              ref="xGrid"
+              border
+              resizable
+              keep-source
+              :align="'center'"
+              :height="height"
+              :auto-resize="true"
+              :columns="tableColumn"
+              highlight-current-row
+              :data="list"
+              :custom-config="{ storage: true }"
+              :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true}"
+              highlight-hover-row
+              show-overflow
+              show-header-overflow
+
+            >
+
+
+            </vxe-grid>
+          </div>
+
+
+        </el-main>
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import {
+  getCzplBase ,
+  wgetCzplBase,
+  czPlupdate,
+  getCzplList,
+} from '@/api/sjzx/jcsj'
+import { mapGetters } from 'vuex'
+import XEUtils from 'xe-utils'
+import {null2str} from "@/utils/rpkj";
+import { getToken } from '@/utils/auth'
+import { startLoading, endLoading } from '@/utils'
+import { Message } from 'element-ui'
+export default {
+  name:'czplwh',
+  data() {
+    return {
+      queryParam: {
+        cbbm:'',
+        dcpl:'',
+
+      },
+      list: [],
+      isupload:'02',
+      filedis:true,
+      uploadData:{
+
+      },
+      heads: { token: getToken() },
+      uploadAction: process.env.VUE_APP_BASE_API + '/dmCzplpNew/uploadPl',
+      dictData:{},
+      height: '500px',
+
+      tableColumn: [
+
+        { type: 'seq', width: 60, title: '序号' },
+
+        { field: 'dcCh', title: '船号', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'dcPl', title: '批量', width: 100,editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+        { field: 'dcFd', title: '分段', width: 100, editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+
+
+        { field: 'zl', title: '重量', width: 100,editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'lrr', title: '录入人', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'lrrq', title: '录入日期', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'bz', title: '备注', width: 100,editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'qy', title: '区域', width: 100,editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'zdh', title: '总段号', width: 100,editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'gdqJt', title: '集团3月滚动期', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'dzjsq', title: '钢加结束（大组）', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'dzjsqZrc', title: '中日程（大组结束）', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xzjsq', title: '钢加结束（小组）', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xzjsqZrc', title: '中日程（小组结束）', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'gjks', title: '钢加开始', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'gjksZrc', title: '中日程（钢加开始）', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'dhqc', title: '订货期次', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqTlt', title: '套料图下发', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'jsqTlt', title: '套料图接收', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqLqb', title: '板材领取表下发', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'jsqLqb', title: '板材领取表接收', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqPtb', title: '零件配套表下发', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'jsqPtb', title: '零件配套表接收', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'slDz', title: '大组数量', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'slXz', title: '小组数量', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'qtqDz', title: '大组齐套日期', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'qtqXz', title: '小组齐套日期', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'fdxqq', title: '分段需求期', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'sjpsq', title: '实际配送期', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'dhqd', title: '订货清单号', width: 100,editRender: { name: 'input' },
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqDhqd', title: '订货清单下发', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'sjdhrq', title: '实际订货日期', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'bcdq', title: '板材到齐', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'sjarrival', title: '实际到货日期', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'jsbs', title: '结算数据标识区域', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'zt', title: '状态', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'dzjsq1', title: 'dzjsq1', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'dzjsqsm', title: 'dzjsqsm', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xzjsq1', title: 'xzjsq1', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xzjsqsm', title: 'xzjsqsm', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'gjks1', title: 'gjks1', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'gjkssm', title: 'gjkssm', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqTlt1', title: 'xfqTlt1', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqTltsm', title: 'xfqTltsm', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqLqb1', title: 'xfqLqb1', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqLqb1sm', title: 'xfqLqb1sm', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqDhqd1', title: 'xfqDhqd1', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'xfqDhqd1sm', title: 'xfqDhqd1sm', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+        { field: 'lsh', title: 'lsh', width: 100,
+          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
+          filterRender: { name: 'FilterCombination', },
+        },
+
+
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['name', 'bmbm'])
+  },
+  created() {
+    window.addEventListener('resize', this.getHeight)
+    this.getHeight()
+    this.initBase()
+
+
+  },
+  methods: {
+
+
+    uploadExcel() {
+      if (this.queryParam.cbbm === '') {
+        this.$message.error('请选择船号！')
+        return false;
+      } else {
+
+      }
+
+      // this.uploadData.czbh = this.queryParam.czbh
+      this.uploadData.isupload = this.isupload
+    },
+
+    czbhChange(){
+      if (this.queryParam.cbbm === '') {
+          this.filedis=true
+      }else{
+        this.filedis=false
+      }
+    },
+    beforeAvatarUpload(file) {
+
+      // 文件类型
+      const isType = file.type === 'application/vnd.ms-excel'
+      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      const fileType = isType || isTypeComputer
+      if (!fileType) {
+        this.$message.error('上传文件只能是xls/xlsx格式！')
+        return
+      }
+      startLoading()
+      return fileType
+    },
+    handleAvatarSuccess(res, file) {
+      endLoading()
+      if (res.success) {
+        // if(res.data.zt==='01'){
+        //   this.$confirm('该模板已导入数据,是否重新导入并覆盖模板数据?', '提示', {
+        //     confirmButtonText: '确定',
+        //     cancelButtonText: '取消',
+        //     distinguishCancelAndClose: true,
+        //     type: 'warning'
+        //   }).then(type => {
+        //     upload({ file: file.raw, czbh: this.queryParam.czbh, isupload: '02' }).then(res => {
+        //       if (res.success) {
+        //         this.$message({ message: '导入成功', type: 'success' })
+        //         this.loadData()
+        //       }
+        //     })
+        //   })
+        // }else{
+        //   this.$message({ message: '导入成功', type: 'success' })
+        //   this.loadData()
+        // }
+        this.$message({ message: '导入成功', type: 'success' })
+        this.initList();
+
+      } else {
+        Message({
+          message: res.message || 'Error',
+          type: 'error',
+          duration: 5 * 1000
+        })
+      }
+    },
+    initBase(){
+      getCzplBase({}).then(res=>{
+        this.dictData = res.data
+        // const xGrid = this.$refs.xGrid
+        //
+        // const dwbm = xGrid.getColumnByField('dwbm')
+        // dwbm.editRender.options = res.data.xqdws
+
+      })
+    },
+    initList() {
+      if (this.queryParam.cbbm === '') {
+          this.$message.warning('选择船只编号')
+        return
+      }
+      getCzplList(this.queryParam).then((res) => {
+        this.list = res.data
+        if (this.$refs.xGrid) {
+          this.$refs.xGrid.loadData(this.list)
+        }
+
+      })
+    },
+    formatDate ({ cellValue }) {
+      return XEUtils.toDateString(cellValue, 'yyyy/MM/dd')
+    },
+
+    checkBoxClick(row,column){
+      // console.log(row)
+
+      this.$refs.xGrid.setActiveCell(row,column)
+    },
+
+    selectChange(row) {
+      // this.$refs.xGrid.clearActived() // 清除单元格激活状态
+      this.$refs.xGrid.clearEdit() // 清除单元格激活状态
+    //  this.$refs.xGrid.setEditCell(row.row, row.column.property) // 设置单元格为激活状态
+      null2str(row.row)
+    },
+    getHeight() {
+      this.height = window.innerHeight - 190
+    },
+    toolbarButtonClickEvent(code) {
+      const {
+        insertRecords,
+        removeRecords,
+        updateRecords
+      } = this.$refs.xGrid.getRecordset()
+      switch (code) {
+        case 'insert':
+
+          this.$refs.xGrid.insertAt({
+
+          }, -1).then(({ row }) => {
+            this.$refs.xGrid.setActiveRow(row)
+          })
+          break
+        case 'delete':
+          this.$confirm('删除, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then((type) => {
+            this.$refs.xGrid.removeCheckboxRow()
+          })
+          break
+        case 'save':
+
+
+          if (removeRecords.length !== 0) {
+            del(removeRecords).then((response) => {
+              if (response.success) {
+                for (let i = 0; i < this.list.length; i++) {
+                  if (removeRecords.indexOf(this.list[i]) !== -1) {
+                    this.list.splice(i, 1)
+                    i--
+                  }
+                }
+                this.$message({ message: '保存成功！', type: 'success' })
+                const xTable = this.$refs.xGrid
+                xTable.loadData(this.initList())
+
+              }
+            })
+          }
+
+
+
+          if (updateRecords.length !== 0) {
+            czPlupdate(updateRecords).then((response) => {
+              if (response.success) {
+                const xTable = this.$refs.xGrid
+                xTable.loadData(this.initList())
+                this.$message({message: '保存成功！', type: 'success'})
+              }
+            })
+          }
+          if (insertRecords.length !== 0) {
+            add(insertRecords).then((response) => {
+              if (response.success) {
+                this.list = this.list.concat(insertRecords)
+                const xTable = this.$refs.xGrid
+                xTable.loadData(this.initList())
+                this.$message({ message: '保存成功！', type: 'success' })
+              }
+            })
+          }
+          this.$message(
+            `新增 ${insertRecords.length} 条，删除 ${removeRecords.length} 条，更新 ${updateRecords.length} 条`
+          )
+          break
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped >
+
+.el-header{margin:0;padding: 5px;height:auto;
+  .el-input{
+    width: 140px;
+  }
+  .el-select{
+    width: 140px;
+  }
+
+}
+.el-container{padding: 0;margin:0;}
+.el-main{padding: 0;}
+.el-col{padding: 0;height: 32px;}
+.el-aside{background: #fff;padding: 0}
+.el-container{padding: 0}
+.el-row {}
+.el-row:last-child {margin-bottom: 0; }
+
+.tableStyles{
+  background: #0a76a4;
+}
+
+.my-dropdown {
+  width: 400px;
+  height: 400px;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+  font-size: 12px;
+
+}
+.mytable1{
+
+}
+.borderClass{
+
+}
+.vxe-input {
+  display: inline-block !important;
+  position: relative !important;
+  width: auto;
+}
+.el-input {
+  display: inline-block !important;
+  position: relative !important;
+  width: auto;
+}
+.keyword-lighten {
+  color: #000;
+  background-color: #FFFF00;
+}
+
+.vxe-textarea--inner {
+  line-height: inherit;
+}
+.el-form-item__label-wrap {
+  margin-left: 0px !important;
+  float: left;
+}
+.fontClass{
+  font-size: 12px;
+  font-weight: bold;
+}
+
+
+</style>