1.在缓存模式下 页面切换会请求接口

小小儁爺

2024-12-30 ff2f7d7bad0132c130c305364a863ff446e926b2

1.在缓存模式下   页面切换会请求接口

 src/views/attendanceModule/attendanceClockIn.vue

@@ -124,6 +124,7 @@
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.inputFocus()
  },
  created() {
  },

 src/views/attendanceModule/attendanceDay.vue

@@ -457,6 +457,9 @@
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getDailyWageReportSearch()
    this.getPrentOrganizationNoCompany()
    this.getPersonPermissions()
  },
  created() {
    this.getDailyWageReportSearch()

 src/views/attendanceModule/attendanceMonth.vue

@@ -392,6 +392,8 @@
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getMonthlyWageReportSearch()
    this.getPrentOrganizationNoCompany()
  },
  created() {
    this.getMonthlyWageReportSearch()

 src/views/attendanceModule/attendanceRecord.vue

@@ -354,6 +354,9 @@
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getAttendanceRecordSearch()
    this.getPrentOrganizationNoCompany()
    this.getPersonPermissions()
  },
  created() {
    this.getAttendanceRecordSearch()

 src/views/attendanceModule/attendanceSettings.vue

@@ -394,6 +394,9 @@
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getAttendanceSettSearch()
    this.getPrentOrganizationNoCompany()
    this.getPersonPermissions()
  },
  created() {
    this.getAttendanceSettSearch()

 src/views/basicSettings/contactUnitList.vue

@@ -7,8 +7,10 @@

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}" />
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="margin-left: 8px;">往来单位</div>
            </div>

@@ -20,19 +22,36 @@

          </div>

          <el-tree ref="treeLeftRef" style="padding: 10px;overflow: auto" :style="{height:(tableHeight+222)+'px'}"
            :data="treeLeft" node-key="code" highlight-current :props="defaultPropsLeft" :default-expand-all="true"
            :expand-on-click-node="false" @node-click="getTCunstomerData">
          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto"
            :style="{height:(tableHeight+222)+'px'}"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="getTCunstomerData"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span v-if="!data.isEdit">{{ data.name }}</span>
              <span v-if="!data.isEdit">
                <el-tooltip v-del-tab-index class="item" effect="dark" content="编辑" placement="top">
                  <i v-if="data.code!=='-1'" class="el-icon-edit" style="margin-right:10px;color: #999"
                    @click.stop="treeEditClick(node,data,'edit')" />
                  <i
                    v-if="data.code!=='-1'"
                    class="el-icon-edit"
                    style="margin-right:10px;color: #999"
                    @click.stop="treeEditClick(node,data,'edit')"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i v-if="data.code!=='-1'" class="el-icon-delete" style="margin-right: 4px;color: #999"
                    @click.stop="treeDeleteClick(node,data)" />
                  <i
                    v-if="data.code!=='-1'"
                    class="el-icon-delete"
                    style="margin-right: 4px;color: #999"
                    @click.stop="treeDeleteClick(node,data)"
                  />
                </el-tooltip>
              </span>
            </span>
@@ -43,8 +62,12 @@
          <div class="bodyTopButtonGroup" style="justify-content: space-between">
            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
            <div style="display: flex">
              <el-button v-waves type="success" icon="el-icon-download"
                @click="$router.push('./../systemSetting/dataImport?fileCode=5')">导入</el-button>
              <el-button
                v-waves
                type="success"
                icon="el-icon-download"
                @click="$router.push('./../systemSetting/dataImport?fileCode=5')"
              >导入</el-button>
              <el-button v-waves icon="el-icon-refresh-right" @click="syncERP">同步往来单位</el-button>

            </div>
@@ -81,10 +104,16 @@
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
              </div>
              <div class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">
                <el-button v-waves type="primary" icon="el-icon-search"
                  @click="getTCunstomerData($refs.treeLeftRef.getCurrentNode())">查询
              <div
                class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
              >
                <el-button
                  v-waves
                  type="primary"
                  icon="el-icon-search"
                  @click="getTCunstomerData($refs.treeLeftRef.getCurrentNode())"
                >查询
                </el-button>
                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
              </div>
@@ -107,10 +136,19 @@
          </div>

          <div class="elTableDiv">
            <el-table ref="tableDataRef" class="tableFixed" :data="tableData"
              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'" border row-class-name="custom-row"
              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}" highlight-current-row
              :header-cell-style="this.$headerCellStyle" :cell-style="this.$cellStyle" @sort-change="sortChange">
            <el-table
              ref="tableDataRef"
              class="tableFixed"
              :data="tableData"
              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"
              border
              row-class-name="custom-row"
              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"
              highlight-current-row
              :header-cell-style="this.$headerCellStyle"
              :cell-style="this.$cellStyle"
              @sort-change="sortChange"
            >
              <!--            prop="RowNum"-->
              <el-table-column prop="rowNum" width="50" fixed label="序号" />
              <el-table-column prop="code" label="往来单位编码" sortable="custom" />
@@ -152,8 +190,11 @@
                <template slot-scope="{row}">
                  <div class="operationClass">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <i class="el-icon-edit-outline" :style="{color:$store.state.settings.theme}"
                        @click="edit('edit',row)" />
                      <i
                        class="el-icon-edit-outline"
                        :style="{color:$store.state.settings.theme}"
                        @click="edit('edit',row)"
                      />
                    </el-tooltip>
                    <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                      <i class="el-icon-delete" :style="{color:$store.state.settings.theme}" @click="del(row)" />
@@ -165,17 +206,31 @@
          </div>

          <!--分页-->
          <pagination :total="total" :page.sync="form.page" :limit.sync="form.rows" align="right"
            layout="total,prev, pager, next,sizes,jumper" popper-class="select_bottom"
            @pagination="getTCunstomerData($refs.treeLeftRef.getCurrentNode())" />
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes,jumper"
            popper-class="select_bottom"
            @pagination="getTCunstomerData($refs.treeLeftRef.getCurrentNode())"
          />

        </div>
      </div>
    </div>

    <!--    往来类别新增修改-->
    <el-dialog v-el-drag-dialog :title="operation==='add'?'新增':'编辑'" :visible.sync="dialogClassVisible" width="800px"
      :close-on-click-modal="false" top="15vh" @closed="handleClassClose" @close="handleClassClose">
    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogClassVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClassClose"
      @close="handleClassClose"
    >
      <el-form ref="dialogClassForm" inline :rules="dialogClassFormRules" :model="dialogClassForm" label-width="80px">
        <el-form-item label="分类编码" prop="customerclasscode">
          <el-input v-model="dialogClassForm.customerclasscode" :disabled="operation!=='add'" style="width: 200px" />
@@ -184,8 +239,13 @@
          <el-input v-model="dialogClassForm.customerclassname" style="width: 200px" />
        </el-form-item>
        <el-form-item label="上级分类">
          <el-select v-model="dialogClassForm.parentcode" style="width:200px" placeholder="请选择"
            :popper-append-to-body="false" clearable>
          <el-select
            v-model="dialogClassForm.parentcode"
            style="width:200px"
            placeholder="请选择"
            :popper-append-to-body="false"
            clearable
          >
            <el-option v-for="item in treeLeftArr" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
@@ -194,15 +254,28 @@
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleClassCancel">取 消</el-button>
          <el-button v-waves type="primary" :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled" @click="dialogVisibleClassConfirm">确 定</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleClassConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    往来单位新增修改-->
    <el-dialog v-el-drag-dialog :title="operation==='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="800px"
      :close-on-click-modal="false" top="15vh" @closed="handleClose" @close="handleClose">
    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >

      <el-form ref="dialogForm" class="" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <!--        <el-divider content-position="left">基本信息</el-divider>-->
@@ -214,8 +287,13 @@
        </el-form-item>

        <el-form-item label="所属类别" prop="customerclasscode">
          <el-select v-model="dialogForm.customerclasscode" style="width:200px" placeholder="请选择" filterable
            :popper-append-to-body="false">
          <el-select
            v-model="dialogForm.customerclasscode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
          >
            <el-option v-for="item in treeLeftArr" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
@@ -233,8 +311,12 @@
          <el-input v-model="dialogForm.conttphone" style="width: 200px" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="dialogForm.addr" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
            style="width: 520px;" />
          <el-input
            v-model="dialogForm.addr"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            style="width: 520px;"
          />
        </el-form-item>

      </el-form>
@@ -242,8 +324,13 @@
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button v-waves type="primary" :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled" @click="dialogVisibleConfirm">确 定</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
@@ -252,427 +339,428 @@
</template>

<script>
  import waves from '@/directive/waves'
  import Pagination from '@/components/Pagination'
  import {
    validateCode
  } from '@/utils/global'
  import elDragDialog from '@/directive/el-drag-dialog'
  import arrayToTree from 'array-to-tree'
  import {
    TCunstomerAddUpdate,
    TCunstomerClassTree,
    TCunstomerClassTreeAddUpdate,
    TCunstomerClassTreeDelete,
    TCunstomerData,
    TCunstomerDelete
  } from '@/api/basicSettings'
  import {
    SeaveSearchPartner
  } from '@/api/ErpSyncMes'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import {
  validateCode
} from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import arrayToTree from 'array-to-tree'
import {
  TCunstomerAddUpdate,
  TCunstomerClassTree,
  TCunstomerClassTreeAddUpdate,
  TCunstomerClassTreeDelete,
  TCunstomerData,
  TCunstomerDelete
} from '@/api/basicSettings'
import {
  SeaveSearchPartner
} from '@/api/ErpSyncMes'

  export default {
    name: 'ContactUnitList',
    directives: {
      waves,
      elDragDialog
    },
    components: {
      Pagination
    },
    data() {
      return {
        mouseHoverType: 'mouseout',
        isExpandForm: false,
        mainHeight: 0,
        tableHeight: 0,
        operation: '',
export default {
  name: 'ContactUnitList',
  directives: {
    waves,
    elDragDialog
  },
  components: {
    Pagination
  },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      operation: '',

        treeLeft: [{
          code: '-1',
          name: '全部'
        }], // 左侧树
        treeLeftArr: [],
        defaultPropsLeft: {
          children: 'children',
          label: 'name'
        },
      treeLeft: [{
        code: '-1',
        name: '全部'
      }], // 左侧树
      treeLeftArr: [],
      defaultPropsLeft: {
        children: 'children',
        label: 'name'
      },

        tableData: [],
        form: {
          customerclasscode: '',
          customercode: '',
          customername: '',
          partspec: '',
          page: 1,
          rows: 20,
          prop: 'lm_date', // 排序字段
          order: 'desc' // 排序字段
        },
        total: 0,
        dialogClassVisible: false,
        dialogClassForm: {
          data_sources: '', // 数据来源:ERP/MES
          customerclasscode: '', // 存货分类编码
          customerclassname: '', // 存货分类名称
          parentcode: '', // 上级分类编码
          OperType: '' // OperType
        },
        classArr: [],
        dialogClassFormRules: {
          customerclasscode: [{
            required: true,
            validator: validateCode,
            trigger: ['blur', 'change']
          }],
          customerclassname: [{
            required: true,
            message: '请输往来单位名称',
            trigger: ['blur', 'change']
          }]
        },
      tableData: [],
      form: {
        customerclasscode: '',
        customercode: '',
        customername: '',
        partspec: '',
        page: 1,
        rows: 20,
        prop: 'lm_date', // 排序字段
        order: 'desc' // 排序字段
      },
      total: 0,
      dialogClassVisible: false,
      dialogClassForm: {
        data_sources: '', // 数据来源:ERP/MES
        customerclasscode: '', // 存货分类编码
        customerclassname: '', // 存货分类名称
        parentcode: '', // 上级分类编码
        OperType: '' // OperType
      },
      classArr: [],
      dialogClassFormRules: {
        customerclasscode: [{
          required: true,
          validator: validateCode,
          trigger: ['blur', 'change']
        }],
        customerclassname: [{
          required: true,
          message: '请输往来单位名称',
          trigger: ['blur', 'change']
        }]
      },

        dialogVisible: false,
        dialogForm: {
          data_sources: 'MES', // 数据来源；ERP/MES
          customercode: '', //
          customername: '', //
          customerclasscode: '',
          conttacts: '',
          conttphone: '',
          addr: '',
          status: '0', // 使用状态: 正常(0)停用(1)
          OperType: '' // 操作类型
        },
        dialogFormRules: {
          customercode: [{
            required: true,
            validator: validateCode,
            trigger: ['blur', 'change']
          }],
          customername: [{
            required: true,
            message: '请输入往来单位名称',
            trigger: ['blur', 'change']
          }],
          customerclasscode: [{
            required: true,
            message: '请选择所属类别',
            trigger: ['blur', 'change']
          }]

        }
      dialogVisible: false,
      dialogForm: {
        data_sources: 'MES', // 数据来源；ERP/MES
        customercode: '', //
        customername: '', //
        customerclasscode: '',
        conttacts: '',
        conttphone: '',
        addr: '',
        status: '0', // 使用状态: 正常(0)停用(1)
        OperType: '' // 操作类型
      },
      dialogFormRules: {
        customercode: [{
          required: true,
          validator: validateCode,
          trigger: ['blur', 'change']
        }],
        customername: [{
          required: true,
          message: '请输入往来单位名称',
          trigger: ['blur', 'change']
        }],
        customerclasscode: [{
          required: true,
          message: '请选择所属类别',
          trigger: ['blur', 'change']
        }]

      }
    },

    activated() {
      window.addEventListener('resize', this.getHeight)
      this.getHeight()
    },
    created() {
    }
  },

    },
    mounted() {
      window.addEventListener('resize', this.getHeight)
      this.getHeight()
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getTCunstomerClassTree()
  },
  created() {

      this.getTCunstomerClassTree()
    },
    methods: {
      async getTCunstomerClassTree() {
        const res = await TCunstomerClassTree()
        res.data.forEach(i => {
          i.idparent = i.idparent ? i.idparent : '-1'
        })
        this.treeLeftArr = res.data
        this.treeLeftArr.forEach(e => {
          e.name = e.code + ' ' + e.name
        })
        this.treeLeft = arrayToTree(this.treeLeft.concat(res.data), {
          parentProperty: 'idparent',
          customID: 'code',
          childrenProperty: 'children'
        })
        console.log(JSON.stringify(this.treeLeft), 1)
        this.$nextTick(() => {
          this.$refs.treeLeftRef.setCurrentKey('-1')
          this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
        })
      },
      async getTCunstomerData(node) {
        const result = this.getChildrenCodeMethod(node, [])
        if (result.includes('-1')) {
          result.shift()
        }
        this.form.customerclasscode = result.join(',')
        const res = await TCunstomerData(this.form)
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

        this.tableData = res.data
        this.total = res.count
      },

      // 获取页面高度
      getHeight() {
        this.$nextTick(() => {
          this.mainHeight = window.innerHeight - 85
          this.tableHeight = this.mainHeight - 280
          this.$refs.tableDataRef.doLayout()
        })
      },
      sortChange({
        column,
        prop,
        order
      }) {
        if (order === 'descending') {
          order = 'desc'
        } else if (order === 'ascending') {
          order = 'asc'
        } else {
          order = 'desc'
        }
        this.form.order = order
        this.form.prop = prop
        this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
      },
      // 新增按钮
      add(operation) {
        this.operation = operation
        this.dialogVisible = true
        this.dialogForm.OperType = 'Add'
      },
      // 修改按钮
      async edit(operation, row) {
        this.operation = operation
        this.dialogVisible = true
        this.dialogForm.OperType = 'Update'

        this.$nextTick(() => {
          this.dialogForm.data_sources = row.data_sources
          this.dialogForm.customercode = row.code
          this.dialogForm.customername = row.name
          this.dialogForm.customerclasscode = row.customertypecode
          this.dialogForm.conttacts = row.conttacts
          this.dialogForm.conttphone = row.conttphone
          this.dialogForm.addr = row.addr

          this.dialogForm.status = row.status
        })
      },
      del(row) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          TCunstomerDelete({
            customercode: row.code,
            data_sources: row.data_sources
          }).then(res => {
            if (res.code === '200') {
              this.$notify.success('删除成功!')
              this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
            }
          })
        }).catch(() => {
          this.$notify.info('已取消删除')
        })
      },
      reset() {
        this.form.customerclasscode = ''
        this.form.customercode = ''
        this.form.customername = ''
    this.getTCunstomerClassTree()
  },
  methods: {
    async getTCunstomerClassTree() {
      const res = await TCunstomerClassTree()
      res.data.forEach(i => {
        i.idparent = i.idparent ? i.idparent : '-1'
      })
      this.treeLeftArr = res.data
      this.treeLeftArr.forEach(e => {
        e.name = e.code + ' ' + e.name
      })
      this.treeLeft = arrayToTree(this.treeLeft.concat(res.data), {
        parentProperty: 'idparent',
        customID: 'code',
        childrenProperty: 'children'
      })
      console.log(JSON.stringify(this.treeLeft), 1)
      this.$nextTick(() => {
        this.$refs.treeLeftRef.setCurrentKey('-1')
        this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
      },
      // 对话框关闭事件
      handleClose() {
        this.dialogForm.data_sources = 'MES'
        this.dialogForm.customercode = ''
        this.dialogForm.customername = ''
        this.dialogForm.customerclasscode = ''
        this.dialogForm.conttacts = ''
        this.dialogForm.conttphone = ''
        this.dialogForm.addr = ''
        this.dialogForm.status = '0'
        this.$refs.dialogForm.clearValidate()
      },
      // 对话框取消
      dialogVisibleCancel() {
        this.dialogVisible = false
      },
      // 对话框确认
      dialogVisibleConfirm() {
        this.$refs.dialogForm.validate(valid => {
          if (valid) {
            // console.log(JSON.parse(JSON.stringify(this.dialogForm)), 2)
            this.$store.state.app.buttonIsDisabled = true
            TCunstomerAddUpdate(this.dialogForm).then(res => {
              if (res.code === '200') {
                this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
                this.dialogVisible = false
                this.$store.state.app.buttonIsDisabled = false
                this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
              } else {
                this.$store.state.app.buttonIsDisabled = false
                this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
              }
            })
      })
    },
    async getTCunstomerData(node) {
      const result = this.getChildrenCodeMethod(node, [])
      if (result.includes('-1')) {
        result.shift()
      }
      this.form.customerclasscode = result.join(',')
      const res = await TCunstomerData(this.form)

      this.tableData = res.data
      this.total = res.count
    },

    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 280
        this.$refs.tableDataRef.doLayout()
      })
    },
    sortChange({
      column,
      prop,
      order
    }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'

      this.$nextTick(() => {
        this.dialogForm.data_sources = row.data_sources
        this.dialogForm.customercode = row.code
        this.dialogForm.customername = row.name
        this.dialogForm.customerclasscode = row.customertypecode
        this.dialogForm.conttacts = row.conttacts
        this.dialogForm.conttphone = row.conttphone
        this.dialogForm.addr = row.addr

        this.dialogForm.status = row.status
      })
    },
    del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TCunstomerDelete({
          customercode: row.code,
          data_sources: row.data_sources
        }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
          }
        })
      },

      // 递归取子集的所有code
      getChildrenCodeMethod(node, result) {
        result.push(node.code)
        if (node.children && node.children.length > 0) {
          node.children.forEach(i => {
            this.getChildrenCodeMethod(i, result)
          })
        }
        return result
      },

      treeEditClick(node, data, operation) {
        this.dialogClassForm.data_sources = data.data_sources
        this.dialogClassForm.customerclasscode = data.code
        this.dialogClassForm.customerclassname = data.name.split(' ')[1]
        this.dialogClassForm.parentcode = data.idparent === '-1' ? '' : data.idparent
        this.dialogClassForm.OperType = 'Update'
        this.operation = operation
        this.dialogClassVisible = true
      },
      treeDeleteClick(node, data) {
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const result = this.getChildrenCodeMethod(data, [])
          TCunstomerClassTreeDelete({
            customerclasscode: result.join(',')
          }).then(res => {
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    reset() {
      this.form.customerclasscode = ''
      this.form.customercode = ''
      this.form.customername = ''
      this.$refs.treeLeftRef.setCurrentKey('-1')
      this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.data_sources = 'MES'
      this.dialogForm.customercode = ''
      this.dialogForm.customername = ''
      this.dialogForm.customerclasscode = ''
      this.dialogForm.conttacts = ''
      this.dialogForm.conttphone = ''
      this.dialogForm.addr = ''
      this.dialogForm.status = '0'
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          // console.log(JSON.parse(JSON.stringify(this.dialogForm)), 2)
          this.$store.state.app.buttonIsDisabled = true
          TCunstomerAddUpdate(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success('删除成功!')
              this.getTCunstomerClassTree()
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }).catch(() => {
          this.$notify.info('已取消删除')
        })
      },
      treeAddClick(operation) {
        this.operation = operation
        this.dialogClassVisible = true
        this.dialogClassForm.OperType = 'Add'
        this.dialogClassForm.data_sources = 'MES'
      },

      handleClassClose() {
        this.dialogClassForm.data_sources = ''
        this.dialogClassForm.customerclasscode = ''
        this.dialogClassForm.customerclassname = ''
        this.dialogClassForm.parentcode = ''
        this.dialogClassForm.OperType = ''
        this.$refs.dialogClassForm.clearValidate()
      },
      dialogVisibleClassCancel() {
        this.dialogClassVisible = false
      },
      dialogVisibleClassConfirm() {
        this.$refs.dialogClassForm.validate(valid => {
          if (valid) {
            TCunstomerClassTreeAddUpdate(this.dialogClassForm).then(res => {
              if (res.code === '200') {
                this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
                this.dialogClassVisible = false
                this.$store.state.app.buttonIsDisabled = false
                this.getTCunstomerClassTree()
              } else {
                this.$store.state.app.buttonIsDisabled = false
                this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
              }
            })
          }
        })
      },
      unittypcodeChange(val) {
        console.log(val)

        this.dialogForm.unitcode = ''
        this.dialogForm.unitsubcode = ''
        this.dialogForm.idSubUnitByReport = ''
        this.dialogForm.idUnitByStock = ''
        this.dialogForm.idUnitByPurchase = ''
        this.dialogForm.idUnitBySale = ''
        this.dialogForm.idunitbymanufacture = ''
        // this.$refs.dialogForm.clearValidate()
        // this.$forceUpdate()
      },
      unitcodeChange(val, type) {
        console.log(val)

        if (type === '1') {
          // this.dialogForm.unitcode = val
          this.dialogForm.unitsubcode = ''
          this.dialogForm.idSubUnitByReport = ''

          const unitname = this.unitcodeSingleArr.find(i => i.unitcode === val).unitname

          this.dialogForm.idUnitByStock = unitname
          this.dialogForm.idUnitByPurchase = unitname
          this.dialogForm.idUnitBySale = unitname
          this.dialogForm.idunitbymanufacture = unitname
        }
      })
    },

        if (type === '0') {
          const t = this.unitcodeGroupArr.find(i => i.unitcode === val).children

          this.idSubUnitByReportArr = t.filter(i => i.isMainUnit !== '1')
          this.idUnitBvStockArr = t

          const mainUnitCode = t.find(i => i.isMainUnit === '1').unitcode
          this.dialogForm.unitsubcode = mainUnitCode
          this.dialogForm.idSubUnitByReport = this.idSubUnitByReportArr[0].unitcode

          this.dialogForm.idUnitByStock = mainUnitCode
          this.dialogForm.idUnitByPurchase = mainUnitCode
          this.dialogForm.idUnitBySale = mainUnitCode
          this.dialogForm.idunitbymanufacture = mainUnitCode
        }
      },
      // 同步ERP
      syncERP() {
        const loading = this.$loading({
          lock: true,
          text: '正在同步ERP，请稍等...',
          spinner: 'el-icon-loading',
          customClass: 'osloading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        SeaveSearchPartner().then(res => {
          if (res.code === '200') {
            setTimeout(() => {
              this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
              this.getTCunstomerClassTree()
              loading.close()
              this.$notify.success('同步成功！')
            }, 2000)
          }
          // else if (res.code === '300') {
          //   setTimeout(() => {
          //     loading.close()
          //     this.$message.error('同步失败！')
          //   }, 10000)
          // }
        }).catch(e => {
          loading.close()
    // 递归取子集的所有code
    getChildrenCodeMethod(node, result) {
      result.push(node.code)
      if (node.children && node.children.length > 0) {
        node.children.forEach(i => {
          this.getChildrenCodeMethod(i, result)
        })
      }
      return result
    },

    treeEditClick(node, data, operation) {
      this.dialogClassForm.data_sources = data.data_sources
      this.dialogClassForm.customerclasscode = data.code
      this.dialogClassForm.customerclassname = data.name.split(' ')[1]
      this.dialogClassForm.parentcode = data.idparent === '-1' ? '' : data.idparent
      this.dialogClassForm.OperType = 'Update'
      this.operation = operation
      this.dialogClassVisible = true
    },
    treeDeleteClick(node, data) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const result = this.getChildrenCodeMethod(data, [])
        TCunstomerClassTreeDelete({
          customerclasscode: result.join(',')
        }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            this.getTCunstomerClassTree()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    treeAddClick(operation) {
      this.operation = operation
      this.dialogClassVisible = true
      this.dialogClassForm.OperType = 'Add'
      this.dialogClassForm.data_sources = 'MES'
    },

    handleClassClose() {
      this.dialogClassForm.data_sources = ''
      this.dialogClassForm.customerclasscode = ''
      this.dialogClassForm.customerclassname = ''
      this.dialogClassForm.parentcode = ''
      this.dialogClassForm.OperType = ''
      this.$refs.dialogClassForm.clearValidate()
    },
    dialogVisibleClassCancel() {
      this.dialogClassVisible = false
    },
    dialogVisibleClassConfirm() {
      this.$refs.dialogClassForm.validate(valid => {
        if (valid) {
          TCunstomerClassTreeAddUpdate(this.dialogClassForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogClassVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getTCunstomerClassTree()
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    unittypcodeChange(val) {
      console.log(val)

      this.dialogForm.unitcode = ''
      this.dialogForm.unitsubcode = ''
      this.dialogForm.idSubUnitByReport = ''
      this.dialogForm.idUnitByStock = ''
      this.dialogForm.idUnitByPurchase = ''
      this.dialogForm.idUnitBySale = ''
      this.dialogForm.idunitbymanufacture = ''
      // this.$refs.dialogForm.clearValidate()
      // this.$forceUpdate()
    },
    unitcodeChange(val, type) {
      console.log(val)

      if (type === '1') {
        // this.dialogForm.unitcode = val
        this.dialogForm.unitsubcode = ''
        this.dialogForm.idSubUnitByReport = ''

        const unitname = this.unitcodeSingleArr.find(i => i.unitcode === val).unitname

        this.dialogForm.idUnitByStock = unitname
        this.dialogForm.idUnitByPurchase = unitname
        this.dialogForm.idUnitBySale = unitname
        this.dialogForm.idunitbymanufacture = unitname
      }

      if (type === '0') {
        const t = this.unitcodeGroupArr.find(i => i.unitcode === val).children

        this.idSubUnitByReportArr = t.filter(i => i.isMainUnit !== '1')
        this.idUnitBvStockArr = t

        const mainUnitCode = t.find(i => i.isMainUnit === '1').unitcode
        this.dialogForm.unitsubcode = mainUnitCode
        this.dialogForm.idSubUnitByReport = this.idSubUnitByReportArr[0].unitcode

        this.dialogForm.idUnitByStock = mainUnitCode
        this.dialogForm.idUnitByPurchase = mainUnitCode
        this.dialogForm.idUnitBySale = mainUnitCode
        this.dialogForm.idunitbymanufacture = mainUnitCode
      }
    },
    // 同步ERP
    syncERP() {
      const loading = this.$loading({
        lock: true,
        text: '正在同步ERP，请稍等...',
        spinner: 'el-icon-loading',
        customClass: 'osloading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      SeaveSearchPartner().then(res => {
        if (res.code === '200') {
          setTimeout(() => {
            this.getTCunstomerData(this.$refs.treeLeftRef.getCurrentNode())
            this.getTCunstomerClassTree()
            loading.close()
            this.$notify.success('同步成功！')
          }, 2000)
        }
        // else if (res.code === '300') {
        //   setTimeout(() => {
        //     loading.close()
        //     this.$message.error('同步失败！')
        //   }, 10000)
        // }
      }).catch(e => {
        loading.close()
      })
    }
  }
}
</script>

<style scoped lang="scss">

 src/views/basicSettings/cronTime.vue

@@ -1,629 +1,634 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增任务</el-button>

        <!--        <el-button v-waves type="primary" icon="el-icon-switch-button" @click="">暂停任务</el-button>-->

        <!--        <el-button v-waves type="primary" icon="el-icon-caret-right " @click="">开启任务</el-button>-->

        <!--        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="">立即执行</el-button>-->

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="母件编码" style=" display: flex;">

              <el-input v-model="form.OrgCode" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="母件名称" style=" display: flex;">

              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="母件规格" style=" display: flex;">

              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="启用状态" style=" display: flex;">

              <el-select v-model="form.OrgType" style="width: 200px" placeholder="请选择">

                <el-option

                  v-for="item in OrgTypeArrxx"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="版本编号" style=" display: flex;">

              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="创建人员" style=" display: flex;">

              <el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" />

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="创建日期" style=" display: flex;">

              <el-date-picker

                v-model="form.createdate"

                style="width: 200px"

                type="date"

                placeholder="选择日期"

              />

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

        >

          <svg-icon

            v-show="mouseHoverType==='mouseout'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"

            @mouseenter="mouseHoverType=$event.type"

          />

          <svg-icon

            v-show="mouseHoverType==='mouseenter'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"

            @click="isExpandForm=!isExpandForm"

            @mouseout="mouseHoverType=$event.type"

          />

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"

          border

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >

          <el-table-column

            type="index"

            width="50"

            fixed

            label="序号"

          />

          <el-table-column

            prop="TaskName"

            label="作业名称"

            sortable="custom"

          />

          <el-table-column

            prop="GroupName"

            label="分组"

            sortable="custom"

          />

          <el-table-column

            prop="LastRunTime"

            label="最后执行时间"

            sortable="custom"

            min-width="120"

          />

          <el-table-column

            prop="Interval"

            label="间隔"

            sortable="custom"

          />

          <el-table-column

            prop="Status"

            label="状态"

            width="75"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <el-tag v-if="row.Status===0" size="medium" type="success">正常</el-tag>

              <el-tag v-if="row.Status===1" size="medium" type="danger">暂停</el-tag>

            </template>

          </el-table-column>

          <el-table-column

            prop="Describe"

            label="描述"

            sortable="custom"

          />

          <el-table-column

            prop="ApiUrl"

            label="ApiUrl"

            sortable="custom"

          />

          <el-table-column

            prop="RequestType"

            label="请求方式"

            sortable="custom"

          />



          <el-table-column

            label="操作"

            width="200"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="暂停任务" placement="top">

                  <i

                    class="el-icon-switch-button"

                    style="margin-right: 15px;color: RED;cursor: pointer"

                    @click="pauseTask(row)"

                  />

                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="开启任务" placement="top">

                  <i

                    class="el-icon-caret-right"

                    style="margin-right: 15px;color: #42B983;cursor: pointer"

                    @click="startTask(row)"

                  />

                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="立即执行" placement="top">

                  <i

                    class="el-icon-d-arrow-right"

                    style="margin-right: 15px;color: #42B983;cursor: pointer"

                    @click="runTask(row)"

                  />

                </el-tooltip>



                <el-tooltip class="item" effect="dark" content="查看记录" placement="top">

                  <i

                    class="el-icon-document"

                    style="margin-right: 15px;color: #42B983;cursor: pointer"

                    @click="check(row)"

                  />

                </el-tooltip>



                <el-tooltip class="item" effect="dark" content="编辑任务" placement="top">

                  <i class="el-icon-edit-outline" :style="{color:$store.state.settings.theme}" @click="edit('edit',row)" />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" :style="{color:$store.state.settings.theme}" content="删除任务" placement="top">

                  <i class="el-icon-delete" @click="del(row)" />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes"

        popper-class="select_bottom"

        @pagination="getTaskBackGroundGetJobs"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="900px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >



      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">

        <el-form-item label="作业名称" prop="TaskName">

          <el-input v-model="dialogForm.TaskName" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="分组" prop="GroupName">

          <el-input v-model="dialogForm.GroupName" style="width: 200px" />

        </el-form-item>



        <!--        <el-popover v-model="cronPopover">-->

        <!--          <cron i18n="cn" @change="changeCron" @close="cronPopover=false" />-->

        <!--          <el-form-item slot="reference" label="cron表达式" prop="Interval">-->

        <!--            <el-input-->

        <!--              v-model="dialogForm.Interval"-->

        <!--              placeholder="请输入定时策略"-->

        <!--              style="width:200px"-->

        <!--              @click="cronPopover=true"-->

        <!--            />-->

        <!--          </el-form-item>-->

        <!--        </el-popover>-->



        <el-form-item label="cron表达式" prop="Interval">

          <el-input

            v-model="dialogForm.Interval"

            placeholder="请输入定时策略"

            style="width:200px"

            readonly

          >

            <el-button slot="append" icon="el-icon-thumb" @click="showDialog" />

          </el-input>

        </el-form-item>



        <el-form-item label="ApiUrl" prop="ApiUrl">

          <el-input v-model="dialogForm.ApiUrl" style="width: 200px" />

        </el-form-item>

        <el-form-item label="header(Key)" prop="AuthKey">

          <el-input v-model="dialogForm.AuthKey" style="width: 200px" />

        </el-form-item>

        <el-form-item label="header(value)" prop="AuthValue">

          <el-input v-model="dialogForm.AuthValue" style="width: 200px" />

        </el-form-item>



        <!--        <el-form-item label="请求方式" prop="RequestType">-->

        <!--          <el-input v-model="dialogForm.RequestType" style="width: 200px" />-->

        <!--        </el-form-item>-->

        <el-form-item label="描述" prop="Describe">

          <el-input v-model="dialogForm.Describe" type="textarea" style="width: 200px" />

        </el-form-item>



      </el-form>



      <el-dialog

        v-el-drag-dialog

        :close-on-click-modal="false"

        top="8vh"

        width="900px"

        title="生成 cron"

        :visible.sync="showCron"

        append-to-body

      >

        <vcrontab :expression="expression" @hide="showCron=false" @fill="crontabFill" />

      </el-dialog>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>

        </div>

      </span>

    </el-dialog>



    <el-dialog

      v-el-drag-dialog

      title="cron 执行记录"

      :visible.sync="dialogVisible2"

      width="900px"



      top="15vh"

      @closed="handleClose2"

      @close="handleClose2"

    >

      <!--      :close-on-click-modal="false"-->

      <!--      {{ recordData }}-->



      <el-timeline :reverse="false">

        <el-timeline-item

          v-for="(item, index) in recordData"

          :key="item.BeginDate"

          :timestamp="item.Msg"

        >

          {{ item.BeginDate }}

        </el-timeline-item>

      </el-timeline>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisible2=false">返 回</el-button>

          <!--          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>-->

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import {

  TaskBackGroundAdd,

  TaskBackGroundGetJobs,

  TaskBackGroundGetRunLog,

  TaskBackGroundPause,

  TaskBackGroundRemove, TaskBackGroundRun,

  TaskBackGroundStart, TaskBackGroundUpdate

} from '@/api/TaskBackGround'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import { cron } from 'vue-cron'

import cronstrue from 'cronstrue/i18n'

import vcrontab from '../../components/VcronTab/index'



export default {

  name: 'CronTime',

  components: {

    Pagination, cron, vcrontab

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      form: {

        OrgCode: '', // 组织架构代码

        OrgName: '', // 组织架构名称

        OrgType: '', // 组织类型

        UserName: '', // 创建人员

        createdate: '',

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },



      total: 10,

      tableData: [],

      dialogVisible: false,

      dialogForm: {

        TaskName: '', // 作业名称

        GroupName: '', // 分组

        Interval: '', // 间隔

        ApiUrl: '', // ApiUrl

        AuthKey: '', // AuthKey

        AuthValue: '', // AuthValue

        Describe: '', // 描述

        RequestType: 'POST', // 请求类型

        LastRunTime: '', // 最后执行时间

        Status: 0// 状态

      },

      cronPopover: false,



      showCron: false,

      expression: '',



      operation: '',

      dialogFormRules: {

        TaskName: [

          { required: true, message: '请输入作业任务', trigger: ['blur', 'change'] }

        ],

        GroupName: [

          { required: true, message: '请输入分组', trigger: ['blur', 'change'] }

        ],

        Interval: [

          { required: true, message: '请输入cron表达式', trigger: ['blur', 'change'] }

        ],

        ApiUrl: [

          { required: true, message: '请输入ApiUrl', trigger: ['blur', 'change'] }

        ],

        RequestType: [

          { required: true, message: '请输入请求方式', trigger: ['blur', 'change'] }

        ],

        Describe: [

          { required: true, message: '请输入请求描述', trigger: ['blur', 'change'] }

        ]

        // AuthKey: [

        //   { required: true, message: '请输入authKey', trigger: ['blur', 'change'] }

        // ],

        // AuthValue: [

        //   { required: true, message: '请输入authValue', trigger: ['blur', 'change'] }

        // ]



      },

      dialogVisible2: false,

      OrgTypeArrxx: [],

      recordData: []// 查看记录数组



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getTaskBackGroundGetJobs()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    crontabFill(val) {

      this.dialogForm.Interval = val

      // const t = cronstrue.toString(this.dialogForm.Interval, { locale: 'zh_CN' })

      // console.log(t)

    },

    showDialog() {

      this.expression = this.dialogForm.Interval

      // 传入的 cron 表达式，可以反解析到 UI 上

      this.showCron = true

    },

    changeCron(val) {

      this.dialogForm.Interval = val

      // cronstrue 是一个 JavaScript 库，解析 cron 表达式并输出可读的 cron 描述。

      // const t = cronstrue.toString(this.dialogForm.Interval, { locale: 'zh_CN' })

      // console.log(t)

    },

    async getTaskBackGroundGetJobs() {

      const res = await TaskBackGroundGetJobs()

      this.tableData = res.data

      this.total = res.data.length

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getTaskBackGroundGetJobs()

    },

    // 查询

    search() {

      this.getTaskBackGroundGetJobs()

    },

    // 重置

    reset() {

      this.form.OrgCode = ''

      this.form.OrgName = ''

      this.form.OrgType = ''

      this.form.UserName = ''

      this.getTaskBackGroundGetJobs()

    },

    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

    },

    // 修改按钮

    edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.$nextTick(() => {

        this.dialogForm.TaskName = row.TaskName

        this.dialogForm.GroupName = row.GroupName

        this.dialogForm.Interval = row.Interval

        this.dialogForm.ApiUrl = row.ApiUrl

        this.dialogForm.AuthKey = row.AuthKey

        this.dialogForm.AuthValue = row.AuthValue

        this.dialogForm.Describe = row.Describe

      })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        TaskBackGroundRemove(row).then(res => {

          if (res.code === '200') {

            this.$message.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getTaskBackGroundGetJobs()

          }

        })

      }).catch(() => {

        this.$message.info('已取消删除')

      })

    },

    // 暂停任务

    async pauseTask(row) {

      const res = await TaskBackGroundPause(row)

      if (res.code === '200') {

        await this.getTaskBackGroundGetJobs()

        return this.$message.success(res.message)

      }

    },

    // 开启任务

    async startTask(row) {

      const res = await TaskBackGroundStart(row)

      if (res.code === '200') {

        await this.getTaskBackGroundGetJobs()

        return this.$message.success(res.message)

      }

    },

    // 立即执行

    async runTask(row) {

      const res = await TaskBackGroundRun(row)

      if (res.code === '200') {

        await this.getTaskBackGroundGetJobs()

        this.$message.success(res.message)

      }

    },

    // 查看记录

    async check(row) {

      const data = {

        TaskName: row.TaskName,

        GroupName: row.GroupName,

        page: 1

      }

      const res = await TaskBackGroundGetRunLog(data)



      if (res.code === '200') {

        this.recordData = res.data

        this.dialogVisible2 = true

      }

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.TaskName = ''

      this.dialogForm.GroupName = ''

      this.dialogForm.Interval = ''

      this.dialogForm.ApiUrl = ''

      this.dialogForm.AuthKey = ''

      this.dialogForm.AuthValue = ''

      this.dialogForm.Describe = ''

      this.dialogForm.RequestType = 'POST'

      this.dialogForm.LastRunTime = ''

      this.dialogForm.Status = 0

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      console.log(this.dialogForm)



      // console.log(new Date().getUTCDate())



      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          // const data = {

          //   OrganCode: this.dialogForm.OrgCode,

          //   OrganName: this.dialogForm.OrgName,

          //   OperType: this.operation === 'add' ? 'Add' : 'Update',

          //   Operator: getCookie('admin')

          // }



          if (this.operation === 'add') {

            TaskBackGroundAdd(this.dialogForm).then(res => {

              if (res.code === '200') {

                this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

                this.dialogVisible = false

                this.getTaskBackGroundGetJobs()

              } else {

                this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

              }

            })

          } else {

            TaskBackGroundUpdate(this.dialogForm).then(res => {

              if (res.code === '200') {

                this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

                this.dialogVisible = false

                this.getTaskBackGroundGetJobs()

              } else {

                this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

              }

            })

          }

        }

      })

    },

    handleClose2() {

      this.recordData = []

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 255

        this.$refs.tableDataRef.doLayout()

      })

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    }

  }

}

</script>



<style lang="scss" scoped>

::v-deep .pop_btn {

  display: flex;

  justify-content: right;

}

</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增任务</el-button>
        <!--        <el-button v-waves type="primary" icon="el-icon-switch-button" @click="">暂停任务</el-button>-->
        <!--        <el-button v-waves type="primary" icon="el-icon-caret-right " @click="">开启任务</el-button>-->
        <!--        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="">立即执行</el-button>-->
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="母件编码" style=" display: flex;">
              <el-input v-model="form.OrgCode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="母件名称" style=" display: flex;">
              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="母件规格" style=" display: flex;">
              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="启用状态" style=" display: flex;">
              <el-select v-model="form.OrgType" style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in OrgTypeArrxx"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="版本编号" style=" display: flex;">
              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="创建人员" style=" display: flex;">
              <el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" />
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="创建日期" style=" display: flex;">
              <el-date-picker
                v-model="form.createdate"
                style="width: 200px"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
        >
          <svg-icon
            v-show="mouseHoverType==='mouseout'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
            @mouseenter="mouseHoverType=$event.type"
          />
          <svg-icon
            v-show="mouseHoverType==='mouseenter'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
            @click="isExpandForm=!isExpandForm"
            @mouseout="mouseHoverType=$event.type"
          />
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <el-table-column
            type="index"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="TaskName"
            label="作业名称"
            sortable="custom"
          />
          <el-table-column
            prop="GroupName"
            label="分组"
            sortable="custom"
          />
          <el-table-column
            prop="LastRunTime"
            label="最后执行时间"
            sortable="custom"
            min-width="120"
          />
          <el-table-column
            prop="Interval"
            label="间隔"
            sortable="custom"
          />
          <el-table-column
            prop="Status"
            label="状态"
            width="75"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.Status===0" size="medium" type="success">正常</el-tag>
              <el-tag v-if="row.Status===1" size="medium" type="danger">暂停</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="Describe"
            label="描述"
            sortable="custom"
          />
          <el-table-column
            prop="ApiUrl"
            label="ApiUrl"
            sortable="custom"
          />
          <el-table-column
            prop="RequestType"
            label="请求方式"
            sortable="custom"
          />

          <el-table-column
            label="操作"
            width="200"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="暂停任务" placement="top">
                  <i
                    class="el-icon-switch-button"
                    style="margin-right: 15px;color: RED;cursor: pointer"
                    @click="pauseTask(row)"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="开启任务" placement="top">
                  <i
                    class="el-icon-caret-right"
                    style="margin-right: 15px;color: #42B983;cursor: pointer"
                    @click="startTask(row)"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="立即执行" placement="top">
                  <i
                    class="el-icon-d-arrow-right"
                    style="margin-right: 15px;color: #42B983;cursor: pointer"
                    @click="runTask(row)"
                  />
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="查看记录" placement="top">
                  <i
                    class="el-icon-document"
                    style="margin-right: 15px;color: #42B983;cursor: pointer"
                    @click="check(row)"
                  />
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="编辑任务" placement="top">
                  <i class="el-icon-edit-outline" :style="{color:$store.state.settings.theme}" @click="edit('edit',row)" />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" :style="{color:$store.state.settings.theme}" content="删除任务" placement="top">
                  <i class="el-icon-delete" @click="del(row)" />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getTaskBackGroundGetJobs"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <el-form-item label="作业名称" prop="TaskName">
          <el-input v-model="dialogForm.TaskName" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="分组" prop="GroupName">
          <el-input v-model="dialogForm.GroupName" style="width: 200px" />
        </el-form-item>

        <!--        <el-popover v-model="cronPopover">-->
        <!--          <cron i18n="cn" @change="changeCron" @close="cronPopover=false" />-->
        <!--          <el-form-item slot="reference" label="cron表达式" prop="Interval">-->
        <!--            <el-input-->
        <!--              v-model="dialogForm.Interval"-->
        <!--              placeholder="请输入定时策略"-->
        <!--              style="width:200px"-->
        <!--              @click="cronPopover=true"-->
        <!--            />-->
        <!--          </el-form-item>-->
        <!--        </el-popover>-->

        <el-form-item label="cron表达式" prop="Interval">
          <el-input
            v-model="dialogForm.Interval"
            placeholder="请输入定时策略"
            style="width:200px"
            readonly
          >
            <el-button slot="append" icon="el-icon-thumb" @click="showDialog" />
          </el-input>
        </el-form-item>

        <el-form-item label="ApiUrl" prop="ApiUrl">
          <el-input v-model="dialogForm.ApiUrl" style="width: 200px" />
        </el-form-item>
        <el-form-item label="header(Key)" prop="AuthKey">
          <el-input v-model="dialogForm.AuthKey" style="width: 200px" />
        </el-form-item>
        <el-form-item label="header(value)" prop="AuthValue">
          <el-input v-model="dialogForm.AuthValue" style="width: 200px" />
        </el-form-item>

        <!--        <el-form-item label="请求方式" prop="RequestType">-->
        <!--          <el-input v-model="dialogForm.RequestType" style="width: 200px" />-->
        <!--        </el-form-item>-->
        <el-form-item label="描述" prop="Describe">
          <el-input v-model="dialogForm.Describe" type="textarea" style="width: 200px" />
        </el-form-item>

      </el-form>

      <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        top="8vh"
        width="900px"
        title="生成 cron"
        :visible.sync="showCron"
        append-to-body
      >
        <vcrontab :expression="expression" @hide="showCron=false" @fill="crontabFill" />
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <el-dialog
      v-el-drag-dialog
      title="cron 执行记录"
      :visible.sync="dialogVisible2"
      width="900px"

      top="15vh"
      @closed="handleClose2"
      @close="handleClose2"
    >
      <!--      :close-on-click-modal="false"-->
      <!--      {{ recordData }}-->

      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(item, index) in recordData"
          :key="item.BeginDate"
          :timestamp="item.Msg"
        >
          {{ item.BeginDate }}
        </el-timeline-item>
      </el-timeline>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisible2=false">返 回</el-button>
          <!--          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>-->
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  TaskBackGroundAdd,
  TaskBackGroundGetJobs,
  TaskBackGroundGetRunLog,
  TaskBackGroundPause,
  TaskBackGroundRemove, TaskBackGroundRun,
  TaskBackGroundStart, TaskBackGroundUpdate
} from '@/api/TaskBackGround'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import { cron } from 'vue-cron'
import cronstrue from 'cronstrue/i18n'
import vcrontab from '../../components/VcronTab/index'

export default {
  name: 'CronTime',
  components: {
    Pagination, cron, vcrontab
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        OrgCode: '', // 组织架构代码
        OrgName: '', // 组织架构名称
        OrgType: '', // 组织类型
        UserName: '', // 创建人员
        createdate: '',
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },

      total: 10,
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        TaskName: '', // 作业名称
        GroupName: '', // 分组
        Interval: '', // 间隔
        ApiUrl: '', // ApiUrl
        AuthKey: '', // AuthKey
        AuthValue: '', // AuthValue
        Describe: '', // 描述
        RequestType: 'POST', // 请求类型
        LastRunTime: '', // 最后执行时间
        Status: 0// 状态
      },
      cronPopover: false,

      showCron: false,
      expression: '',

      operation: '',
      dialogFormRules: {
        TaskName: [
          { required: true, message: '请输入作业任务', trigger: ['blur', 'change'] }
        ],
        GroupName: [
          { required: true, message: '请输入分组', trigger: ['blur', 'change'] }
        ],
        Interval: [
          { required: true, message: '请输入cron表达式', trigger: ['blur', 'change'] }
        ],
        ApiUrl: [
          { required: true, message: '请输入ApiUrl', trigger: ['blur', 'change'] }
        ],
        RequestType: [
          { required: true, message: '请输入请求方式', trigger: ['blur', 'change'] }
        ],
        Describe: [
          { required: true, message: '请输入请求描述', trigger: ['blur', 'change'] }
        ]
        // AuthKey: [
        //   { required: true, message: '请输入authKey', trigger: ['blur', 'change'] }
        // ],
        // AuthValue: [
        //   { required: true, message: '请输入authValue', trigger: ['blur', 'change'] }
        // ]

      },
      dialogVisible2: false,
      OrgTypeArrxx: [],
      recordData: []// 查看记录数组

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getTaskBackGroundGetJobs()
  },
  created() {
    this.getTaskBackGroundGetJobs()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    crontabFill(val) {
      this.dialogForm.Interval = val
      // const t = cronstrue.toString(this.dialogForm.Interval, { locale: 'zh_CN' })
      // console.log(t)
    },
    showDialog() {
      this.expression = this.dialogForm.Interval
      // 传入的 cron 表达式，可以反解析到 UI 上
      this.showCron = true
    },
    changeCron(val) {
      this.dialogForm.Interval = val
      // cronstrue 是一个 JavaScript 库，解析 cron 表达式并输出可读的 cron 描述。
      // const t = cronstrue.toString(this.dialogForm.Interval, { locale: 'zh_CN' })
      // console.log(t)
    },
    async getTaskBackGroundGetJobs() {
      const res = await TaskBackGroundGetJobs()
      this.tableData = res.data
      this.total = res.data.length
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getTaskBackGroundGetJobs()
    },
    // 查询
    search() {
      this.getTaskBackGroundGetJobs()
    },
    // 重置
    reset() {
      this.form.OrgCode = ''
      this.form.OrgName = ''
      this.form.OrgType = ''
      this.form.UserName = ''
      this.getTaskBackGroundGetJobs()
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
    },
    // 修改按钮
    edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.$nextTick(() => {
        this.dialogForm.TaskName = row.TaskName
        this.dialogForm.GroupName = row.GroupName
        this.dialogForm.Interval = row.Interval
        this.dialogForm.ApiUrl = row.ApiUrl
        this.dialogForm.AuthKey = row.AuthKey
        this.dialogForm.AuthValue = row.AuthValue
        this.dialogForm.Describe = row.Describe
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TaskBackGroundRemove(row).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getTaskBackGroundGetJobs()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 暂停任务
    async pauseTask(row) {
      const res = await TaskBackGroundPause(row)
      if (res.code === '200') {
        await this.getTaskBackGroundGetJobs()
        return this.$message.success(res.message)
      }
    },
    // 开启任务
    async startTask(row) {
      const res = await TaskBackGroundStart(row)
      if (res.code === '200') {
        await this.getTaskBackGroundGetJobs()
        return this.$message.success(res.message)
      }
    },
    // 立即执行
    async runTask(row) {
      const res = await TaskBackGroundRun(row)
      if (res.code === '200') {
        await this.getTaskBackGroundGetJobs()
        this.$message.success(res.message)
      }
    },
    // 查看记录
    async check(row) {
      const data = {
        TaskName: row.TaskName,
        GroupName: row.GroupName,
        page: 1
      }
      const res = await TaskBackGroundGetRunLog(data)

      if (res.code === '200') {
        this.recordData = res.data
        this.dialogVisible2 = true
      }
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.TaskName = ''
      this.dialogForm.GroupName = ''
      this.dialogForm.Interval = ''
      this.dialogForm.ApiUrl = ''
      this.dialogForm.AuthKey = ''
      this.dialogForm.AuthValue = ''
      this.dialogForm.Describe = ''
      this.dialogForm.RequestType = 'POST'
      this.dialogForm.LastRunTime = ''
      this.dialogForm.Status = 0
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      console.log(this.dialogForm)

      // console.log(new Date().getUTCDate())

      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          // const data = {
          //   OrganCode: this.dialogForm.OrgCode,
          //   OrganName: this.dialogForm.OrgName,
          //   OperType: this.operation === 'add' ? 'Add' : 'Update',
          //   Operator: getCookie('admin')
          // }

          if (this.operation === 'add') {
            TaskBackGroundAdd(this.dialogForm).then(res => {
              if (res.code === '200') {
                this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
                this.dialogVisible = false
                this.getTaskBackGroundGetJobs()
              } else {
                this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
              }
            })
          } else {
            TaskBackGroundUpdate(this.dialogForm).then(res => {
              if (res.code === '200') {
                this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
                this.dialogVisible = false
                this.getTaskBackGroundGetJobs()
              } else {
                this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
              }
            })
          }
        }
      })
    },
    handleClose2() {
      this.recordData = []
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 255
        this.$refs.tableDataRef.doLayout()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .pop_btn {
  display: flex;
  justify-content: right;
}
</style>

 src/views/basicSettings/groupList.vue

@@ -1,358 +1,363 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=2')">导入</el-button>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="班组编码" style=" display: flex;">

              <el-input v-model="form.storg_code" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="班组名称" style=" display: flex;">

              <el-input v-model="form.storg_name" placeholder="请输入" style="width: 200px" />

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="getGroupData">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

          style="height:5px"

        >

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseout'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

          <!--            @mouseenter="mouseHoverType=$event.type"-->

          <!--          />-->

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseenter'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

          <!--            @click="isExpandForm=!isExpandForm"-->

          <!--            @mouseout="mouseHoverType=$event.type"-->

          <!--          />-->

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="tableHeight+'px'"

          border

          row-class-name="custom-row"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >

          <el-table-column

            prop="rowNum"

            width="120"

            fixed

            label="序号"

          />

          <el-table-column

            prop="usergroupcode"

            label="班组编码"

            sortable="custom"

          />

          <el-table-column

            prop="usergroupname"

            label="班组名称"

            sortable="custom"

          />

          <el-table-column

            prop="status"

            label="状态"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>

              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>

            </template>

          </el-table-column>

          <el-table-column

            prop="description"

            label="描述"

            sortable="custom"

          >

            <template slot-scope="{row}">

              {{ row.description?row.description:'/' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="username"

            label="创建人员"

            sortable="custom"

          />

          <el-table-column

            prop="lm_date"

            label="创建时间"

            width="160"

            sortable="custom"

          />

          <el-table-column

            label="操作"

            width="120"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i

                    class="el-icon-edit-outline"

                    :style="{color:$store.state.settings.theme}"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i

                    class="el-icon-delete"

                    :style="{color:$store.state.settings.theme}"

                    @click="del(row)"

                  />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes,jumper"

        popper-class="select_bottom"

        @pagination="getGroupData"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

        <el-form-item label="班组编码" prop="groupcode">

          <el-input v-model="dialogForm.groupcode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="班组名称" prop="groupname">

          <el-input v-model="dialogForm.groupname" style="width: 200px" />

        </el-form-item>

        <el-form-item required label="状态">

          <el-radio-group v-model="dialogForm.status" style="width: 200px">

            <el-radio label="Y">正常</el-radio>

            <el-radio label="N">停用</el-radio>

          </el-radio-group>

        </el-form-item>

        <el-form-item label="描述">

          <el-input v-model="dialogForm.description" type="textarea" style="width: 200px" />

        </el-form-item>



      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import {

  AddUpdateGroup,

  DeleteGroup,

  GroupData

} from '@/api/basicSettings'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'



export default {

  name: 'GroupList',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,

      form: {

        groupcode: '',

        groupname: '',

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      total: 10,

      tableData: [],

      dialogVisible: false,

      dialogForm: {

        groupcode: '', //

        groupname: '', //

        description: '',

        status: 'Y'// 状态

      },

      operation: '',

      dialogFormRules: {

        groupcode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        groupname: [

          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }

        ]

      }



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getGroupData()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    // 组织架构大列表查询

    async getGroupData() {

      const res = await GroupData(this.form)

      this.tableData = res.data

      this.total = res.count

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getGroupData()

    },

    // 重置

    reset() {

      this.form.storg_code = ''

      this.form.storg_name = ''

      this.getGroupData()

    },

    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'

      this.$nextTick(() => {

        this.dialogForm.groupcode = row.usergroupcode

        this.dialogForm.groupname = row.usergroupname

        this.dialogForm.status = row.status

        this.dialogForm.description = row.description

      })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteGroup({ groupcode: row.usergroupcode }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getGroupData()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.groupcode = ''

      this.dialogForm.groupname = ''

      this.dialogForm.description = ''

      this.dialogForm.status = 'Y'

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          AddUpdateGroup(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.getGroupData()

              this.$store.state.app.buttonIsDisabled = false

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 200

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=2')">导入</el-button>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="班组编码" style=" display: flex;">
              <el-input v-model="form.storg_code" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="班组名称" style=" display: flex;">
              <el-input v-model="form.storg_name" placeholder="请输入" style="width: 200px" />
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="getGroupData">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="rowNum"
            width="120"
            fixed
            label="序号"
          />
          <el-table-column
            prop="usergroupcode"
            label="班组编码"
            sortable="custom"
          />
          <el-table-column
            prop="usergroupname"
            label="班组名称"
            sortable="custom"
          />
          <el-table-column
            prop="status"
            label="状态"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>
              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.description?row.description:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            width="160"
            sortable="custom"
          />
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    class="el-icon-edit-outline"
                    :style="{color:$store.state.settings.theme}"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    @click="del(row)"
                  />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getGroupData"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="班组编码" prop="groupcode">
          <el-input v-model="dialogForm.groupcode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="班组名称" prop="groupname">
          <el-input v-model="dialogForm.groupname" style="width: 200px" />
        </el-form-item>
        <el-form-item required label="状态">
          <el-radio-group v-model="dialogForm.status" style="width: 200px">
            <el-radio label="Y">正常</el-radio>
            <el-radio label="N">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="dialogForm.description" type="textarea" style="width: 200px" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  AddUpdateGroup,
  DeleteGroup,
  GroupData
} from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'

export default {
  name: 'GroupList',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        groupcode: '',
        groupname: '',
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        groupcode: '', //
        groupname: '', //
        description: '',
        status: 'Y'// 状态
      },
      operation: '',
      dialogFormRules: {
        groupcode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        groupname: [
          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getGroupData()
  },
  created() {
    this.getGroupData()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 组织架构大列表查询
    async getGroupData() {
      const res = await GroupData(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getGroupData()
    },
    // 重置
    reset() {
      this.form.storg_code = ''
      this.form.storg_name = ''
      this.getGroupData()
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'
      this.$nextTick(() => {
        this.dialogForm.groupcode = row.usergroupcode
        this.dialogForm.groupname = row.usergroupname
        this.dialogForm.status = row.status
        this.dialogForm.description = row.description
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteGroup({ groupcode: row.usergroupcode }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getGroupData()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.groupcode = ''
      this.dialogForm.groupname = ''
      this.dialogForm.description = ''
      this.dialogForm.status = 'Y'
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          AddUpdateGroup(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.getGroupData()
              this.$store.state.app.buttonIsDisabled = false
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 200
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

 src/views/basicSettings/installLampList.vue

@@ -1,598 +1,603 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="body_left">

        <div style="margin:10px 0">

          <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" /> 车间信息：

        </div>

        <el-input

          v-model="filterText"

          placeholder="输入关键字进行过滤"

          style="margin-bottom: 20px"

        />

        <el-tree

          ref="tree"

          class="filter-tree body_left_tree"

          :data="shopTree"

          :props="defaultProps"

          highlight-current

          node-key="torg_code"

          default-expand-all

          :style="{height: contentHeight+'px',overflowY:'auto'}"

          :filter-node-method="filterNode"

          @current-change="currentTreeChange"

        />

      </div>

      <div class="body_right">

        <el-tabs ref="elTabs" type="border-card" @tab-click="tabClick">

          <el-tab-pane v-for="item in AnDengTypeArr" :key="item.id" :label="item.name">

            <div :style="{height: (contentHeight+51)+'px'}">

              <div class="pane_top">

                <div style="display: flex;align-items: center">

                  <div class="bar" :style="{background:$store.state.settings.theme}" />

                  <div>响应人员</div>



                  <!--                  <i class="el-icon-circle-plus-outline" />-->

                  <el-button

                    v-waves

                    icon="el-icon-circle-plus-outline"

                    :disabled="allowClose"

                    :style="{color:allowClose?'#6f6e6f':$store.state.settings.theme}"

                    style="height: 30px;line-height: 30px;font-size: 22px;padding:10px;margin-left: 10px;"

                    @click="responseUserClick"

                  />

                </div>

                <div style="display: flex;align-content: center">

                  <div>

                    <el-checkbox v-model="allowClose" @change="allowCloseChange">允许关闭</el-checkbox>

                  </div>

                  <div style="margin-left: 5px;cursor: pointer">

                    <el-tooltip class="item" effect="dark" content="当前呼叫类型(启用/关闭)" placement="top">

                      <i class="el-icon-question" :style="{color:$store.state.settings.theme}" />

                    </el-tooltip>

                  </div>

                </div>

              </div>

              <el-empty v-if="AnDengResponUserArr.length===0" :image-size="200" description="暂无数据" />

              <div v-else class="pane_content" :style="{maxHeight:contentHeight+'px',overflowY: 'scroll'}">

                <el-tag

                  v-for="tag in AnDengResponUserArr"

                  :key="tag.id"

                  :closable="!allowClose"

                  type="success"

                  style="margin-right: 10px;margin-bottom: 10px"

                  :style="{color:$store.state.settings.theme}"

                  @close="val=>tagClose(val,item,tag)"

                >

                  {{ tag.username }}

                </el-tag>



              </div>

            </div>

          </el-tab-pane>

        </el-tabs>

        <el-button



          style="position: absolute;top: 13px;right:15px;z-index: 1000"

          icon="el-icon-setting"

          @click="setting"

        >自定义呼叫类型

        </el-button>

      </div>

    </div>



    <!--    自定义呼叫类型-->

    <el-dialog

      v-el-drag-dialog

      title="自定义呼叫类型"

      :visible.sync="settingDialogVisible"

      width="800px"

      top="15vh"

      :close-on-click-modal="false"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-button

        v-waves

        type="primary"

        style="margin-bottom: 10px;"

        icon="el-icon-circle-plus-outline"

        @click="addRow()"

      >新增

      </el-button>

      <el-table

        ref="dialogTableDataArrRef"

        class="tableFixed"

        :data="settingDialogTableData"

        :height="contentHeight-300"

        :style="{width: 100+'%',height:contentHeight-300+'px',}"

        border

        :row-class-name="tableRowClassName"

        highlight-current-row

        :header-cell-style="this.$headerCellStyle"

        :cell-style="this.$cellStyle"

      >

        <el-table-column

          width="50"

          label="序号"

          type="index"

          fixed

        />



        <el-table-column

          prop="code"

          label="类型编码"

        >

          <template slot-scope="{row}">

            <el-input

              v-if="row.isVisible===1"

              v-model="row.code"

              oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')"

              placeholder="请输入"

            />

            <div v-if="row.isVisible===0">{{ row.code }}</div>

          </template>

        </el-table-column>

        <el-table-column

          prop="name"

          label="类型名称"

        >

          <template slot-scope="{row}">

            <el-input

              v-if="row.isVisible===1"

              v-model="row.name"

              placeholder="请输入"

            />

            <div v-if="row.isVisible===0">{{ row.name }}</div>

          </template>

        </el-table-column>



        <el-table-column

          label="操作"

          width="120"

          fixed="right"

        >

          <template slot-scope="{row}">

            <div class="operationClass">

              <el-button v-if="row.isVisible===1" v-waves type="text" @click="saveRow(row)">保存</el-button>

              <el-button v-if="row.isVisible===1" v-waves type="text" @click="cancelRow(row)">取消</el-button>

              <!--              <el-button v-waves v-if="row.isVisible===0" type="text" @click="editRow(row)">编辑</el-button>-->

              <el-button v-if="row.isVisible===0" v-waves type="text" @click="delRow(row)">删除</el-button>

            </div>

          </template>

        </el-table-column>

      </el-table>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">返 回</el-button>

        </div>

      </span>

    </el-dialog>



    <el-dialog

      v-el-drag-dialog

      title="响应人员"

      :visible.sync="userDialogVisible"

      width="800px"

      top="10vh"

      :close-on-click-modal="false"

      @closed="handleUserClose"

      @close="handleUserClose"

    >

      <div

        style=" background-color: #fafafa;  padding: 10px;  min-height: 120px;"

        :style="{maxHeight:(contentHeight-300)+'px',overflowY: 'scroll'}"

      >

        <el-tag

          v-for="tag in userDialogArr"

          :key="tag.usercode"

          closable

          type="success"

          style="margin-right: 10px;margin-bottom: 10px"

          :style="{color:$store.state.settings.theme}"

          @close="val=>userTagClose(val,tag)"

        >

          {{ tag.username }}

        </el-tag>

      </div>

      <div>

        <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" style="margin: 20px 10px 20px 0" />人员：

      </div>

      <div

        style=" background-color: #fafafa;  padding: 10px;  min-height: 420px;"

        :style="{maxHeight:(contentHeight-300)+'px'}"

      >



        <el-input

          v-model="filterUserText"

          placeholder="输入关键字进行过滤"

          style="margin-bottom: 20px; "

        />

        <el-tree

          ref="userTree"

          class="filter-tree"

          :data="userTree"

          :props="userDefaultProps"

          node-key="usercode"

          show-checkbox

          default-expand-all

          :style="{height: (contentHeight-370)+'px',overflowY:'auto'}"

          :filter-node-method="filterUserNode"

          @check="userTreeCheck"

        />

        <!--        @check-change="handleCheckChange"-->



      </div>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleUserCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleUserConfirm"

          >保 存</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>



import {

  AddUpdateAnDengType, AnDengDigoResponUserSearch, AnDengDigoResponUserSeave, AnDengResponUserCloseSeave,

  AnDengResponUserDeleteSeave,

  AnDengResponUserSearch,

  AnDengTypeSearch,

  DeleteAnDengType

} from '@/api/basicSettings'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import { PrentOrganization } from '@/api/GeneralBasicData'



export default {

  name: 'InstallLampList',

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      contentHeight: 0,

      filterText: '',

      shopTree: [], // 树形车间

      defaultProps: {

        children: 'children',

        label: 'torg_name'

      },

      settingDialogVisible: false,

      settingDialogTableData: [],

      allowClose: false, // 允许关闭

      AnDengTypeArr: [], // 安灯类型

      AnDengResponUserArr: [], // 安灯用户

      userDialogVisible: false,

      userDefaultProps: {

        children: 'children',

        label: 'username'

      },

      userDialogArr: [],

      userTree: [],

      filterUserText: '',

      treeCheckedKey: []// 树形复选框选中的usercode



    }

  },

  watch: {

    filterText(val) {

      this.$refs.tree.filter(val)

    },

    filterUserText(val) {

      this.$refs.userTree.filter(val)

    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.handleRequest()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    handleRequest() {

      this.getShopSearch().then(res => {

        if (res.code === '200') {

          this.getAnDengTypeSearch()

        }

      })

    },

    // 获取左侧车间信息

    async getShopSearch() {

      const res = await PrentOrganization()

      this.shopTree = res.data

      this.$nextTick(() => {

        this.$refs.tree.setCurrentKey(this.shopTree[0].torg_code) // 默认选中节点第一个

      })

      return { code: res.code }

    },

    // 获取安灯类型

    async getAnDengTypeSearch() {

      const { data: res } = await AnDengTypeSearch()

      this.AnDengTypeArr = res

      await this.getAnDengResponUserSearch(this.AnDengTypeArr[0].name)

    },

    // 获取安灯人员

    async getAnDengResponUserSearch(name) {

      const data = {

        wkshopcode: this.$refs.tree.getCurrentKey(),

        calltypecode: this.AnDengTypeArr.find(item => item.name === name).code

      }

      const { data: res } = await AnDengResponUserSearch(data)

      this.AnDengResponUserArr = res || []



      this.allowClose = this.AnDengResponUserArr[0] ? this.AnDengResponUserArr[0].enable === 'Y' : false

    },

    // tab切换点击

    tabClick(val) {

      this.getAnDengResponUserSearch(val.label)

    },

    // 安灯系统/响应人员删除

    async tagClose(val, tab, tag) {

      const data = {

        ando_cogfigid: tab.id,

        id: tag.id

      }

      const res = await AnDengResponUserDeleteSeave(data)

      if (res.code === '200') {

        await this.getAnDengResponUserSearch(tab.name)

      }

    },

    // 过滤节点

    filterNode(value, data) {

      if (!value) return true

      return data.torg_name.indexOf(value) !== -1

    },

    // 自定义呼叫类型

    async setting() {

      const { data: res } = await AnDengTypeSearch()

      this.settingDialogTableData = res

      this.settingDialogVisible = true



      this.settingDialogTableData.forEach(item => {

        let number = Math.random() * Math.random()// 作为删除时的标识符

        number = number === 0 ? (10 + Math.random()) : number

        item.number = number

        item.isVisible = 0

      })

    },

    addRow() {

      if (this.settingDialogTableData.find(i => i.isVisible === 1)) {

        return this.$message.info('请先保存或取消本条记录！')

      }

      let number = Math.random() * Math.random()// 作为删除时的标识符

      number = number === 0 ? (10 + Math.random()) : number

      this.settingDialogTableData.push({

        number,

        isVisible: 1,

        code: '',

        name: ''

      })

    },

    async saveRow(row) {

      console.log(row)

      if (row.code.toString().trim() === '' || row.name.toString().trim() === '') {

        return this.$message.info('类型编码或名称不能为空！')

      }

      const res = await AddUpdateAnDengType([row])

      if (res.code === '200') {

        await this.setting()

      }

    },

    cancelRow(row) {

      this.settingDialogTableData.splice(this.settingDialogTableData.length - 1, 1)

    },

    delRow(row) {

      if (this.settingDialogTableData.find(i => i.isVisible === 1)) {

        return this.$message.info('请先保存或取消本条记录！')

      }

      DeleteAnDengType({ andengtypecode: row.code }).then(res => {

        this.setting()

      })

    },

    handleClose() {

      this.settingDialogTableData = []

    },

    // 返回

    dialogVisibleCancel() {

      this.settingDialogVisible = false

      this.getAnDengTypeSearch()

    },

    // 允许关闭点击事件

    async allowCloseChange() {

      const data = {

        wkshopcode: this.$refs.tree.getCurrentKey(),

        calltypecode: this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code,

        enable: this.allowClose ? 'Y' : 'N'

      }

      await AnDengResponUserCloseSeave(data)

    },

    // 树形选中行切换点击

    currentTreeChange(val) {

      this.getAnDengResponUserSearch(this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].name)

    },

    // 响应人员点击

    responseUserClick() {

      const loading = this.$loading({

        lock: true,

        text: '正在加载数据，请稍等...',

        spinner: 'el-icon-loading',

        customClass: 'osloading',

        background: 'rgba(0, 0, 0, 0.7)'

      })



      const data = {

        wkshopcode: this.$refs.tree.getCurrentKey(),

        calltypecode: this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code

      }

      AnDengDigoResponUserSearch(data).then(res => {

        if (res.code === '200') {

          this.userTree.push({

            username: '全部',

            children: res.data

          })



          res.data.forEach(item => {

            if (item.flag === 'Y') {

              this.treeCheckedKey.push(item.usercode)

              this.userDialogArr.push(item)

            }

          })



          setTimeout(() => {

            loading.close()

            this.userDialogVisible = true



            this.$nextTick(() => {

              this.$refs.userTree.setCheckedKeys(this.treeCheckedKey)

            })

          }, 1000)

        }

      })

    },

    handleUserClose() {

      this.userTree = []

      this.userDialogArr = []

      this.treeCheckedKey = []

    },

    dialogVisibleUserCancel() {

      this.userDialogVisible = false

    },

    async dialogVisibleUserConfirm() {

      const data = []



      this.$refs.userTree.getCheckedKeys().forEach(i => {

        // console.log(i)

        if (i !== undefined) {

          data.push({

            code: i

          })

        }

      })

      this.$store.state.app.buttonIsDisabled = true

      const res = await AnDengDigoResponUserSeave(this.$refs.tree.getCurrentKey(), this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code, this.allowClose ? 'Y' : 'N', data)

      if (res.code === '200') {

        // this.$refs.userTree.setCheckedKeys([])

        this.userDialogVisible = false

        this.$message.success('保存成功！')

        this.$store.state.app.buttonIsDisabled = false

        await this.getAnDengResponUserSearch(this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].name)

      }

    },

    userTagClose(val, tag) {

      this.treeCheckedKey = this.treeCheckedKey.filter(i => i !== tag.usercode)

      this.userDialogArr = this.userDialogArr.filter(i => i.usercode !== tag.usercode)

      this.$refs.userTree.setCheckedKeys(this.treeCheckedKey)

    },

    userTreeCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {

      // console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, 6)

      this.treeCheckedKey = checkedKeys.filter(i => i !== undefined)

      this.userTree[0].children.forEach(i => {

        if (this.treeCheckedKey.includes(i.usercode)) {

          i.flag = 'Y'

        } else {

          i.flag = 'N'

        }

      })

      this.userDialogArr = this.userTree[0].children.filter(i => i.flag === 'Y')

    },

    // handleCheckChange(data) {

    //   if (data.children) {

    //     data.children.forEach((item) => {

    //       const node = this.$refs.userTree.getNode(item)

    //       if (!node.visible) {

    //         this.$refs.userTree.setChecked(item, false)

    //       }

    //     })

    //   }

    // },

    // 过滤节点

    filterUserNode(value, data) {

      if (!value) return true

      return data.username.indexOf(value) !== -1

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.contentHeight = this.mainHeight - 142

      })

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    }



  }

}

</script>



<!--本页面单独样式-->

<style lang="scss" scoped>

$main_color: #42b983;

.body {

  display: flex;

  flex-direction: row;

}



.body_left {

  width: 360px;

  background-color: #fff;

  margin: 10px 0;

  padding: 10px;

  flex-direction: column;

}



.body_right {

  width: 100%;

  background-color: #fff;

  margin: 10px 0 10px 10px;

}



.pane_top {

  background-color: #fafafa;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 10px;

  margin-bottom: 20px;



  .bar {

    width: 4px;

    height: 20px;

    border-radius: 2px;

    //background-color: $main_color;

    margin-right: 10px;

  }

}



.pane_content {

  background-color: #fafafa;

  padding: 10px;

  min-height: 400px;

}



.body_left_tree {

  ::v-deep .is-current > .el-tree-node__content {

    background-color: #dedcdc !important;

    font-weight: bolder;

    //color: #FFFFFF;

  }

}



::v-deep .el-button--text {

  font-size: 14px;

  cursor: pointer;

}

</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="body_left">
        <div style="margin:10px 0">
          <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" /> 车间信息：
        </div>
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
          style="margin-bottom: 20px"
        />
        <el-tree
          ref="tree"
          class="filter-tree body_left_tree"
          :data="shopTree"
          :props="defaultProps"
          highlight-current
          node-key="torg_code"
          default-expand-all
          :style="{height: contentHeight+'px',overflowY:'auto'}"
          :filter-node-method="filterNode"
          @current-change="currentTreeChange"
        />
      </div>
      <div class="body_right">
        <el-tabs ref="elTabs" type="border-card" @tab-click="tabClick">
          <el-tab-pane v-for="item in AnDengTypeArr" :key="item.id" :label="item.name">
            <div :style="{height: (contentHeight+51)+'px'}">
              <div class="pane_top">
                <div style="display: flex;align-items: center">
                  <div class="bar" :style="{background:$store.state.settings.theme}" />
                  <div>响应人员</div>

                  <!--                  <i class="el-icon-circle-plus-outline" />-->
                  <el-button
                    v-waves
                    icon="el-icon-circle-plus-outline"
                    :disabled="allowClose"
                    :style="{color:allowClose?'#6f6e6f':$store.state.settings.theme}"
                    style="height: 30px;line-height: 30px;font-size: 22px;padding:10px;margin-left: 10px;"
                    @click="responseUserClick"
                  />
                </div>
                <div style="display: flex;align-content: center">
                  <div>
                    <el-checkbox v-model="allowClose" @change="allowCloseChange">允许关闭</el-checkbox>
                  </div>
                  <div style="margin-left: 5px;cursor: pointer">
                    <el-tooltip class="item" effect="dark" content="当前呼叫类型(启用/关闭)" placement="top">
                      <i class="el-icon-question" :style="{color:$store.state.settings.theme}" />
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <el-empty v-if="AnDengResponUserArr.length===0" :image-size="200" description="暂无数据" />
              <div v-else class="pane_content" :style="{maxHeight:contentHeight+'px',overflowY: 'scroll'}">
                <el-tag
                  v-for="tag in AnDengResponUserArr"
                  :key="tag.id"
                  :closable="!allowClose"
                  type="success"
                  style="margin-right: 10px;margin-bottom: 10px"
                  :style="{color:$store.state.settings.theme}"
                  @close="val=>tagClose(val,item,tag)"
                >
                  {{ tag.username }}
                </el-tag>

              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-button

          style="position: absolute;top: 13px;right:15px;z-index: 1000"
          icon="el-icon-setting"
          @click="setting"
        >自定义呼叫类型
        </el-button>
      </div>
    </div>

    <!--    自定义呼叫类型-->
    <el-dialog
      v-el-drag-dialog
      title="自定义呼叫类型"
      :visible.sync="settingDialogVisible"
      width="800px"
      top="15vh"
      :close-on-click-modal="false"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-button
        v-waves
        type="primary"
        style="margin-bottom: 10px;"
        icon="el-icon-circle-plus-outline"
        @click="addRow()"
      >新增
      </el-button>
      <el-table
        ref="dialogTableDataArrRef"
        class="tableFixed"
        :data="settingDialogTableData"
        :height="contentHeight-300"
        :style="{width: 100+'%',height:contentHeight-300+'px',}"
        border
        :row-class-name="tableRowClassName"
        highlight-current-row
        :header-cell-style="this.$headerCellStyle"
        :cell-style="this.$cellStyle"
      >
        <el-table-column
          width="50"
          label="序号"
          type="index"
          fixed
        />

        <el-table-column
          prop="code"
          label="类型编码"
        >
          <template slot-scope="{row}">
            <el-input
              v-if="row.isVisible===1"
              v-model="row.code"
              oninput="value=value.replace(/[^0-9a-zA-Z]/g,'')"
              placeholder="请输入"
            />
            <div v-if="row.isVisible===0">{{ row.code }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="类型名称"
        >
          <template slot-scope="{row}">
            <el-input
              v-if="row.isVisible===1"
              v-model="row.name"
              placeholder="请输入"
            />
            <div v-if="row.isVisible===0">{{ row.name }}</div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="120"
          fixed="right"
        >
          <template slot-scope="{row}">
            <div class="operationClass">
              <el-button v-if="row.isVisible===1" v-waves type="text" @click="saveRow(row)">保存</el-button>
              <el-button v-if="row.isVisible===1" v-waves type="text" @click="cancelRow(row)">取消</el-button>
              <!--              <el-button v-waves v-if="row.isVisible===0" type="text" @click="editRow(row)">编辑</el-button>-->
              <el-button v-if="row.isVisible===0" v-waves type="text" @click="delRow(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">返 回</el-button>
        </div>
      </span>
    </el-dialog>

    <el-dialog
      v-el-drag-dialog
      title="响应人员"
      :visible.sync="userDialogVisible"
      width="800px"
      top="10vh"
      :close-on-click-modal="false"
      @closed="handleUserClose"
      @close="handleUserClose"
    >
      <div
        style=" background-color: #fafafa;  padding: 10px;  min-height: 120px;"
        :style="{maxHeight:(contentHeight-300)+'px',overflowY: 'scroll'}"
      >
        <el-tag
          v-for="tag in userDialogArr"
          :key="tag.usercode"
          closable
          type="success"
          style="margin-right: 10px;margin-bottom: 10px"
          :style="{color:$store.state.settings.theme}"
          @close="val=>userTagClose(val,tag)"
        >
          {{ tag.username }}
        </el-tag>
      </div>
      <div>
        <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" style="margin: 20px 10px 20px 0" />人员：
      </div>
      <div
        style=" background-color: #fafafa;  padding: 10px;  min-height: 420px;"
        :style="{maxHeight:(contentHeight-300)+'px'}"
      >

        <el-input
          v-model="filterUserText"
          placeholder="输入关键字进行过滤"
          style="margin-bottom: 20px; "
        />
        <el-tree
          ref="userTree"
          class="filter-tree"
          :data="userTree"
          :props="userDefaultProps"
          node-key="usercode"
          show-checkbox
          default-expand-all
          :style="{height: (contentHeight-370)+'px',overflowY:'auto'}"
          :filter-node-method="filterUserNode"
          @check="userTreeCheck"
        />
        <!--        @check-change="handleCheckChange"-->

      </div>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleUserCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleUserConfirm"
          >保 存</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import {
  AddUpdateAnDengType, AnDengDigoResponUserSearch, AnDengDigoResponUserSeave, AnDengResponUserCloseSeave,
  AnDengResponUserDeleteSeave,
  AnDengResponUserSearch,
  AnDengTypeSearch,
  DeleteAnDengType
} from '@/api/basicSettings'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import { PrentOrganization } from '@/api/GeneralBasicData'

export default {
  name: 'InstallLampList',
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      contentHeight: 0,
      filterText: '',
      shopTree: [], // 树形车间
      defaultProps: {
        children: 'children',
        label: 'torg_name'
      },
      settingDialogVisible: false,
      settingDialogTableData: [],
      allowClose: false, // 允许关闭
      AnDengTypeArr: [], // 安灯类型
      AnDengResponUserArr: [], // 安灯用户
      userDialogVisible: false,
      userDefaultProps: {
        children: 'children',
        label: 'username'
      },
      userDialogArr: [],
      userTree: [],
      filterUserText: '',
      treeCheckedKey: []// 树形复选框选中的usercode

    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    filterUserText(val) {
      this.$refs.userTree.filter(val)
    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.handleRequest()
  },
  created() {
    this.handleRequest()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    handleRequest() {
      this.getShopSearch().then(res => {
        if (res.code === '200') {
          this.getAnDengTypeSearch()
        }
      })
    },
    // 获取左侧车间信息
    async getShopSearch() {
      const res = await PrentOrganization()
      this.shopTree = res.data
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.shopTree[0].torg_code) // 默认选中节点第一个
      })
      return { code: res.code }
    },
    // 获取安灯类型
    async getAnDengTypeSearch() {
      const { data: res } = await AnDengTypeSearch()
      this.AnDengTypeArr = res
      await this.getAnDengResponUserSearch(this.AnDengTypeArr[0].name)
    },
    // 获取安灯人员
    async getAnDengResponUserSearch(name) {
      const data = {
        wkshopcode: this.$refs.tree.getCurrentKey(),
        calltypecode: this.AnDengTypeArr.find(item => item.name === name).code
      }
      const { data: res } = await AnDengResponUserSearch(data)
      this.AnDengResponUserArr = res || []

      this.allowClose = this.AnDengResponUserArr[0] ? this.AnDengResponUserArr[0].enable === 'Y' : false
    },
    // tab切换点击
    tabClick(val) {
      this.getAnDengResponUserSearch(val.label)
    },
    // 安灯系统/响应人员删除
    async tagClose(val, tab, tag) {
      const data = {
        ando_cogfigid: tab.id,
        id: tag.id
      }
      const res = await AnDengResponUserDeleteSeave(data)
      if (res.code === '200') {
        await this.getAnDengResponUserSearch(tab.name)
      }
    },
    // 过滤节点
    filterNode(value, data) {
      if (!value) return true
      return data.torg_name.indexOf(value) !== -1
    },
    // 自定义呼叫类型
    async setting() {
      const { data: res } = await AnDengTypeSearch()
      this.settingDialogTableData = res
      this.settingDialogVisible = true

      this.settingDialogTableData.forEach(item => {
        let number = Math.random() * Math.random()// 作为删除时的标识符
        number = number === 0 ? (10 + Math.random()) : number
        item.number = number
        item.isVisible = 0
      })
    },
    addRow() {
      if (this.settingDialogTableData.find(i => i.isVisible === 1)) {
        return this.$message.info('请先保存或取消本条记录！')
      }
      let number = Math.random() * Math.random()// 作为删除时的标识符
      number = number === 0 ? (10 + Math.random()) : number
      this.settingDialogTableData.push({
        number,
        isVisible: 1,
        code: '',
        name: ''
      })
    },
    async saveRow(row) {
      console.log(row)
      if (row.code.toString().trim() === '' || row.name.toString().trim() === '') {
        return this.$message.info('类型编码或名称不能为空！')
      }
      const res = await AddUpdateAnDengType([row])
      if (res.code === '200') {
        await this.setting()
      }
    },
    cancelRow(row) {
      this.settingDialogTableData.splice(this.settingDialogTableData.length - 1, 1)
    },
    delRow(row) {
      if (this.settingDialogTableData.find(i => i.isVisible === 1)) {
        return this.$message.info('请先保存或取消本条记录！')
      }
      DeleteAnDengType({ andengtypecode: row.code }).then(res => {
        this.setting()
      })
    },
    handleClose() {
      this.settingDialogTableData = []
    },
    // 返回
    dialogVisibleCancel() {
      this.settingDialogVisible = false
      this.getAnDengTypeSearch()
    },
    // 允许关闭点击事件
    async allowCloseChange() {
      const data = {
        wkshopcode: this.$refs.tree.getCurrentKey(),
        calltypecode: this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code,
        enable: this.allowClose ? 'Y' : 'N'
      }
      await AnDengResponUserCloseSeave(data)
    },
    // 树形选中行切换点击
    currentTreeChange(val) {
      this.getAnDengResponUserSearch(this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].name)
    },
    // 响应人员点击
    responseUserClick() {
      const loading = this.$loading({
        lock: true,
        text: '正在加载数据，请稍等...',
        spinner: 'el-icon-loading',
        customClass: 'osloading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      const data = {
        wkshopcode: this.$refs.tree.getCurrentKey(),
        calltypecode: this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code
      }
      AnDengDigoResponUserSearch(data).then(res => {
        if (res.code === '200') {
          this.userTree.push({
            username: '全部',
            children: res.data
          })

          res.data.forEach(item => {
            if (item.flag === 'Y') {
              this.treeCheckedKey.push(item.usercode)
              this.userDialogArr.push(item)
            }
          })

          setTimeout(() => {
            loading.close()
            this.userDialogVisible = true

            this.$nextTick(() => {
              this.$refs.userTree.setCheckedKeys(this.treeCheckedKey)
            })
          }, 1000)
        }
      })
    },
    handleUserClose() {
      this.userTree = []
      this.userDialogArr = []
      this.treeCheckedKey = []
    },
    dialogVisibleUserCancel() {
      this.userDialogVisible = false
    },
    async dialogVisibleUserConfirm() {
      const data = []

      this.$refs.userTree.getCheckedKeys().forEach(i => {
        // console.log(i)
        if (i !== undefined) {
          data.push({
            code: i
          })
        }
      })
      this.$store.state.app.buttonIsDisabled = true
      const res = await AnDengDigoResponUserSeave(this.$refs.tree.getCurrentKey(), this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].code, this.allowClose ? 'Y' : 'N', data)
      if (res.code === '200') {
        // this.$refs.userTree.setCheckedKeys([])
        this.userDialogVisible = false
        this.$message.success('保存成功！')
        this.$store.state.app.buttonIsDisabled = false
        await this.getAnDengResponUserSearch(this.AnDengTypeArr[parseInt(this.$refs.elTabs.currentName)].name)
      }
    },
    userTagClose(val, tag) {
      this.treeCheckedKey = this.treeCheckedKey.filter(i => i !== tag.usercode)
      this.userDialogArr = this.userDialogArr.filter(i => i.usercode !== tag.usercode)
      this.$refs.userTree.setCheckedKeys(this.treeCheckedKey)
    },
    userTreeCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
      // console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, 6)
      this.treeCheckedKey = checkedKeys.filter(i => i !== undefined)
      this.userTree[0].children.forEach(i => {
        if (this.treeCheckedKey.includes(i.usercode)) {
          i.flag = 'Y'
        } else {
          i.flag = 'N'
        }
      })
      this.userDialogArr = this.userTree[0].children.filter(i => i.flag === 'Y')
    },
    // handleCheckChange(data) {
    //   if (data.children) {
    //     data.children.forEach((item) => {
    //       const node = this.$refs.userTree.getNode(item)
    //       if (!node.visible) {
    //         this.$refs.userTree.setChecked(item, false)
    //       }
    //     })
    //   }
    // },
    // 过滤节点
    filterUserNode(value, data) {
      if (!value) return true
      return data.username.indexOf(value) !== -1
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.contentHeight = this.mainHeight - 142
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    }

  }
}
</script>

<!--本页面单独样式-->
<style lang="scss" scoped>
$main_color: #42b983;
.body {
  display: flex;
  flex-direction: row;
}

.body_left {
  width: 360px;
  background-color: #fff;
  margin: 10px 0;
  padding: 10px;
  flex-direction: column;
}

.body_right {
  width: 100%;
  background-color: #fff;
  margin: 10px 0 10px 10px;
}

.pane_top {
  background-color: #fafafa;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  margin-bottom: 20px;

  .bar {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    //background-color: $main_color;
    margin-right: 10px;
  }
}

.pane_content {
  background-color: #fafafa;
  padding: 10px;
  min-height: 400px;
}

.body_left_tree {
  ::v-deep .is-current > .el-tree-node__content {
    background-color: #dedcdc !important;
    font-weight: bolder;
    //color: #FFFFFF;
  }
}

::v-deep .el-button--text {
  font-size: 14px;
  cursor: pointer;
}
</style>

 src/views/basicSettings/meterPrice.vue

@@ -1,707 +1,712 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">



      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <!--        <el-button v-waves icon="el-icon-download" @click=" ">导入</el-button>-->

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="产品名称/编码" style=" display: flex;">

              <el-select

                v-model="form.partcode"

                filterable

                :popper-append-to-body="false"

                style="width: 200px"

                placeholder="请选择"



                @change="partChange"

              >

                <!--                @focus="getPartSelect"-->

                <el-option

                  v-for="item in partArr"

                  :key="item.partcode"

                  :label="item.partname+'/'+item.partcode"

                  :value="item.partcode"

                />

              </el-select>

            </el-form-item>

            <el-form-item

              v-if="mesSetting.route"

              label="工艺路线"

              style="display: flex;"

            >

              <el-select

                v-model="form.routecode"

                filterable

                :disabled="form.partcode===''"

                :popper-append-to-body="false"

                style="width: 200px"

                placeholder="请选择"

                @change="routeChange"

              >

                <el-option

                  v-for="item in routeArr"

                  :key="item.route_code"

                  :label="item.route_name"

                  :value="item.route_code"

                />

              </el-select>

            </el-form-item>

            <el-form-item label="关联工序" style=" display: flex;">

              <el-select

                v-model="form.stepcode"

                :disabled="mesSetting.route?form.routecode==='':form.partcode===''"

                :popper-append-to-body="false"

                style="width: 200px"

                placeholder="请选择"

              >

                <el-option

                  v-for="item in stepArr"

                  :key="item.step_code"

                  :label="item.step_name"

                  :value="item.step_code"

                />

              </el-select>

            </el-form-item>



            <!--按工序-->

            <!--            <el-form-item-->

            <!--              v-if="!mesSetting.route"-->

            <!--              label="工艺路线"-->

            <!--              style="display: flex;"-->

            <!--            >-->

            <!--              <el-select-->

            <!--                v-model="form.routecode"-->

            <!--                filterable-->

            <!--                :disabled="form.partcode===''"-->

            <!--                :popper-append-to-body="false"-->

            <!--                style="width: 200px"-->

            <!--                placeholder="请选择"-->

            <!--                @change="routeChange"-->

            <!--              >-->

            <!--                <el-option-->

            <!--                  v-for="item in routeArr"-->

            <!--                  :key="item.route_code"-->

            <!--                  :label="item.route_name"-->

            <!--                  :value="item.route_code"-->

            <!--                />-->

            <!--              </el-select>-->

            <!--            </el-form-item>-->



          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

        />

      </div>



      <div class="elTableDiv">

        <!--        <TableColumnSettings-->

        <!--          :list1="tableColumnSettingsArray"-->

        <!--          @tableColumnUpdate="tableColumnUpdate"-->

        <!--        />-->

        <el-table

          ref="tableDataRef"

          :key="tableTimeStampArrayKey"

          class="tableFixed"

          :data="tableData"

          :height="tableHeight"

          border

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >



          <el-table-column

            v-for="item in tableColumnSettingsArray"

            v-if="item.show"

            :key="item.id"

            :sortable="item.sortable"

            :prop="item.prop"

            :min-width="item.minWidth"

            :label="item.label"

            :width="item.width"

            show-tooltip-when-overflow

            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"

          >

            <template slot-scope="{row}">

              <div v-if="!row[item.prop]">/</div>

              <div v-else-if="item.prop==='eqp_value'||item.prop==='stand_value'">

                {{ row[item.prop] }} 秒

              </div>

              <div v-else>{{ row[item.prop] }}</div>

            </template>

          </el-table-column>



          <el-table-column

            label="操作"

            fixed="right"

            width="120"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i

                    :style="{color:$store.state.settings.theme}"

                    class="el-icon-edit-outline"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" @click="del(row)" />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes"

        popper-class="select_bottom"

        @pagination="getBeatRateSearch"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="1100px"

      top="15vh"

      :close-on-click-modal="false"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :model="dialogForm" label-width="100px">

        <div style="display: flex;align-items: center">

          <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" style="margin-top: -20px" />

          <el-form-item prop="partcode" label="产品名称/编码">

            <el-select

              v-show="operation==='add'"

              v-model="dialogForm.partcode"

              filterable

              style="width: 220px"

              placeholder="请选择"

              :popper-append-to-body="false"

              @change="partDialogChange"

            >

              <!--              @focus="getPartSelect2"-->

              <el-option

                v-for="item in partArr2"

                :key="item.partcode"

                :label="item.partname+'/'+item.partcode"

                :value="item.partcode"

              />

            </el-select>

            <el-input

              v-show="operation!=='add'"

              v-model="editPartName"

              disabled

              style="width: 220px"

            />

          </el-form-item>

          <el-form-item v-if="mesSetting.route" prop="routecode" label="工艺路线">

            <el-select

              v-show="operation==='add'"

              v-model="dialogForm.routecode"

              style="width: 220px"

              filterable

              :disabled="dialogForm.partcode===''"

              placeholder="请选择"

              :popper-append-to-body="false"

              @change="routeDialogChange"

            >

              <el-option

                v-for="item in routeDialogArr"

                :key="item.route_code"

                :label="item.route_name"

                :value="item.route_code"

              />

            </el-select>

            <el-input

              v-show="operation!=='add'"

              v-model="editRouteName"

              disabled

              style="width: 220px"

            />

          </el-form-item>

        </div>

      </el-form>



      <el-table

        :data="stepDialogArr"

        style="width: 100%"

        height="300"

        border

        :header-cell-style="this.$headerCellStyle"

        :cell-style="this.$cellStyle"

        :row-class-name="tableRowClassName"

      >

        <el-table-column

          prop="step_seq"

          label="工序顺序"

          width="100"

        />

        <el-table-column

          prop="step_code"

          label="工序编码"

          width="200"

        />

        <el-table-column

          prop="step_name"

          label="工序名称"

          width="200"

        />

        <el-table-column

          prop="unprice"

          label="工序工价"

        >

          <template slot-scope="{row}">

            <el-input v-model="row.unprice" oninput="value=value.replace(/[^0-9.]/g,'')" />

          </template>

        </el-table-column>

      </el-table>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">返 回</el-button>

          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import {

  BeatRateSearch, DeleteBeatRate,

  PartSelect,

  PartSelectRpute,

  RouteSelectStep, SaveBeatRate

} from '@/api/basicSettings'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import TableColumnSettings from '@/components/TableColumnSettings'



export default {

  name: 'MeterPrice',

  components: {

    Pagination, TableColumnSettings

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mesSetting: JSON.parse(localStorage.getItem('mesSetting')),

      mainHeight: 0,

      tableHeight: 0,

      form: {

        partcode: '', // 产品编码

        routecode: '', // 工艺路线编码

        stepcode: '', // 工序编码



        prop: 'partcode', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      partArr: [], // 产品集合

      partArr2: [], // 产品集合对话框

      routeArr: [], // 工艺路线

      stepArr: [], // 工序



      total: 10,

      tableData: [],

      tableColumnSettingsArray: [

        // { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示

        { minWidth: 25, width: 50, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom

        {

          minWidth: 110,

          width: false,

          prop: 'partcode',

          label: '产品编码',

          id: 3,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'partname',

          label: '产品名称',

          id: 4,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'partspec',

          label: '产品规格',

          id: 5,

          show: true,

          fixed: false,

          sortable: true

        },

        // {

        //   minWidth: 110,

        //   width: false,

        //   prop: 'wksp_code',

        //   label: '生产车间编码',

        //   id: 6,

        //   show: false,

        //   fixed: false,

        //   sortable: true

        // },

        // {

        //   minWidth: false,

        //   width: 110,

        //   prop: 'wksp_name',

        //   label: '生产车间',

        //   id: 7,

        //   show: true,

        //   fixed: false,

        //   sortable: true

        // },

        {

          minWidth: 110,

          width: false,

          prop: 'route_code',

          label: '工艺路线编码',

          id: 8,

          show: false,

          fixed: false,

          sortable: true

        }, {

          minWidth: 110,

          width: false,

          prop: 'route_name',

          label: '工艺路线',

          id: 9,

          show: true,

          fixed: false,

          sortable: true

        }, {

          minWidth: 110,

          width: false,

          prop: 'stepcode',

          label: '工序编码',

          id: 10,

          show: false,

          fixed: false,

          sortable: true

        }, {

          minWidth: 110,

          width: false,

          prop: 'stepname',

          label: '工序名称',

          id: 11,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'unprice',

          label: '计件单价',

          id: 12,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 110,

          prop: 'lm_user',

          label: '创建人员',

          id: 13,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 160,

          prop: 'lm_date',

          label: '创建时间',

          id: 14,

          show: true,

          fixed: false,

          sortable: true

        }



      ],

      tableTimeStampArrayKey: new Date().getTime(), // 表格key

      dialogVisible: false,

      dialogForm: {

        partcode: '', //  产品编码

        routecode: '', //  工艺路线编码

        stepcode: '', //  工序编码



        wkshopcode: '', // 生产车间编码

        eqp_value: '', // 设备节拍

        stand_value: '', // 生产节拍

        cavity_qty: '', // 型腔数

        unprice: ''//  计件单价

      },

      routeDialogArr: [], // 工艺路线

      stepDialogArr: [], // 工序集合



      editPartName: '', // 编辑时产品名称

      editRouteName: '', // 编辑时工艺路线名称

      editStepName: '', // 编辑时加工工序名称

      operation: ''



    }

  },



  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.handleRequest()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    if (!this.mesSetting.route) {

      this.tableColumnSettingsArray = this.tableColumnSettingsArray.filter(i => i.prop !== 'route_name')

    }

  },

  methods: {

    tableColumnUpdate(val, isCopyTrue) {

      if (isCopyTrue) {

        this.tableColumnSettingsArray = val

      }

      this.tableTimeStampArrayKey = new Date().getTime()

      this.$refs.tableDataRef.doLayout()

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    },

    handleRequest() {

      this.getBeatRateSearch().then(res => {

        if (res.code === '200') {

          this.getPartSelect()

        }

      })

    },



    async getBeatRateSearch() {

      const res = await BeatRateSearch(this.form)

      this.tableData = res.data

      this.total = res.count

      return { code: res.code }

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getBeatRateSearch()

    },

    // 查询

    search() {

      this.getBeatRateSearch()

    },

    async getPartSelect() {

      const { data: res } = await PartSelect()

      this.partArr = res

    },

    async getPartSelect2() {

      const { data: res } = await PartSelect()

      this.partArr2 = res

    },

    async partChange(val) {

      const { data: res } = await PartSelectRpute({ partcode: val })

      if (this.mesSetting.route) {

        this.routeArr = res

        this.form.routecode = ''

      } else {

        this.stepArr = res

      }

      this.form.stepcode = ''

    },

    async routeChange(val) {

      const { data: res } = await RouteSelectStep({ partcode: this.form.partcode, routecode: val })

      this.stepArr = res

      this.form.stepcode = ''

    },



    // 重置

    reset() {

      this.form.partcode = ''

      this.form.routecode = ''

      this.form.stepcode = ''

      this.getBeatRateSearch()

    },

    async partDialogChange(val) {

      const { data: res } = await PartSelectRpute({ partcode: val })

      if (this.mesSetting.route) {

        this.routeDialogArr = res

        this.stepDialogArr = []

        this.dialogForm.routecode = ''

      } else {

        this.stepDialogArr = res

      }

    },

    async routeDialogChange(val) {

      const { data: res } = await RouteSelectStep({ partcode: this.dialogForm.partcode, routecode: val })

      this.stepDialogArr = res

    },



    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.getPartSelect2()

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true



      this.editPartName = row.partname

      this.editRouteName = row.route_name

      this.editStepName = row.stepname



      await this.partDialogChange(row.partcode)



      this.dialogForm.partcode = row.partcode

      if (this.mesSetting.route) {

        await this.routeDialogChange(row.route_code)

      }

      this.dialogForm.routecode = row.route_code

      this.dialogForm.stepcode = row.stepcode

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteBeatRate({ id: row.id }).then(res => {

          if (res.code === '200') {

            this.$message.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getBeatRateSearch()

          }

        })

      }).catch(() => {

        this.$message.info('已取消删除')

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.partcode = ''

      this.dialogForm.routecode = ''

      this.dialogForm.stepcode = ''



      this.dialogForm.wkshopcode = ''

      this.dialogForm.eqp_value = ''

      this.dialogForm.stand_value = ''

      this.dialogForm.cavity_qty = ''

      this.dialogForm.unprice = ''

      this.eqpTableLength = 0

      this.routeDialogArr = []

      this.stepDialogArr = []



      this.$refs.dialogForm.clearValidate()

      this.getBeatRateSearch()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          const children = []

          this.stepDialogArr.forEach(i => {

            children.push({

              'code': i.step_code,

              'name': i.step_name,

              'seq': i.step_seq,

              'isbott': i.isbott,

              'isend': i.isend,

              'unprice': i.unprice

            })

          })



          const data = [

            {

              'partcode': this.dialogForm.partcode,

              'defaultroute_code': this.dialogForm.routecode,

              'children': children

            }

          ]

          SaveBeatRate(data).then(res => {

            if (res.code === '200') {

              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.getBeatRateSearch()

            } else {

              this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },



    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 195

        if (window.innerHeight < 769) {

          this.tableHeight = this.tableHeight - 40

        }

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>



<style>

.el-table .custom-row {

  background: #f8f8fa;

}

</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <!--        <el-button v-waves icon="el-icon-download" @click=" ">导入</el-button>-->
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="产品名称/编码" style=" display: flex;">
              <el-select
                v-model="form.partcode"
                filterable
                :popper-append-to-body="false"
                style="width: 200px"
                placeholder="请选择"

                @change="partChange"
              >
                <!--                @focus="getPartSelect"-->
                <el-option
                  v-for="item in partArr"
                  :key="item.partcode"
                  :label="item.partname+'/'+item.partcode"
                  :value="item.partcode"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="mesSetting.route"
              label="工艺路线"
              style="display: flex;"
            >
              <el-select
                v-model="form.routecode"
                filterable
                :disabled="form.partcode===''"
                :popper-append-to-body="false"
                style="width: 200px"
                placeholder="请选择"
                @change="routeChange"
              >
                <el-option
                  v-for="item in routeArr"
                  :key="item.route_code"
                  :label="item.route_name"
                  :value="item.route_code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="关联工序" style=" display: flex;">
              <el-select
                v-model="form.stepcode"
                :disabled="mesSetting.route?form.routecode==='':form.partcode===''"
                :popper-append-to-body="false"
                style="width: 200px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in stepArr"
                  :key="item.step_code"
                  :label="item.step_name"
                  :value="item.step_code"
                />
              </el-select>
            </el-form-item>

            <!--按工序-->
            <!--            <el-form-item-->
            <!--              v-if="!mesSetting.route"-->
            <!--              label="工艺路线"-->
            <!--              style="display: flex;"-->
            <!--            >-->
            <!--              <el-select-->
            <!--                v-model="form.routecode"-->
            <!--                filterable-->
            <!--                :disabled="form.partcode===''"-->
            <!--                :popper-append-to-body="false"-->
            <!--                style="width: 200px"-->
            <!--                placeholder="请选择"-->
            <!--                @change="routeChange"-->
            <!--              >-->
            <!--                <el-option-->
            <!--                  v-for="item in routeArr"-->
            <!--                  :key="item.route_code"-->
            <!--                  :label="item.route_name"-->
            <!--                  :value="item.route_code"-->
            <!--                />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->

          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
        />
      </div>

      <div class="elTableDiv">
        <!--        <TableColumnSettings-->
        <!--          :list1="tableColumnSettingsArray"-->
        <!--          @tableColumnUpdate="tableColumnUpdate"-->
        <!--        />-->
        <el-table
          ref="tableDataRef"
          :key="tableTimeStampArrayKey"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >

          <el-table-column
            v-for="item in tableColumnSettingsArray"
            v-if="item.show"
            :key="item.id"
            :sortable="item.sortable"
            :prop="item.prop"
            :min-width="item.minWidth"
            :label="item.label"
            :width="item.width"
            show-tooltip-when-overflow
            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
          >
            <template slot-scope="{row}">
              <div v-if="!row[item.prop]">/</div>
              <div v-else-if="item.prop==='eqp_value'||item.prop==='stand_value'">
                {{ row[item.prop] }} 秒
              </div>
              <div v-else>{{ row[item.prop] }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            fixed="right"
            width="120"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    :style="{color:$store.state.settings.theme}"
                    class="el-icon-edit-outline"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" @click="del(row)" />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getBeatRateSearch"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="1100px"
      top="15vh"
      :close-on-click-modal="false"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :model="dialogForm" label-width="100px">
        <div style="display: flex;align-items: center">
          <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" style="margin-top: -20px" />
          <el-form-item prop="partcode" label="产品名称/编码">
            <el-select
              v-show="operation==='add'"
              v-model="dialogForm.partcode"
              filterable
              style="width: 220px"
              placeholder="请选择"
              :popper-append-to-body="false"
              @change="partDialogChange"
            >
              <!--              @focus="getPartSelect2"-->
              <el-option
                v-for="item in partArr2"
                :key="item.partcode"
                :label="item.partname+'/'+item.partcode"
                :value="item.partcode"
              />
            </el-select>
            <el-input
              v-show="operation!=='add'"
              v-model="editPartName"
              disabled
              style="width: 220px"
            />
          </el-form-item>
          <el-form-item v-if="mesSetting.route" prop="routecode" label="工艺路线">
            <el-select
              v-show="operation==='add'"
              v-model="dialogForm.routecode"
              style="width: 220px"
              filterable
              :disabled="dialogForm.partcode===''"
              placeholder="请选择"
              :popper-append-to-body="false"
              @change="routeDialogChange"
            >
              <el-option
                v-for="item in routeDialogArr"
                :key="item.route_code"
                :label="item.route_name"
                :value="item.route_code"
              />
            </el-select>
            <el-input
              v-show="operation!=='add'"
              v-model="editRouteName"
              disabled
              style="width: 220px"
            />
          </el-form-item>
        </div>
      </el-form>

      <el-table
        :data="stepDialogArr"
        style="width: 100%"
        height="300"
        border
        :header-cell-style="this.$headerCellStyle"
        :cell-style="this.$cellStyle"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="step_seq"
          label="工序顺序"
          width="100"
        />
        <el-table-column
          prop="step_code"
          label="工序编码"
          width="200"
        />
        <el-table-column
          prop="step_name"
          label="工序名称"
          width="200"
        />
        <el-table-column
          prop="unprice"
          label="工序工价"
        >
          <template slot-scope="{row}">
            <el-input v-model="row.unprice" oninput="value=value.replace(/[^0-9.]/g,'')" />
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">返 回</el-button>
          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  BeatRateSearch, DeleteBeatRate,
  PartSelect,
  PartSelectRpute,
  RouteSelectStep, SaveBeatRate
} from '@/api/basicSettings'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import TableColumnSettings from '@/components/TableColumnSettings'

export default {
  name: 'MeterPrice',
  components: {
    Pagination, TableColumnSettings
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mesSetting: JSON.parse(localStorage.getItem('mesSetting')),
      mainHeight: 0,
      tableHeight: 0,
      form: {
        partcode: '', // 产品编码
        routecode: '', // 工艺路线编码
        stepcode: '', // 工序编码

        prop: 'partcode', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      partArr: [], // 产品集合
      partArr2: [], // 产品集合对话框
      routeArr: [], // 工艺路线
      stepArr: [], // 工序

      total: 10,
      tableData: [],
      tableColumnSettingsArray: [
        // { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示
        { minWidth: 25, width: 50, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom
        {
          minWidth: 110,
          width: false,
          prop: 'partcode',
          label: '产品编码',
          id: 3,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'partname',
          label: '产品名称',
          id: 4,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'partspec',
          label: '产品规格',
          id: 5,
          show: true,
          fixed: false,
          sortable: true
        },
        // {
        //   minWidth: 110,
        //   width: false,
        //   prop: 'wksp_code',
        //   label: '生产车间编码',
        //   id: 6,
        //   show: false,
        //   fixed: false,
        //   sortable: true
        // },
        // {
        //   minWidth: false,
        //   width: 110,
        //   prop: 'wksp_name',
        //   label: '生产车间',
        //   id: 7,
        //   show: true,
        //   fixed: false,
        //   sortable: true
        // },
        {
          minWidth: 110,
          width: false,
          prop: 'route_code',
          label: '工艺路线编码',
          id: 8,
          show: false,
          fixed: false,
          sortable: true
        }, {
          minWidth: 110,
          width: false,
          prop: 'route_name',
          label: '工艺路线',
          id: 9,
          show: true,
          fixed: false,
          sortable: true
        }, {
          minWidth: 110,
          width: false,
          prop: 'stepcode',
          label: '工序编码',
          id: 10,
          show: false,
          fixed: false,
          sortable: true
        }, {
          minWidth: 110,
          width: false,
          prop: 'stepname',
          label: '工序名称',
          id: 11,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'unprice',
          label: '计件单价',
          id: 12,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 110,
          prop: 'lm_user',
          label: '创建人员',
          id: 13,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 160,
          prop: 'lm_date',
          label: '创建时间',
          id: 14,
          show: true,
          fixed: false,
          sortable: true
        }

      ],
      tableTimeStampArrayKey: new Date().getTime(), // 表格key
      dialogVisible: false,
      dialogForm: {
        partcode: '', //  产品编码
        routecode: '', //  工艺路线编码
        stepcode: '', //  工序编码

        wkshopcode: '', // 生产车间编码
        eqp_value: '', // 设备节拍
        stand_value: '', // 生产节拍
        cavity_qty: '', // 型腔数
        unprice: ''//  计件单价
      },
      routeDialogArr: [], // 工艺路线
      stepDialogArr: [], // 工序集合

      editPartName: '', // 编辑时产品名称
      editRouteName: '', // 编辑时工艺路线名称
      editStepName: '', // 编辑时加工工序名称
      operation: ''

    }
  },

  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.handleRequest()
  },
  created() {
    this.handleRequest()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    if (!this.mesSetting.route) {
      this.tableColumnSettingsArray = this.tableColumnSettingsArray.filter(i => i.prop !== 'route_name')
    }
  },
  methods: {
    tableColumnUpdate(val, isCopyTrue) {
      if (isCopyTrue) {
        this.tableColumnSettingsArray = val
      }
      this.tableTimeStampArrayKey = new Date().getTime()
      this.$refs.tableDataRef.doLayout()
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    },
    handleRequest() {
      this.getBeatRateSearch().then(res => {
        if (res.code === '200') {
          this.getPartSelect()
        }
      })
    },

    async getBeatRateSearch() {
      const res = await BeatRateSearch(this.form)
      this.tableData = res.data
      this.total = res.count
      return { code: res.code }
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getBeatRateSearch()
    },
    // 查询
    search() {
      this.getBeatRateSearch()
    },
    async getPartSelect() {
      const { data: res } = await PartSelect()
      this.partArr = res
    },
    async getPartSelect2() {
      const { data: res } = await PartSelect()
      this.partArr2 = res
    },
    async partChange(val) {
      const { data: res } = await PartSelectRpute({ partcode: val })
      if (this.mesSetting.route) {
        this.routeArr = res
        this.form.routecode = ''
      } else {
        this.stepArr = res
      }
      this.form.stepcode = ''
    },
    async routeChange(val) {
      const { data: res } = await RouteSelectStep({ partcode: this.form.partcode, routecode: val })
      this.stepArr = res
      this.form.stepcode = ''
    },

    // 重置
    reset() {
      this.form.partcode = ''
      this.form.routecode = ''
      this.form.stepcode = ''
      this.getBeatRateSearch()
    },
    async partDialogChange(val) {
      const { data: res } = await PartSelectRpute({ partcode: val })
      if (this.mesSetting.route) {
        this.routeDialogArr = res
        this.stepDialogArr = []
        this.dialogForm.routecode = ''
      } else {
        this.stepDialogArr = res
      }
    },
    async routeDialogChange(val) {
      const { data: res } = await RouteSelectStep({ partcode: this.dialogForm.partcode, routecode: val })
      this.stepDialogArr = res
    },

    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.getPartSelect2()
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      this.editPartName = row.partname
      this.editRouteName = row.route_name
      this.editStepName = row.stepname

      await this.partDialogChange(row.partcode)

      this.dialogForm.partcode = row.partcode
      if (this.mesSetting.route) {
        await this.routeDialogChange(row.route_code)
      }
      this.dialogForm.routecode = row.route_code
      this.dialogForm.stepcode = row.stepcode
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteBeatRate({ id: row.id }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getBeatRateSearch()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.partcode = ''
      this.dialogForm.routecode = ''
      this.dialogForm.stepcode = ''

      this.dialogForm.wkshopcode = ''
      this.dialogForm.eqp_value = ''
      this.dialogForm.stand_value = ''
      this.dialogForm.cavity_qty = ''
      this.dialogForm.unprice = ''
      this.eqpTableLength = 0
      this.routeDialogArr = []
      this.stepDialogArr = []

      this.$refs.dialogForm.clearValidate()
      this.getBeatRateSearch()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const children = []
          this.stepDialogArr.forEach(i => {
            children.push({
              'code': i.step_code,
              'name': i.step_name,
              'seq': i.step_seq,
              'isbott': i.isbott,
              'isend': i.isend,
              'unprice': i.unprice
            })
          })

          const data = [
            {
              'partcode': this.dialogForm.partcode,
              'defaultroute_code': this.dialogForm.routecode,
              'children': children
            }
          ]
          SaveBeatRate(data).then(res => {
            if (res.code === '200') {
              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.getBeatRateSearch()
            } else {
              this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },

    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 195
        if (window.innerHeight < 769) {
          this.tableHeight = this.tableHeight - 40
        }
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

<style>
.el-table .custom-row {
  background: #f8f8fa;
}
</style>

 src/views/basicSettings/organizationList.vue

@@ -1,440 +1,445 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="组织编码" style=" display: flex;">

              <el-input v-model="form.storg_code" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="组织名称" style=" display: flex;">

              <el-input v-model="form.storg_name" placeholder="请输入" style="width: 200px" />

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="getSTorgData">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

          style="height:5px"

        >

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseout'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

          <!--            @mouseenter="mouseHoverType=$event.type"-->

          <!--          />-->

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseenter'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

          <!--            @click="isExpandForm=!isExpandForm"-->

          <!--            @mouseout="mouseHoverType=$event.type"-->

          <!--          />-->

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="tableHeight+'px'"

          border

          row-class-name="custom-row"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          row-key="torg_code"

          default-expand-all

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >

          <!--          <el-table-column-->

          <!--            prop="rowNum"-->

          <!--            width="120"-->

          <!--            fixed-->

          <!--            label="序号"-->

          <!--          />-->

          <el-table-column

            prop="torg_code"

            label="组织编码"

            sortable="custom"

          />

          <el-table-column

            prop="torg_name"

            label="组织名称"

            sortable="custom"

          />

          <el-table-column

            prop="status"

            label="状态"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>

              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>

            </template>

          </el-table-column>

          <el-table-column

            prop="username"

            label="创建人员"

            sortable="custom"

          />

          <el-table-column

            prop="lm_date"

            label="创建时间"

            width="160"

            sortable="custom"

          />

          <el-table-column

            label="操作"

            width="120"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i

                    v-if="row.leve!==0"

                    class="el-icon-edit-outline"

                    :style="{color:$store.state.settings.theme}"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i

                    v-if="row.leve!==0"

                    class="el-icon-delete"

                    :style="{color:$store.state.settings.theme}"

                    @click="del(row)"

                  />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <!--      <pagination-->

      <!--        :total="total"-->

      <!--        :page.sync="form.page"-->

      <!--        :limit.sync="form.rows"-->

      <!--        align="right"-->

      <!--        layout="total,prev, pager, next,sizes,jumper"-->

      <!--        popper-class="select_bottom"-->

      <!--        @pagination="getSTorgData"-->

      <!--      />-->

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

        <el-form-item label="组织编码" prop="OrganCode">

          <el-input v-model="dialogForm.OrganCode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="组织名称" prop="OrganName">

          <el-input v-model="dialogForm.OrganName" style="width: 200px" />

        </el-form-item>

        <el-form-item label="所属组织" prop="storgcode">

          <el-cascader

            ref="cascader"

            v-model="dialogForm.storgcode"

            :options="cascaderOptions"

            filterable

            :props="defaultProps"

            :show-all-levels="false"

            @change="cascaderChange"

          />

        </el-form-item>

        <el-form-item required label="组织状态">

          <el-radio-group v-model="dialogForm.status">

            <el-radio label="Y">正常</el-radio>

            <el-radio label="N">停用</el-radio>

          </el-radio-group>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import {

  AddUpdateOrganization,

  DeleteOrganization,

  STorgData

} from '@/api/basicSettings'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import arrayToTree from 'array-to-tree'

import { PrentOrganization } from '@/api/GeneralBasicData'



export default {

  name: 'OrganizationList',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,

      form: {

        storg_code: '', // 组织架构编码

        storg_name: '' // 组织架构名称

        // prop: 'lm_date', // 排序字段

        // order: 'desc', // 排序字段

        // page: 1, // 第几页

        // rows: 20 // 每页多少条

      },

      total: 10,

      tableData: [],

      dialogVisible: false,

      dialogForm: {

        OrganCode: '', // 组织编码

        OrganName: '', // 组织名称

        leve: 0, // 层级编码

        storgcode: '', // 父级编码

        parent_id: '', // 原pid

        torg_seq: '', // 排序

        status: 'Y'// 状态

      },

      operation: '',

      dialogFormRules: {

        OrganCode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        OrganName: [

          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }

        ],

        storgcode: [

          { required: true, message: '请选择所属组织', trigger: ['blur', 'change'] }

        ]

      },

      defaultProps: {

        checkStrictly: true,

        expandTrigger: 'hover',

        value: 'torg_code',

        label: 'torg_name'

      },

      Options: [],

      cascaderOptions: []



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getSTorgData()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    // 组织架构大列表查询

    async getSTorgData() {

      const res = await STorgData(this.form)

      this.tableData = arrayToTree(res.data, {

        parentProperty: 'parent_id',

        customID: 'torg_code',

        childrenProperty: 'children'

      })

      this.total = res.count

    },

    // 组织架构级联选择器

    async getPrentOrganization() {

      const { data: res } = await PrentOrganization()

      this.Options = res

      this.cascaderOptions = arrayToTree(res, {

        parentProperty: 'parent_id',

        customID: 'torg_code',

        childrenProperty: 'children'

      })

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getSTorgData()

    },

    // 重置

    reset() {

      this.form.storg_code = ''

      this.form.storg_name = ''

      this.getSTorgData()

    },

    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

      this.getPrentOrganization()

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'

      await this.getPrentOrganization()

      this.cascaderOptions = this.filterChildren(this.cascaderOptions, row.torg_code)

      this.$nextTick(() => {

        this.dialogForm.OrganCode = row.torg_code

        this.dialogForm.OrganName = row.torg_name

        this.dialogForm.leve = parseFloat(row.leve)

        this.dialogForm.torg_seq = row.torg_seq

        this.dialogForm.status = row.status

        this.dialogForm.storgcode = this.findParent([], row.parent_id, this.cascaderOptions).reverse()

        this.dialogForm.parent_id = row.parent_id

      })

    },

    filterChildren(treeData, code) {

      treeData.forEach(item => {

        if (code.split(',').includes(item.torg_code)) {

          item.disabled = true

          if (item.children && item.children.length > 0) {

            this.filterChildren(item.children, item.children.map(it => it.torg_code).join(','))

          }

        } else {

          if (item.children && item.children.length > 0) {

            this.filterChildren(item.children, code)

          }

        }

      })

      return treeData

    },

    // parents:用于返回的数组，childNode:要查询的节点，treeData：json树形数据

    findParent(parents, childNode, treeData) {

      // console.log(parents, childNode, treeData, 2)

      for (let i = 0; i < treeData.length; i++) {

        // 父节点查询条件

        if (treeData[i].torg_code === childNode) {

          // 如果找到结果,保存当前节点

          parents.push(treeData[i].torg_code)

          // 用当前节点再去原数据查找当前节点的父节点

          this.findParent(parents, treeData[i].parent_id, this.cascaderOptions)

          break

        } else {

          if (treeData[i].children instanceof Array) {

            //    没找到，遍历该节点的子节点

            this.findParent(parents, childNode, treeData[i].children)

          }

        }

      }

      return parents

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteOrganization({ orgcode: row.torg_code }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getSTorgData()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.OrganCode = ''

      this.dialogForm.OrganName = ''

      this.dialogForm.storgcode = ''

      this.dialogForm.parent_id = ''

      this.dialogForm.status = 'Y'

      this.dialogForm.leve = 0

      this.$refs.cascader.checkedValue = ''

      this.$refs.dialogForm.clearValidate()

    },

    cascaderChange(val) {

      const temp = this.Options.find(i => i.torg_code === val[val.length - 1])

      this.dialogForm.storgcode = val

      this.dialogForm.leve = parseFloat(temp.leve) + 1

      this.dialogForm.torg_seq = this.Options.filter(i => i.parent_id === val[val.length - 1]).length + 1

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          this.dialogForm.storgcode = this.dialogForm.storgcode[this.dialogForm.storgcode.length - 1]

          AddUpdateOrganization(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getSTorgData()

            } else {

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

              this.$store.state.app.buttonIsDisabled = false

            }

          })

        }

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 137

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="组织编码" style=" display: flex;">
              <el-input v-model="form.storg_code" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="组织名称" style=" display: flex;">
              <el-input v-model="form.storg_name" placeholder="请输入" style="width: 200px" />
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="getSTorgData">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          row-key="torg_code"
          default-expand-all
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <!--          <el-table-column-->
          <!--            prop="rowNum"-->
          <!--            width="120"-->
          <!--            fixed-->
          <!--            label="序号"-->
          <!--          />-->
          <el-table-column
            prop="torg_code"
            label="组织编码"
            sortable="custom"
          />
          <el-table-column
            prop="torg_name"
            label="组织名称"
            sortable="custom"
          />
          <el-table-column
            prop="status"
            label="状态"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>
              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            width="160"
            sortable="custom"
          />
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    v-if="row.leve!==0"
                    class="el-icon-edit-outline"
                    :style="{color:$store.state.settings.theme}"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    v-if="row.leve!==0"
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    @click="del(row)"
                  />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <!--      <pagination-->
      <!--        :total="total"-->
      <!--        :page.sync="form.page"-->
      <!--        :limit.sync="form.rows"-->
      <!--        align="right"-->
      <!--        layout="total,prev, pager, next,sizes,jumper"-->
      <!--        popper-class="select_bottom"-->
      <!--        @pagination="getSTorgData"-->
      <!--      />-->
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="组织编码" prop="OrganCode">
          <el-input v-model="dialogForm.OrganCode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="组织名称" prop="OrganName">
          <el-input v-model="dialogForm.OrganName" style="width: 200px" />
        </el-form-item>
        <el-form-item label="所属组织" prop="storgcode">
          <el-cascader
            ref="cascader"
            v-model="dialogForm.storgcode"
            :options="cascaderOptions"
            filterable
            :props="defaultProps"
            :show-all-levels="false"
            @change="cascaderChange"
          />
        </el-form-item>
        <el-form-item required label="组织状态">
          <el-radio-group v-model="dialogForm.status">
            <el-radio label="Y">正常</el-radio>
            <el-radio label="N">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  AddUpdateOrganization,
  DeleteOrganization,
  STorgData
} from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import arrayToTree from 'array-to-tree'
import { PrentOrganization } from '@/api/GeneralBasicData'

export default {
  name: 'OrganizationList',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        storg_code: '', // 组织架构编码
        storg_name: '' // 组织架构名称
        // prop: 'lm_date', // 排序字段
        // order: 'desc', // 排序字段
        // page: 1, // 第几页
        // rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        OrganCode: '', // 组织编码
        OrganName: '', // 组织名称
        leve: 0, // 层级编码
        storgcode: '', // 父级编码
        parent_id: '', // 原pid
        torg_seq: '', // 排序
        status: 'Y'// 状态
      },
      operation: '',
      dialogFormRules: {
        OrganCode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        OrganName: [
          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }
        ],
        storgcode: [
          { required: true, message: '请选择所属组织', trigger: ['blur', 'change'] }
        ]
      },
      defaultProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'torg_code',
        label: 'torg_name'
      },
      Options: [],
      cascaderOptions: []

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getSTorgData()
  },
  created() {
    this.getSTorgData()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 组织架构大列表查询
    async getSTorgData() {
      const res = await STorgData(this.form)
      this.tableData = arrayToTree(res.data, {
        parentProperty: 'parent_id',
        customID: 'torg_code',
        childrenProperty: 'children'
      })
      this.total = res.count
    },
    // 组织架构级联选择器
    async getPrentOrganization() {
      const { data: res } = await PrentOrganization()
      this.Options = res
      this.cascaderOptions = arrayToTree(res, {
        parentProperty: 'parent_id',
        customID: 'torg_code',
        childrenProperty: 'children'
      })
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getSTorgData()
    },
    // 重置
    reset() {
      this.form.storg_code = ''
      this.form.storg_name = ''
      this.getSTorgData()
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
      this.getPrentOrganization()
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'
      await this.getPrentOrganization()
      this.cascaderOptions = this.filterChildren(this.cascaderOptions, row.torg_code)
      this.$nextTick(() => {
        this.dialogForm.OrganCode = row.torg_code
        this.dialogForm.OrganName = row.torg_name
        this.dialogForm.leve = parseFloat(row.leve)
        this.dialogForm.torg_seq = row.torg_seq
        this.dialogForm.status = row.status
        this.dialogForm.storgcode = this.findParent([], row.parent_id, this.cascaderOptions).reverse()
        this.dialogForm.parent_id = row.parent_id
      })
    },
    filterChildren(treeData, code) {
      treeData.forEach(item => {
        if (code.split(',').includes(item.torg_code)) {
          item.disabled = true
          if (item.children && item.children.length > 0) {
            this.filterChildren(item.children, item.children.map(it => it.torg_code).join(','))
          }
        } else {
          if (item.children && item.children.length > 0) {
            this.filterChildren(item.children, code)
          }
        }
      })
      return treeData
    },
    // parents:用于返回的数组，childNode:要查询的节点，treeData：json树形数据
    findParent(parents, childNode, treeData) {
      // console.log(parents, childNode, treeData, 2)
      for (let i = 0; i < treeData.length; i++) {
        // 父节点查询条件
        if (treeData[i].torg_code === childNode) {
          // 如果找到结果,保存当前节点
          parents.push(treeData[i].torg_code)
          // 用当前节点再去原数据查找当前节点的父节点
          this.findParent(parents, treeData[i].parent_id, this.cascaderOptions)
          break
        } else {
          if (treeData[i].children instanceof Array) {
            //    没找到，遍历该节点的子节点
            this.findParent(parents, childNode, treeData[i].children)
          }
        }
      }
      return parents
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteOrganization({ orgcode: row.torg_code }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getSTorgData()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.OrganCode = ''
      this.dialogForm.OrganName = ''
      this.dialogForm.storgcode = ''
      this.dialogForm.parent_id = ''
      this.dialogForm.status = 'Y'
      this.dialogForm.leve = 0
      this.$refs.cascader.checkedValue = ''
      this.$refs.dialogForm.clearValidate()
    },
    cascaderChange(val) {
      const temp = this.Options.find(i => i.torg_code === val[val.length - 1])
      this.dialogForm.storgcode = val
      this.dialogForm.leve = parseFloat(temp.leve) + 1
      this.dialogForm.torg_seq = this.Options.filter(i => i.parent_id === val[val.length - 1]).length + 1
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          this.dialogForm.storgcode = this.dialogForm.storgcode[this.dialogForm.storgcode.length - 1]
          AddUpdateOrganization(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getSTorgData()
            } else {
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
              this.$store.state.app.buttonIsDisabled = false
            }
          })
        }
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 137
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

 src/views/basicSettings/personList.vue

@@ -557,6 +557,9 @@
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getUserData()
    this.getPrentOrganization()
    this.getAllSelectData()
  },
  created() {
    this.getUserData()

 src/views/basicSettings/postList.vue

@@ -1,367 +1,372 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <el-button

          v-waves

          type="success"

          icon="el-icon-download"

          @click="$router.push('./../systemSetting/dataImport?fileCode=1')"

        >导入

        </el-button>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="岗位编码" style=" display: flex;">

              <el-input v-model="form.postcode" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="岗位名称" style=" display: flex;">

              <el-input v-model="form.postname" placeholder="请输入" style="width: 200px" />

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="getPostData">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

          style="height:5px"

        >

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseout'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

          <!--            @mouseenter="mouseHoverType=$event.type"-->

          <!--          />-->

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseenter'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

          <!--            @click="isExpandForm=!isExpandForm"-->

          <!--            @mouseout="mouseHoverType=$event.type"-->

          <!--          />-->

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="tableHeight+'px'"

          border

          row-class-name="custom-row"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >

          <el-table-column

            prop="rowNum"

            width="50"

            fixed

            label="序号"

          />

          <el-table-column

            prop="postcode"

            label="岗位编码"

            sortable="custom"

          />

          <el-table-column

            prop="postname"

            label="岗位名称"

            sortable="custom"

          />

          <el-table-column

            prop="status"

            label="状态"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>

              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>

            </template>

          </el-table-column>

          <el-table-column

            prop="description"

            label="描述"

            sortable="custom"

          >

            <template slot-scope="{row}">

              {{ row.description ? row.description : '/' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="username"

            label="创建人员"

            sortable="custom"

          />

          <el-table-column

            prop="lm_date"

            label="创建时间"

            width="160"

            sortable="custom"

          />

          <el-table-column

            label="操作"

            width="120"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i

                    v-if="row.leve!==0"

                    class="el-icon-edit-outline"

                    :style="{color:$store.state.settings.theme}"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i

                    v-if="row.leve!==0"

                    class="el-icon-delete"

                    :style="{color:$store.state.settings.theme}"

                    @click="del(row)"

                  />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes,jumper"

        popper-class="select_bottom"

        @pagination="getPostData"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

        <el-form-item label="岗位编码" prop="postcode">

          <el-input v-model="dialogForm.postcode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="岗位名称" prop="postname">

          <el-input v-model="dialogForm.postname" style="width: 200px" />

        </el-form-item>

        <el-form-item label="描述">

          <el-input

            v-model="dialogForm.description"

            type="textarea"

            style="width: 200px"

          />

        </el-form-item>

        <el-form-item required label="岗位状态">

          <el-radio-group v-model="dialogForm.status">

            <el-radio label="Y">正常</el-radio>

            <el-radio label="N">停用</el-radio>

          </el-radio-group>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import { AddUpdatePost, DeletePost, PostData } from '@/api/basicSettings'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'



export default {

  name: 'PersonList',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,

      form: {

        postcode: '', // 组织架构编码

        postname: '', // 组织架构名称

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      total: 10,

      tableData: [],

      dialogVisible: false,

      dialogForm: {

        postcode: '', // 组织编码

        postname: '', // 组织名称

        description: '', // 描述

        status: 'Y'// 状态

      },

      operation: '',

      dialogFormRules: {

        postcode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        postname: [

          { required: true, message: '请输入岗位名称', trigger: ['blur', 'change'] }

        ]

      }



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getPostData()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    // 组织架构大列表查询

    async getPostData() {

      const res = await PostData(this.form)

      this.tableData = res.data

      this.total = res.count

    },



    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getPostData()

    },

    // 重置

    reset() {

      this.form.postcode = ''

      this.form.postname = ''

      this.getPostData()

    },

    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'



      this.$nextTick(() => {

        this.dialogForm.postcode = row.postcode

        this.dialogForm.postname = row.postname

        this.dialogForm.description = row.description

        this.dialogForm.status = row.status

      })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeletePost({ postcode: row.postcode }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getPostData()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.postcode = ''

      this.dialogForm.postname = ''

      this.dialogForm.status = 'Y'

      this.dialogForm.description = ''

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          AddUpdatePost(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getPostData()

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 200

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button
          v-waves
          type="success"
          icon="el-icon-download"
          @click="$router.push('./../systemSetting/dataImport?fileCode=1')"
        >导入
        </el-button>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="岗位编码" style=" display: flex;">
              <el-input v-model="form.postcode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="岗位名称" style=" display: flex;">
              <el-input v-model="form.postname" placeholder="请输入" style="width: 200px" />
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="getPostData">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="rowNum"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="postcode"
            label="岗位编码"
            sortable="custom"
          />
          <el-table-column
            prop="postname"
            label="岗位名称"
            sortable="custom"
          />
          <el-table-column
            prop="status"
            label="状态"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>
              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.description ? row.description : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            width="160"
            sortable="custom"
          />
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    v-if="row.leve!==0"
                    class="el-icon-edit-outline"
                    :style="{color:$store.state.settings.theme}"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    v-if="row.leve!==0"
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    @click="del(row)"
                  />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getPostData"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="岗位编码" prop="postcode">
          <el-input v-model="dialogForm.postcode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="岗位名称" prop="postname">
          <el-input v-model="dialogForm.postname" style="width: 200px" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="dialogForm.description"
            type="textarea"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item required label="岗位状态">
          <el-radio-group v-model="dialogForm.status">
            <el-radio label="Y">正常</el-radio>
            <el-radio label="N">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { AddUpdatePost, DeletePost, PostData } from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'

export default {
  name: 'PersonList',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        postcode: '', // 组织架构编码
        postname: '', // 组织架构名称
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        postcode: '', // 组织编码
        postname: '', // 组织名称
        description: '', // 描述
        status: 'Y'// 状态
      },
      operation: '',
      dialogFormRules: {
        postcode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        postname: [
          { required: true, message: '请输入岗位名称', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getPostData()
  },
  created() {
    this.getPostData()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 组织架构大列表查询
    async getPostData() {
      const res = await PostData(this.form)
      this.tableData = res.data
      this.total = res.count
    },

    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getPostData()
    },
    // 重置
    reset() {
      this.form.postcode = ''
      this.form.postname = ''
      this.getPostData()
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'

      this.$nextTick(() => {
        this.dialogForm.postcode = row.postcode
        this.dialogForm.postname = row.postname
        this.dialogForm.description = row.description
        this.dialogForm.status = row.status
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeletePost({ postcode: row.postcode }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getPostData()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.postcode = ''
      this.dialogForm.postname = ''
      this.dialogForm.status = 'Y'
      this.dialogForm.description = ''
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          AddUpdatePost(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getPostData()
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 200
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

 src/views/basicSettings/powerDivider.vue

@@ -1,548 +1,553 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">



      <div

        class="elTableDiv"

      >



        <div style="width: 300px;background:#fff">



          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">

            <div style="display: flex;">

              <div

                style="width: 5px;height: 100%;border-radius: 5px;"

                :style="{background:$store.state.settings.theme}"

              />

              <div style="margin-left: 8px;">角色名称</div>

            </div>



            <!--            <div style="margin-right:10px">-->

            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" @click="rolePlusClick" />-->

            <!--            </div>-->



          </div>



          <el-tree

            ref="treeLeftRef"

            style="padding: 10px;overflow: auto"

            :style="{height:(tableHeight-20)+'px'}"

            :data="treeLeft"

            node-key="code"

            highlight-current

            :props="defaultPropsLeft"

            :default-expand-all="true"

            :expand-on-click-node="false"

            @node-click="treeLeftNodeClick"

          />

          <!--          draggable-->

          <!--          :allow-drop="treeLeftAllowDrop"-->

        </div>



        <div

          style="margin-left: 10px;width: calc(100% - 300px);position: relative"

        >



          <el-button

            style="position: absolute;right: 15px;z-index:1;top:3px"

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="saveClick"

          >保 存

          </el-button>



          <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">

            <el-tab-pane label="PC端" name="PC">

              <div style="display: flex;">

                <div

                  ref="scrollLeft"

                  style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;

                  overflow-y: auto;overflow-x:hidden;"

                  :style="{height:(tableHeight-40)+'px'}"

                  @scroll="scrollLeftScroll()"

                  @mouseover="isScroll='left'"

                >

                  <div style=" ">

                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 菜单权限

                  </div>



                  <el-tree

                    ref="treeCenterPCRef"

                    style="padding-top: 10px;"

                    :data="treeCenter"

                    highlight-current

                    :props="defaultPropsCenter"

                    show-checkbox

                    node-key="menucode"

                    :default-expand-all="true"

                    @check-change="handleTreeCenterCheckChange"

                    @check="handleTreeCenterCheck"

                    @node-click="getLeftTreeNode"

                  />

                </div>

                <!--                <div-->

                <!--                  ref="scrollCenter"-->

                <!--                  style="width: calc(100% - 260px );padding-left: 10px;overflow-y: auto;"-->

                <!--                  :style="{height:(tableHeight-40)+'px'}"-->

                <!--                  @scroll="scrollCenterScroll()"-->

                <!--                  @mouseover="isScroll='center'"-->

                <!--                >-->

                <!--                  <div style=" ">-->

                <!--                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 按钮权限-->

                <!--                  </div>-->



                <!--                  <el-checkbox-->

                <!--                    v-model="buttonIsChecked"-->

                <!--                    style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"-->

                <!--                    @change=" handleCheckAllChange "-->

                <!--                  >全选-->

                <!--                  </el-checkbox>-->



                <!--                  <div v-if="treeCenter.length>0">-->

                <!--                    <div v-for="(item,index) in treeCenter[0].children" :key="item.menucode">-->



                <!--                      <div-->

                <!--                        v-if="!item.buttoncodelist"-->

                <!--                        style="margin-left: 40px;height:26px;display: flex;"-->

                <!--                      />-->



                <!--                      <el-checkbox-group-->

                <!--                        v-for="it in item.children"-->

                <!--                        v-if="item.expanded"-->

                <!--                        :key="it.menucode"-->

                <!--                        v-model="it.buttonChecked"-->

                <!--                        style="margin-left: 40px;height:26px;display: flex;"-->

                <!--                        @change="val=>handleCheckedButtonChange(val,it.menucode,it.buttonChecked)"-->

                <!--                      >-->



                <!--                        <el-checkbox-->

                <!--                          v-for="i in it.buttoncodelist"-->

                <!--                          :key="i"-->

                <!--                          :label="i"-->

                <!--                          style="display:flex;align-items: center;"-->

                <!--                        />-->

                <!--                      </el-checkbox-group>-->



                <!--                    </div>-->



                <!--                  </div>-->



                <!--                </div>-->

              </div>

            </el-tab-pane>

            <el-tab-pane label="APP端" name="APP">

              <div style="display: flex;">

                <div

                  ref="scrollLeft"

                  style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;

                                overflow-y: auto;overflow-x:hidden;"

                  :style="{height:(tableHeight-40)+'px'}"

                  @scroll="scrollLeftScroll()"

                  @mouseover="isScroll='left'"

                >

                  <div style=" ">

                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 菜单权限

                  </div>



                  <el-tree

                    ref="treeCenterAPPRef"

                    style="padding-top: 10px;"

                    :data="treeCenter"

                    highlight-current

                    :props="defaultPropsCenter"

                    show-checkbox

                    node-key="menucode"

                    :default-expand-all="true"

                    @check-change="handleTreeCenterCheckChange"

                    @check="handleTreeCenterCheck"

                    @node-click="getLeftTreeNode"

                  />

                </div>

              </div>

            </el-tab-pane>

            <!--            <el-tab-pane label="工控端" name="工控端">工控端</el-tab-pane>-->

          </el-tabs>



        </div>



      </div>



    </div>



  </div>

</template>



<script>

import waves from '@/directive/waves'

import {

  RolePermissionSava,

  RolePermissionSearchRole,

  RolePermissionSearchRoleMenu,

  RolePermissionSearchRoleMenuButton

} from '@/api/basicSettings'

import arrayToTree from 'array-to-tree'



export default {

  name: 'PowerDivider',

  directives: { waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,



      treeLeft: [], // 左侧树

      treeCenter: [], // 中间树

      defaultPropsLeft: {

        children: 'roles',

        label: 'name'

      },

      defaultPropsCenter: {

        children: 'children',

        label: 'menuname'

      },

      activeName: 'PC',



      buttonIsChecked: false,



      menuCheckedCodeArr: [], // 菜单权限数组选中的



      allButtonData: [], // 所有菜单对应的按钮权限加数据权限



      isScroll: 'left',



      ButtonData: JSON.parse(localStorage.getItem('ButtonData'))



    }

  },



  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {



  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    this.getRolePermissionSearchRole()

  },

  methods: {



    // 获取角色权限查询角色

    async getRolePermissionSearchRole() {

      const { data: res } = await RolePermissionSearchRole()

      this.treeLeft = res



      let rolecode = ''

      if (window.location.hash.indexOf('?') !== -1) {

        rolecode = window.location.hash.split('?')[1].split('=')[1]

      }



      if (res && res.length > 0) {

        this.$nextTick(() => { // 默认选中第一个

          this.$refs.treeLeftRef.setCurrentKey(rolecode || res[0].code) // 默认选中节点第一个

        })



        await this.getRolePermissionSearchRoleMenuButton(rolecode || res[0].code)// 用于数据回显



        await this.getRolePermissionSearchRoleMenu(rolecode || res[0].code)// 用于渲染页面

      } else {

        this.$notify.error('请先建相对应的角色！')

      }

    },

    async tabClick() {

      this.treeCenter = []

      await this.getRolePermissionSearchRoleMenuButton(this.$refs.treeLeftRef.getCurrentKey())// 用于数据回显

      await this.getRolePermissionSearchRoleMenu(this.$refs.treeLeftRef.getCurrentKey())// 用于渲染页面

    },



    // 获取菜单权限对应的按钮

    async getRolePermissionSearchRoleMenuButton(rolecode) {

      const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode, type: this.activeName })

      this.allButtonData = res.length > 0 ? JSON.parse(res[0].jsondate) : []

    },

    // 获取菜单权限

    async getRolePermissionSearchRoleMenu(rolecode) {

      const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: this.activeName })



      // 拿到数组list转换成树形tree

      const result = arrayToTree(res, {

        parentProperty: 'parent_id',

        customID: 'menucode',

        childrenProperty: 'children'

      })



      this.treeCenter = [

        { menucode: '-1', menuname: '全部', children: result }

      ]



      this.treeCenter[0].children.sort((a, b) => a.menu_seq - b.menu_seq)

      this.treeCenter[0].children.forEach(item => {

        if (item.children && item.children.length) {

          item.children.forEach(it => {

            it.buttoncodelist = it.buttoncodelist !== '' && it.buttoncodelist !== null ? it.buttoncodelist.split(',') : []

            if (it.buttoncodelist && it.buttoncodelist.length > 0) {

              it.buttoncodelist = this.ButtonData.filter(j =>

                it.buttoncodelist.includes(j.buttoncode)

              )



              it.buttoncodelist = it.buttoncodelist.map(j => j.buttonname)

            }

          })



          item.children.sort((a, b) => a.menu_seq - b.menu_seq)



          item.expanded = true

        }

      })



      this.handleData()// 处理数据回显

    },

    // 处理组合数据

    handleData() {

      this.menuCheckedCodeArr = this.allButtonData.map(i => i.menucode)

      this.$nextTick(() => {

        if (this.activeName === 'PC') {

          this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)

        }

        if (this.activeName === 'APP') {

          this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)

        }

      })



      this.treeCenter[0].children.forEach(item => {

        if (item.children && item.children.length) {

          item.children.forEach(it => {

            let temp = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].buttoncode : []

            temp = temp.length > 0 ? temp.split(',') : []

            it.buttonChecked = [] // 数据回显

            this.ButtonData.forEach(j => {

              if (temp.includes(j.buttoncode)) {

                it.buttonChecked.push(j.buttonname)

              }

            })

          })

        }

      })



      this.handleCheckedButtonChange('', '', '', true)

      // this.$forceUpdate()

    },



    // 左边滚动条滑动时

    scrollLeftScroll() {

      if (this.isScroll === 'left') {

        this.$refs.scrollCenter.scrollTop = this.$refs.scrollLeft.scrollTop

      }

    },

    // 中间边滚动条滑动时

    scrollCenterScroll() {

      if (this.isScroll === 'center') {

        this.$refs.scrollLeft.scrollTop = this.$refs.scrollCenter.scrollTop

      }

    },



    // 全选改变

    handleCheckAllChange(val) {

      let checkedKeys

      if (this.activeName === 'PC') {

        checkedKeys = this.$refs.treeCenterPCRef.getCheckedKeys()

      }

      if (this.activeName === 'APP') {

        checkedKeys = this.$refs.treeCenterAPPRef.getCheckedKeys()

      }



      if (val) {

        this.treeCenter[0].children.forEach(item => {

          if (item.children && item.children.length) {

            item.children.forEach(it => {

              if (checkedKeys.includes(it.menucode)) {

                it.buttonChecked = it.buttoncodelist

              }

            })

          }

        })

      } else {

        this.treeCenter[0].children.forEach(item => {

          if (item.children && item.children.length) {

            item.children.forEach(it => {

              if (checkedKeys.includes(it.menucode)) {

                it.buttonChecked = []

              }

            })

          }

        })

      }

    },

    // 单个按钮改变

    handleCheckedButtonChange(oldValue, code, newValue, flag) {

      // console.log(oldValue,  code, newValue, 2)

      // 判断是否包含在内

      if (!flag) {

        if (!this.menuCheckedCodeArr.includes(code) && oldValue.length === 0 && newValue.length === 1) { // 否

          this.menuCheckedCodeArr.push(code)

        } else if (this.menuCheckedCodeArr.includes(code) && oldValue.length === 1 && newValue.length === 0) { // 是

          this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== code)

        }

        if (this.activeName === 'PC') {

          this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)

        }

        if (this.activeName === 'APP') {

          this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)

        }

      }



      // 这里是判断全选checkbox 是否选中

      let count = 0

      let childrenLength = 0

      this.treeCenter[0].children.forEach(item => {

        if (item.children && item.children.length) {

          item.children.forEach(it => {

            if (it.buttonChecked && it.buttonChecked.length === it.buttoncodelist.length && it.buttoncodelist.length > 0) {

              count++

            }



            if (it.buttoncodelist.length) {

              childrenLength++

            }

          })

        }

      })



      this.buttonIsChecked = count === childrenLength

      this.$forceUpdate()

    },

    // 获取树形节点node

    getLeftTreeNode(data, Node, VueComponent) {

      this.treeCenter[0].children.forEach(item => {

        if (item.menucode === data.menucode) {

          item.expanded = Node.expanded

        }

      })

      if (data.menucode === '-1') {

        Node.expanded = true // 暂时先写成这个

      }

      this.$forceUpdate()

    },

    // 处理中间树形勾选

    handleTreeCenterCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {

      // console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, '加多宝')



      if (checkedKeys.length === 0) { // 树形菜单全不选的情况下

        this.buttonIsChecked = false

        this.menuCheckedCodeArr = []

      } else {

        if (checkedKeys.includes(obj.menucode)) { // 判断是否包含在内   //是

          this.menuCheckedCodeArr.push(obj.menucode)

        } else { // 否

          this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)

        }

      }

    },

    // 处理中间树形选中值改变

    handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) {

      // console.log(obj, selfChecked, selfChildrenTreeCheck, '王老吉')

      if (!selfChildrenTreeCheck) {

        if (!selfChecked) { // 从选中到不选中

          obj.buttonChecked = []

          this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)

        }

        if (selfChecked) { // 从不选中到选中

          obj.buttonCheckedCode = []

          this.treeCenter[0].children.forEach(item => {

            if (item.children && item.children.length) {

              item.children.forEach(it => {

                if (it.menucode === obj.menucode) {

                  this.menuCheckedCodeArr.push(obj.menucode)

                }

              })

            }

          })

        }



        this.$forceUpdate()

      }

    },

    // 角色切换

    async treeLeftNodeClick(obj, Node, VueComponent) {

      if (obj.code !== '000') {

        await this.getRolePermissionSearchRoleMenuButton(obj.code)

        this.handleData()

      }

    },

    // 页面勾选好保存事件

    async saveClick() {

      const rolecode = this.$refs.treeLeftRef.getCurrentKey()

      const datacode = this.treeLeft.find(i => i.code === rolecode).datarange !== 'CUSTOM' ? this.treeLeft.find(i => i.code === rolecode).datarange : this.treeLeft.find(i => i.code === rolecode).datapermissions

      let menuKeyArr

      if (this.activeName === 'PC') {

        menuKeyArr = this.$refs.treeCenterPCRef.getCheckedKeys()

      }

      if (this.activeName === 'APP') {

        menuKeyArr = this.$refs.treeCenterAPPRef.getCheckedKeys()

      }



      const arr = []

      this.treeCenter[0].children.forEach(item => {

        if (item.children && item.children.length) {

          item.children.forEach(it => {

            if (menuKeyArr.includes(it.menucode)) {

              if (it.buttonChecked && it.buttonChecked.length > 0) { // 已选菜单

                it.buttonCheckedCode = this.ButtonData.filter(i =>

                  it.buttonChecked.includes(i.buttonname)

                ).map(i => i.buttoncode)

              }

              arr.push({

                menucode: it.menucode,

                datacode,

                buttoncode: it.buttonCheckedCode ? it.buttonCheckedCode.join(',') : ''

              })

            }

          })

        }

      })

      this.$store.state.app.buttonIsDisabled = true



      const res = await RolePermissionSava(JSON.stringify(arr), rolecode, this.activeName)

      if (res.code === '200') {

        const rolename = this.treeLeft.find(i => i.code === rolecode).name

        this.$notify.success(rolename + '的角色权限提交成功！')

        await this.getRolePermissionSearchRoleMenuButton(rolecode)

        this.$store.state.app.buttonIsDisabled = false

      }

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 50

      })

    },

    // 左侧树形拖动处理

    treeLeftAllowDrop(draggingNode, dropNode, type) {

      // console.log(draggingNode, dropNode, type)

      // 注掉的是同级拖拽

      if (draggingNode.level === dropNode.level) {

        return type === 'prev' || type === 'next'

      } else {

        // 不同级进行处理

        return false

      }

    }

  }

}

</script>



<style scoped lang="scss">

::v-deep .el-checkbox__label {

  width: 55px;

}



.el-checkbox-group {

  margin-left: 0 !important;

  padding-left: 40px;

}



.el-checkbox-group:hover {

  background: #f0f7ff;

}

</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">

      <div
        class="elTableDiv"
      >

        <div style="width: 300px;background:#fff">

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="margin-left: 8px;">角色名称</div>
            </div>

            <!--            <div style="margin-right:10px">-->
            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" @click="rolePlusClick" />-->
            <!--            </div>-->

          </div>

          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto"
            :style="{height:(tableHeight-20)+'px'}"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="treeLeftNodeClick"
          />
          <!--          draggable-->
          <!--          :allow-drop="treeLeftAllowDrop"-->
        </div>

        <div
          style="margin-left: 10px;width: calc(100% - 300px);position: relative"
        >

          <el-button
            style="position: absolute;right: 15px;z-index:1;top:3px"
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="saveClick"
          >保 存
          </el-button>

          <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
            <el-tab-pane label="PC端" name="PC">
              <div style="display: flex;">
                <div
                  ref="scrollLeft"
                  style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
                  overflow-y: auto;overflow-x:hidden;"
                  :style="{height:(tableHeight-40)+'px'}"
                  @scroll="scrollLeftScroll()"
                  @mouseover="isScroll='left'"
                >
                  <div style=" ">
                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 菜单权限
                  </div>

                  <el-tree
                    ref="treeCenterPCRef"
                    style="padding-top: 10px;"
                    :data="treeCenter"
                    highlight-current
                    :props="defaultPropsCenter"
                    show-checkbox
                    node-key="menucode"
                    :default-expand-all="true"
                    @check-change="handleTreeCenterCheckChange"
                    @check="handleTreeCenterCheck"
                    @node-click="getLeftTreeNode"
                  />
                </div>
                <!--                <div-->
                <!--                  ref="scrollCenter"-->
                <!--                  style="width: calc(100% - 260px );padding-left: 10px;overflow-y: auto;"-->
                <!--                  :style="{height:(tableHeight-40)+'px'}"-->
                <!--                  @scroll="scrollCenterScroll()"-->
                <!--                  @mouseover="isScroll='center'"-->
                <!--                >-->
                <!--                  <div style=" ">-->
                <!--                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 按钮权限-->
                <!--                  </div>-->

                <!--                  <el-checkbox-->
                <!--                    v-model="buttonIsChecked"-->
                <!--                    style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"-->
                <!--                    @change=" handleCheckAllChange "-->
                <!--                  >全选-->
                <!--                  </el-checkbox>-->

                <!--                  <div v-if="treeCenter.length>0">-->
                <!--                    <div v-for="(item,index) in treeCenter[0].children" :key="item.menucode">-->

                <!--                      <div-->
                <!--                        v-if="!item.buttoncodelist"-->
                <!--                        style="margin-left: 40px;height:26px;display: flex;"-->
                <!--                      />-->

                <!--                      <el-checkbox-group-->
                <!--                        v-for="it in item.children"-->
                <!--                        v-if="item.expanded"-->
                <!--                        :key="it.menucode"-->
                <!--                        v-model="it.buttonChecked"-->
                <!--                        style="margin-left: 40px;height:26px;display: flex;"-->
                <!--                        @change="val=>handleCheckedButtonChange(val,it.menucode,it.buttonChecked)"-->
                <!--                      >-->

                <!--                        <el-checkbox-->
                <!--                          v-for="i in it.buttoncodelist"-->
                <!--                          :key="i"-->
                <!--                          :label="i"-->
                <!--                          style="display:flex;align-items: center;"-->
                <!--                        />-->
                <!--                      </el-checkbox-group>-->

                <!--                    </div>-->

                <!--                  </div>-->

                <!--                </div>-->
              </div>
            </el-tab-pane>
            <el-tab-pane label="APP端" name="APP">
              <div style="display: flex;">
                <div
                  ref="scrollLeft"
                  style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
                                overflow-y: auto;overflow-x:hidden;"
                  :style="{height:(tableHeight-40)+'px'}"
                  @scroll="scrollLeftScroll()"
                  @mouseover="isScroll='left'"
                >
                  <div style=" ">
                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 菜单权限
                  </div>

                  <el-tree
                    ref="treeCenterAPPRef"
                    style="padding-top: 10px;"
                    :data="treeCenter"
                    highlight-current
                    :props="defaultPropsCenter"
                    show-checkbox
                    node-key="menucode"
                    :default-expand-all="true"
                    @check-change="handleTreeCenterCheckChange"
                    @check="handleTreeCenterCheck"
                    @node-click="getLeftTreeNode"
                  />
                </div>
              </div>
            </el-tab-pane>
            <!--            <el-tab-pane label="工控端" name="工控端">工控端</el-tab-pane>-->
          </el-tabs>

        </div>

      </div>

    </div>

  </div>
</template>

<script>
import waves from '@/directive/waves'
import {
  RolePermissionSava,
  RolePermissionSearchRole,
  RolePermissionSearchRoleMenu,
  RolePermissionSearchRoleMenuButton
} from '@/api/basicSettings'
import arrayToTree from 'array-to-tree'

export default {
  name: 'PowerDivider',
  directives: { waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,

      treeLeft: [], // 左侧树
      treeCenter: [], // 中间树
      defaultPropsLeft: {
        children: 'roles',
        label: 'name'
      },
      defaultPropsCenter: {
        children: 'children',
        label: 'menuname'
      },
      activeName: 'PC',

      buttonIsChecked: false,

      menuCheckedCodeArr: [], // 菜单权限数组选中的

      allButtonData: [], // 所有菜单对应的按钮权限加数据权限

      isScroll: 'left',

      ButtonData: JSON.parse(localStorage.getItem('ButtonData'))

    }
  },

  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getRolePermissionSearchRole()
  },
  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.getRolePermissionSearchRole()
  },
  methods: {

    // 获取角色权限查询角色
    async getRolePermissionSearchRole() {
      const { data: res } = await RolePermissionSearchRole()
      this.treeLeft = res

      let rolecode = ''
      if (window.location.hash.indexOf('?') !== -1) {
        rolecode = window.location.hash.split('?')[1].split('=')[1]
      }

      if (res && res.length > 0) {
        this.$nextTick(() => { // 默认选中第一个
          this.$refs.treeLeftRef.setCurrentKey(rolecode || res[0].code) // 默认选中节点第一个
        })

        await this.getRolePermissionSearchRoleMenuButton(rolecode || res[0].code)// 用于数据回显

        await this.getRolePermissionSearchRoleMenu(rolecode || res[0].code)// 用于渲染页面
      } else {
        this.$notify.error('请先建相对应的角色！')
      }
    },
    async tabClick() {
      this.treeCenter = []
      await this.getRolePermissionSearchRoleMenuButton(this.$refs.treeLeftRef.getCurrentKey())// 用于数据回显
      await this.getRolePermissionSearchRoleMenu(this.$refs.treeLeftRef.getCurrentKey())// 用于渲染页面
    },

    // 获取菜单权限对应的按钮
    async getRolePermissionSearchRoleMenuButton(rolecode) {
      const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode, type: this.activeName })
      this.allButtonData = res.length > 0 ? JSON.parse(res[0].jsondate) : []
    },
    // 获取菜单权限
    async getRolePermissionSearchRoleMenu(rolecode) {
      const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: this.activeName })

      // 拿到数组list转换成树形tree
      const result = arrayToTree(res, {
        parentProperty: 'parent_id',
        customID: 'menucode',
        childrenProperty: 'children'
      })

      this.treeCenter = [
        { menucode: '-1', menuname: '全部', children: result }
      ]

      this.treeCenter[0].children.sort((a, b) => a.menu_seq - b.menu_seq)
      this.treeCenter[0].children.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            it.buttoncodelist = it.buttoncodelist !== '' && it.buttoncodelist !== null ? it.buttoncodelist.split(',') : []
            if (it.buttoncodelist && it.buttoncodelist.length > 0) {
              it.buttoncodelist = this.ButtonData.filter(j =>
                it.buttoncodelist.includes(j.buttoncode)
              )

              it.buttoncodelist = it.buttoncodelist.map(j => j.buttonname)
            }
          })

          item.children.sort((a, b) => a.menu_seq - b.menu_seq)

          item.expanded = true
        }
      })

      this.handleData()// 处理数据回显
    },
    // 处理组合数据
    handleData() {
      this.menuCheckedCodeArr = this.allButtonData.map(i => i.menucode)
      this.$nextTick(() => {
        if (this.activeName === 'PC') {
          this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
        }
        if (this.activeName === 'APP') {
          this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
        }
      })

      this.treeCenter[0].children.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            let temp = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].buttoncode : []
            temp = temp.length > 0 ? temp.split(',') : []
            it.buttonChecked = [] // 数据回显
            this.ButtonData.forEach(j => {
              if (temp.includes(j.buttoncode)) {
                it.buttonChecked.push(j.buttonname)
              }
            })
          })
        }
      })

      this.handleCheckedButtonChange('', '', '', true)
      // this.$forceUpdate()
    },

    // 左边滚动条滑动时
    scrollLeftScroll() {
      if (this.isScroll === 'left') {
        this.$refs.scrollCenter.scrollTop = this.$refs.scrollLeft.scrollTop
      }
    },
    // 中间边滚动条滑动时
    scrollCenterScroll() {
      if (this.isScroll === 'center') {
        this.$refs.scrollLeft.scrollTop = this.$refs.scrollCenter.scrollTop
      }
    },

    // 全选改变
    handleCheckAllChange(val) {
      let checkedKeys
      if (this.activeName === 'PC') {
        checkedKeys = this.$refs.treeCenterPCRef.getCheckedKeys()
      }
      if (this.activeName === 'APP') {
        checkedKeys = this.$refs.treeCenterAPPRef.getCheckedKeys()
      }

      if (val) {
        this.treeCenter[0].children.forEach(item => {
          if (item.children && item.children.length) {
            item.children.forEach(it => {
              if (checkedKeys.includes(it.menucode)) {
                it.buttonChecked = it.buttoncodelist
              }
            })
          }
        })
      } else {
        this.treeCenter[0].children.forEach(item => {
          if (item.children && item.children.length) {
            item.children.forEach(it => {
              if (checkedKeys.includes(it.menucode)) {
                it.buttonChecked = []
              }
            })
          }
        })
      }
    },
    // 单个按钮改变
    handleCheckedButtonChange(oldValue, code, newValue, flag) {
      // console.log(oldValue,  code, newValue, 2)
      // 判断是否包含在内
      if (!flag) {
        if (!this.menuCheckedCodeArr.includes(code) && oldValue.length === 0 && newValue.length === 1) { // 否
          this.menuCheckedCodeArr.push(code)
        } else if (this.menuCheckedCodeArr.includes(code) && oldValue.length === 1 && newValue.length === 0) { // 是
          this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== code)
        }
        if (this.activeName === 'PC') {
          this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
        }
        if (this.activeName === 'APP') {
          this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
        }
      }

      // 这里是判断全选checkbox 是否选中
      let count = 0
      let childrenLength = 0
      this.treeCenter[0].children.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            if (it.buttonChecked && it.buttonChecked.length === it.buttoncodelist.length && it.buttoncodelist.length > 0) {
              count++
            }

            if (it.buttoncodelist.length) {
              childrenLength++
            }
          })
        }
      })

      this.buttonIsChecked = count === childrenLength
      this.$forceUpdate()
    },
    // 获取树形节点node
    getLeftTreeNode(data, Node, VueComponent) {
      this.treeCenter[0].children.forEach(item => {
        if (item.menucode === data.menucode) {
          item.expanded = Node.expanded
        }
      })
      if (data.menucode === '-1') {
        Node.expanded = true // 暂时先写成这个
      }
      this.$forceUpdate()
    },
    // 处理中间树形勾选
    handleTreeCenterCheck(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
      // console.log(obj, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys, '加多宝')

      if (checkedKeys.length === 0) { // 树形菜单全不选的情况下
        this.buttonIsChecked = false
        this.menuCheckedCodeArr = []
      } else {
        if (checkedKeys.includes(obj.menucode)) { // 判断是否包含在内   //是
          this.menuCheckedCodeArr.push(obj.menucode)
        } else { // 否
          this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
        }
      }
    },
    // 处理中间树形选中值改变
    handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) {
      // console.log(obj, selfChecked, selfChildrenTreeCheck, '王老吉')
      if (!selfChildrenTreeCheck) {
        if (!selfChecked) { // 从选中到不选中
          obj.buttonChecked = []
          this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
        }
        if (selfChecked) { // 从不选中到选中
          obj.buttonCheckedCode = []
          this.treeCenter[0].children.forEach(item => {
            if (item.children && item.children.length) {
              item.children.forEach(it => {
                if (it.menucode === obj.menucode) {
                  this.menuCheckedCodeArr.push(obj.menucode)
                }
              })
            }
          })
        }

        this.$forceUpdate()
      }
    },
    // 角色切换
    async treeLeftNodeClick(obj, Node, VueComponent) {
      if (obj.code !== '000') {
        await this.getRolePermissionSearchRoleMenuButton(obj.code)
        this.handleData()
      }
    },
    // 页面勾选好保存事件
    async saveClick() {
      const rolecode = this.$refs.treeLeftRef.getCurrentKey()
      const datacode = this.treeLeft.find(i => i.code === rolecode).datarange !== 'CUSTOM' ? this.treeLeft.find(i => i.code === rolecode).datarange : this.treeLeft.find(i => i.code === rolecode).datapermissions
      let menuKeyArr
      if (this.activeName === 'PC') {
        menuKeyArr = this.$refs.treeCenterPCRef.getCheckedKeys()
      }
      if (this.activeName === 'APP') {
        menuKeyArr = this.$refs.treeCenterAPPRef.getCheckedKeys()
      }

      const arr = []
      this.treeCenter[0].children.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            if (menuKeyArr.includes(it.menucode)) {
              if (it.buttonChecked && it.buttonChecked.length > 0) { // 已选菜单
                it.buttonCheckedCode = this.ButtonData.filter(i =>
                  it.buttonChecked.includes(i.buttonname)
                ).map(i => i.buttoncode)
              }
              arr.push({
                menucode: it.menucode,
                datacode,
                buttoncode: it.buttonCheckedCode ? it.buttonCheckedCode.join(',') : ''
              })
            }
          })
        }
      })
      this.$store.state.app.buttonIsDisabled = true

      const res = await RolePermissionSava(JSON.stringify(arr), rolecode, this.activeName)
      if (res.code === '200') {
        const rolename = this.treeLeft.find(i => i.code === rolecode).name
        this.$notify.success(rolename + '的角色权限提交成功！')
        await this.getRolePermissionSearchRoleMenuButton(rolecode)
        this.$store.state.app.buttonIsDisabled = false
      }
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 50
      })
    },
    // 左侧树形拖动处理
    treeLeftAllowDrop(draggingNode, dropNode, type) {
      // console.log(draggingNode, dropNode, type)
      // 注掉的是同级拖拽
      if (draggingNode.level === dropNode.level) {
        return type === 'prev' || type === 'next'
      } else {
        // 不同级进行处理
        return false
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-checkbox__label {
  width: 55px;
}

.el-checkbox-group {
  margin-left: 0 !important;
  padding-left: 40px;
}

.el-checkbox-group:hover {
  background: #f0f7ff;
}
</style>

 src/views/basicSettings/processList.vue

@@ -1,434 +1,439 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=15')">导入</el-button>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="工序编码" style=" display: flex;">

              <el-input v-model="form.stepcode" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="工序名称" style=" display: flex;">

              <el-input v-model="form.stepname" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="工序类型" style=" display: flex;">

              <el-select

                v-model="form.steptypecode"

                style="width:200px"

                placeholder="请选择"

                :popper-append-to-body="false"

              >

                <el-option

                  v-for="item in steptypeArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>

            <el-form-item label="状态" style=" display: flex;">

              <el-select

                v-model="form.enable"

                style="width:200px"

                placeholder="请选择"

                :popper-append-to-body="false"

              >

                <el-option

                  v-for="item in enableArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="getStepSearch">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

          style="height:5px"

        >

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseout'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

          <!--            @mouseenter="mouseHoverType=$event.type"-->

          <!--          />-->

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseenter'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

          <!--            @click="isExpandForm=!isExpandForm"-->

          <!--            @mouseout="mouseHoverType=$event.type"-->

          <!--          />-->

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="tableHeight+'px'"

          border

          row-class-name="custom-row"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >

          <el-table-column

            prop="rowNum"

            width="50"

            fixed

            label="序号"

          />

          <el-table-column

            prop="stepcode"

            label="工序编码"

            sortable="custom"

          />

          <el-table-column

            prop="stepname"

            label="工序名称"

            sortable="custom"

          />

          <el-table-column

            prop="flwtype"

            label="工序类型"

            sortable="custom"

          >

            <template slot-scope="{row}">

              {{ row.flwtype==='Z'?'自制':'外协' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="enable"

            label="状态"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <el-tag v-if="row.enable==='Y'" size="small" type="success">正常</el-tag>

              <el-tag v-if="row.enable==='N'" size="small" type="danger">停用</el-tag>

            </template>

          </el-table-column>

          <el-table-column

            prop="descr"

            label="描述"

            sortable="custom"

          >

            <template slot-scope="{row}">

              {{ row.descr?row.descr:'/' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="lm_user"

            label="创建人员"

            sortable="custom"

          />

          <el-table-column

            prop="lm_date"

            label="创建时间"

            width="160"

            sortable="custom"

          />

          <el-table-column

            label="操作"

            width="120"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i

                    v-if="row.leve!==0"

                    class="el-icon-edit-outline"

                    :style="{color:$store.state.settings.theme}"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i

                    v-if="row.leve!==0"

                    class="el-icon-delete"

                    :style="{color:$store.state.settings.theme}"

                    @click="del(row)"

                  />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes,jumper"

        popper-class="select_bottom"

        @pagination="getStepSearch"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

        <el-form-item label="工序编码" prop="stepcode">

          <el-input v-model="dialogForm.stepcode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="工序名称" prop="stepname">

          <el-input v-model="dialogForm.stepname" style="width: 200px" />

        </el-form-item>

        <el-form-item label="工序类型" required>

          <el-select

            v-model="dialogForm.steptypecode"

            style="width:200px"

            placeholder="请选择"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in steptypeArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

        <el-form-item required label="状态">

          <el-radio-group v-model="dialogForm.enable">

            <el-radio label="Y">正常</el-radio>

            <el-radio label="N">停用</el-radio>

          </el-radio-group>

        </el-form-item>

        <el-form-item label="描述">

          <el-input

            v-model="dialogForm.description"

            type="textarea"

            style="width: 200px"

          />

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import { AddUpdateStep, DeleteStep, StepSearch } from '@/api/basicSettings'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'



export default {

  name: 'ProcessList',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,

      form: {

        stepcode: '', //

        stepname: '', //

        enable: '', //

        steptypecode: '', // 工序类型

        prop: 'stepcode', // 排序字段

        order: 'asc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      total: 10,

      tableData: [],

      steptypeArr: [

        { code: 'Z', name: '自制' },

        { code: 'W', name: '外协' }

      ],

      enableArr: [

        { code: 'Y', name: '正常' },

        { code: 'N', name: '停用' }

      ],

      dialogVisible: false,

      dialogForm: {

        id: '',

        stepcode: '', //

        stepname: '', //

        steptypecode: 'Z',

        description: '', // 描述

        enable: 'Y'// 状态

      },

      operation: '',

      dialogFormRules: {

        stepcode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        stepname: [

          { required: true, message: '请输入工序名称', trigger: ['blur', 'change'] }

        ]

      }



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getStepSearch()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    // 组织架构大列表查询

    async getStepSearch() {

      const res = await StepSearch(this.form)

      this.tableData = res.data

      this.total = res.count

    },



    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getStepSearch()

    },

    // 重置

    reset() {

      this.form.stepcode = ''

      this.form.stepname = ''

      this.form.enable = ''

      this.form.steptypecode = ''

      this.getStepSearch()

    },

    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'



      this.$nextTick(() => {

        this.dialogForm.id = row.id

        this.dialogForm.stepcode = row.stepcode

        this.dialogForm.stepname = row.stepname

        this.dialogForm.description = row.descr

        this.dialogForm.enable = row.enable

        this.dialogForm.steptypecode = row.flwtype

      })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteStep({ stepcode: row.stepcode }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getStepSearch()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.stepcode = ''

      this.dialogForm.stepname = ''

      this.dialogForm.id = ''

      this.dialogForm.enable = 'Y'

      this.dialogForm.description = ''

      this.dialogForm.steptypecode = 'Z'

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          // console.log(JSON.parse(JSON.stringify(this.dialogForm)))

          this.$store.state.app.buttonIsDisabled = true

          AddUpdateStep(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getStepSearch()

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 200

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=15')">导入</el-button>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="工序编码" style=" display: flex;">
              <el-input v-model="form.stepcode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="工序名称" style=" display: flex;">
              <el-input v-model="form.stepname" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="工序类型" style=" display: flex;">
              <el-select
                v-model="form.steptypecode"
                style="width:200px"
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in steptypeArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="状态" style=" display: flex;">
              <el-select
                v-model="form.enable"
                style="width:200px"
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in enableArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="getStepSearch">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="rowNum"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="stepcode"
            label="工序编码"
            sortable="custom"
          />
          <el-table-column
            prop="stepname"
            label="工序名称"
            sortable="custom"
          />
          <el-table-column
            prop="flwtype"
            label="工序类型"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.flwtype==='Z'?'自制':'外协' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="enable"
            label="状态"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.enable==='Y'" size="small" type="success">正常</el-tag>
              <el-tag v-if="row.enable==='N'" size="small" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="descr"
            label="描述"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.descr?row.descr:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="lm_user"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            width="160"
            sortable="custom"
          />
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    v-if="row.leve!==0"
                    class="el-icon-edit-outline"
                    :style="{color:$store.state.settings.theme}"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    v-if="row.leve!==0"
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    @click="del(row)"
                  />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getStepSearch"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="工序编码" prop="stepcode">
          <el-input v-model="dialogForm.stepcode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="工序名称" prop="stepname">
          <el-input v-model="dialogForm.stepname" style="width: 200px" />
        </el-form-item>
        <el-form-item label="工序类型" required>
          <el-select
            v-model="dialogForm.steptypecode"
            style="width:200px"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in steptypeArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item required label="状态">
          <el-radio-group v-model="dialogForm.enable">
            <el-radio label="Y">正常</el-radio>
            <el-radio label="N">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="dialogForm.description"
            type="textarea"
            style="width: 200px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { AddUpdateStep, DeleteStep, StepSearch } from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'

export default {
  name: 'ProcessList',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        stepcode: '', //
        stepname: '', //
        enable: '', //
        steptypecode: '', // 工序类型
        prop: 'stepcode', // 排序字段
        order: 'asc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
      steptypeArr: [
        { code: 'Z', name: '自制' },
        { code: 'W', name: '外协' }
      ],
      enableArr: [
        { code: 'Y', name: '正常' },
        { code: 'N', name: '停用' }
      ],
      dialogVisible: false,
      dialogForm: {
        id: '',
        stepcode: '', //
        stepname: '', //
        steptypecode: 'Z',
        description: '', // 描述
        enable: 'Y'// 状态
      },
      operation: '',
      dialogFormRules: {
        stepcode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        stepname: [
          { required: true, message: '请输入工序名称', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getStepSearch()
  },
  created() {
    this.getStepSearch()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 组织架构大列表查询
    async getStepSearch() {
      const res = await StepSearch(this.form)
      this.tableData = res.data
      this.total = res.count
    },

    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getStepSearch()
    },
    // 重置
    reset() {
      this.form.stepcode = ''
      this.form.stepname = ''
      this.form.enable = ''
      this.form.steptypecode = ''
      this.getStepSearch()
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'

      this.$nextTick(() => {
        this.dialogForm.id = row.id
        this.dialogForm.stepcode = row.stepcode
        this.dialogForm.stepname = row.stepname
        this.dialogForm.description = row.descr
        this.dialogForm.enable = row.enable
        this.dialogForm.steptypecode = row.flwtype
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteStep({ stepcode: row.stepcode }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getStepSearch()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.stepcode = ''
      this.dialogForm.stepname = ''
      this.dialogForm.id = ''
      this.dialogForm.enable = 'Y'
      this.dialogForm.description = ''
      this.dialogForm.steptypecode = 'Z'
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          // console.log(JSON.parse(JSON.stringify(this.dialogForm)))
          this.$store.state.app.buttonIsDisabled = true
          AddUpdateStep(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getStepSearch()
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 200
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

 src/views/basicSettings/processRoute.vue

@@ -1,1019 +1,1024 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">



      <div class="bodyTopButtonGroup">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <!--        <el-button v-waves type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>-->

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="工艺路线编码" style=" display: flex;">

              <el-input v-model="form.routecode" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="工艺名称" style=" display: flex;">

              <el-input v-model="form.routename" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="工艺描述" style=" display: flex;">

              <el-input v-model="form.description" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="创建人员" style=" display: flex;">

              <el-input v-model="form.createuser" style="width: 200px" placeholder="请输入" />

            </el-form-item>

          </div>

          <div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">

            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

        />

      </div>



      <div class="elTableDiv">

        <!--        <TableColumnSettings-->

        <!--          :list1="tableColumnSettingsArray"-->

        <!--          @tableColumnUpdate="tableColumnUpdate"-->

        <!--        />-->

        <el-table

          ref="tableDataRef"

          :key="tableTimeStampKey"

          class="tableFixed"

          :data="tableData"

          :height="tableHeight"

          border

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >



          <el-table-column

            v-for="item in tableColumnSettingsArray"

            v-if="item.show"

            :key="item.id"

            :sortable="item.sortable"

            :prop="item.prop"

            :min-width="item.minWidth"

            :label="item.label"

            :width="item.width"

            show-tooltip-when-overflow

            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"

          >

            <template slot-scope="{row}">

              <div v-if="!row[item.prop]">/</div>

              <div v-else-if="item.prop==='enable'">

                <div v-if="row[item.prop]==='Y'">

                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />

                  是

                </div>

                <div v-if="row[item.prop]==='N'">

                  <i class="el-icon-info" style="margin-right: 2px" />

                  否

                </div>

              </div>

              <div v-else>{{ row[item.prop] }}</div>

            </template>

          </el-table-column>



          <!--          <el-table-column-->

          <!--            type="selection"-->

          <!--            width="50"-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="RowNum"-->

          <!--            width="50"-->

          <!--            label="序号"-->

          <!--            fixed-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="code"-->

          <!--            label="编码"-->

          <!--            show-tooltip-when-overflow-->

          <!--            sortable="custom"-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="name"-->

          <!--            show-tooltip-when-overflow-->

          <!--            label="名称"-->

          <!--            sortable="custom"-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="description"-->

          <!--            label="工艺路线描述"-->

          <!--            sortable="custom"-->

          <!--            show-tooltip-when-overflow-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <div v-if="row.description">{{ row.description }}</div>-->

          <!--              <div v-else>/</div>-->

          <!--            </template>-->

          <!--          </el-table-column>-->

          <!--          <el-table-column-->

          <!--            prop="enable"-->

          <!--            show-tooltip-when-overflow-->

          <!--            label="使用状态"-->

          <!--            sortable="custom"-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <div v-if="row.enable==='Y'">-->

          <!--                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />-->

          <!--                是-->

          <!--              </div>-->

          <!--              <div v-if="row.enable==='N'">-->

          <!--                <i class="el-icon-info" style="margin-right: 2px" />-->

          <!--                否-->

          <!--              </div>-->

          <!--            </template>-->

          <!--          </el-table-column>-->

          <!--          <el-table-column-->

          <!--            prop="lm_user"-->

          <!--            show-tooltip-when-overflow-->

          <!--            label="创建人员"-->

          <!--            sortable="custom"-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="lm_date"-->

          <!--            label="创建时间"-->

          <!--            show-tooltip-when-overflow-->

          <!--            sortable="custom"-->

          <!--            width="160"-->

          <!--          />-->

          <el-table-column

            label="操作"

            width="120"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="预览" placement="top">

                  <i

                    class="el-icon-view"

                    :style="{color:$store.state.settings.theme}"

                    style="margin-right:15px;cursor: pointer;"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" style="margin-right:15px;" @click="del(row)" />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="复制" placement="top">

                  <i :style="{color:$store.state.settings.theme}" class="el-icon-document-copy" style="cursor: pointer;color:#42b983" @click="copy('copy',row)" />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes"

        popper-class="select_bottom"

        @pagination="getRouteSearch"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':(operation==='edit'?'预览':'复制')"

      :visible.sync="dialogVisible"

      width="1000px"

      :close-on-click-modal="false"

      :top="isIpad?'5vh':'15vh'"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" style="height: 500px" :rules="dialogFormRules" :model="dialogForm" label-width="110px">

        <div style="display: flex">

          <el-form-item label="工艺路线编码" prop="code" style="margin-right: 20px">

            <el-input v-model="dialogForm.code" :disabled="operation==='edit'" style="width: 220px" />

          </el-form-item>

          <el-form-item label="工艺名称" prop="name">

            <el-input v-model="dialogForm.name" :disabled="operation==='edit'" style="width: 220px" />

          </el-form-item>

        </div>

        <div style="display: flex">

          <el-form-item prop="enable" label="使用状态" style="margin-right: 20px">

            <el-select

              v-model="dialogForm.enable"

              filterable

              :disabled="operation==='edit'"

              :popper-append-to-body="false"

              style="width: 220px"

              placeholder="请选择"

            >

              <el-option

                v-for="item in isEnableArr"

                :key="item.value"

                :label="item.label"

                :value="item.value"

              />

            </el-select>

          </el-form-item>

          <el-form-item label="工艺描述" prop="description">

            <el-input

              v-model="dialogForm.description"

              :disabled="operation==='edit'"

              type="textarea"

              style="width: 220px"

            />

          </el-form-item>

        </div>

        <el-form-item label="工艺设置" prop="Data" style="margin-top: 30px">

          <div class="settingDiv">

            <!--   实现工艺设置动态添加-->

            <div v-for="(tag,index) in dynamicTags" :key="tag.seq" style="display: flex;align-items: center">

              <div style="display: flex;align-items: center;position: relative;">

                <div

                  class="orderNumber"

                  :style="{

                    backgroundColor:index===0?'#f8f8fa':'#409EFF',

                    color:index===0?'#c6bbc4':'#FFFFFF',

                    border:index===0?'1px solid #c6bbc4':'1px solid #409EFF',

                    zIndex:tag.label===selectedName?0:2

                  }"

                >

                  {{ index + 1 }}

                </div>



                <!--                <el-tooltip-->

                <!--                  class="item"-->

                <!--                  effect="dark"-->

                <!--                  :content="tag.stepname"-->

                <!--                  placement="top"-->

                <!--                >-->

                <!--                  @close="handleTagClose(tag.stepname)"-->

                <!--                  :closable="index!==0"-->



                <el-tag

                  v-if="tag.stepname!==selectedName"

                  :disable-transitions="false"

                  class="elTag"

                  :effect="tag.effect"

                  @click="elTagClick(tag)"

                >

                  {{ tag.stepname }}

                  <i

                    v-if="tag.editDisabled&&operation!=='edit'"

                    class="el-icon-edit"

                    @click="tagEdit(tag)"

                  />

                </el-tag>

                <!--                </el-tooltip>-->

                <!--                {{ tag.editDisabled }}-->

                <!--                left:tag.stepname===selectedName?'191px':'141px',-->

                <i

                  v-if="index!==0&&tag.editDisabled&&operation!=='edit'"

                  :style="{

                    top:tag.stepname===selectedName?'-2px':'-8px',

                  }"

                  class="el-icon-close"

                  @click="handleTagClose(tag)"

                />

                <el-autocomplete

                  v-if="tag.stepname===selectedName"

                  :ref="'saveTagInput'+tag.seq"

                  v-model="autocompleteValue"

                  class="input-new-tag"

                  size="small"

                  :fetch-suggestions="querySearch"

                  style="margin-left: 0;width: 150px;transform: translate(1)"

                  autofocus

                  :debounce="300"

                  :popper-append-to-body="false"

                  popper-class="autocompleteClass"

                  @select="val=>handleSelect(val,tag)"

                  @keyup.enter.native="handleInputConfirm(tag)"

                />

                <!--                @keyup.enter.native="handleInputConfirm(tag)"-->



                <!--        @blur="handleBlur2"-->

                <div

                  v-if="index!==dynamicTags.length-1"

                  style="width: 40px;height: 1px;border: 1px solid #42b983"

                />

              </div>

            </div>



            <el-button

              v-if="operation!=='edit'"

              v-waves

              type="success"

              :disabled="addDisabled"

              class="tagSuccess"

              size="small"

              icon="el-icon-plus"

              @click="showInput"

            />



          </div>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-if="operation==='edit'" v-waves @click="dialogVisibleCancel">返 回</el-button>

          <el-button v-if="operation!=='edit'" v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-if="operation!=='edit'"

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>

  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import { AddUpdateRoute, DeleteRoute, RouteSearch, StepSelect, ViewRoute } from '@/api/basicSettings'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import TableColumnSettings from '@/components/TableColumnSettings'



export default {

  name: 'ProcessRoute',

  components: {

    Pagination, TableColumnSettings

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      isIpad: false,

      mainHeight: 0,

      tableHeight: 0,

      form: {

        routecode: '', // 工艺路线编码

        routename: '', // 工艺路线名称

        description: '', // 工艺路线描述

        createuser: '', // 创建人员

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      isEnableArr: [

        { label: '是', value: 'Y' },

        { label: '否', value: 'N' }

      ],

      total: 10,

      tableData: [],

      tableColumnSettingsArray: [

        { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示

        { minWidth: 25, width: 50, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom

        {

          minWidth: 110,

          width: false,

          prop: 'code',

          label: '编码',

          id: 3,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'name',

          label: '名称',

          id: 4,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 330,

          width: false,

          prop: 'description',

          label: '工艺路线描述',

          id: 5,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'enable',

          label: '使用状态',

          id: 6,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'lm_user',

          label: '创建人员',

          id: 7,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 160,

          width: false,

          prop: 'lm_date',

          label: '创建时间',

          id: 8,

          show: true,

          fixed: false,

          sortable: true

        }

      ],

      tableTimeStampKey: new Date().getTime(), // 表格key

      dialogVisible: false,

      dialogForm: {

        id: '',

        code: '',

        name: '',

        enable: 'Y',

        description: '',

        Data: []

      },

      dynamicTags: [// 工艺设置数组

        { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }

        // { editDisabled: true, stepcode: 'Step02', seq: 2, stepname: '奶', effect: 'light' },

        // { editDisabled: true, stepcode: 'Step03', seq: 3, stepname: '大', effect: 'light' }

      ],

      clickSelected: '', // 鼠标点击选中的值

      selectedName: '', // 选中的名称

      autocompleteValue: '', // 可搜索输入框中的值

      routeArr: [], // 工艺设置下拉所有值

      routeSelectedArr: [], // 工艺设置下拉已选的值

      addDisabled: true, // 添加按钮是否可点击

      // editDisabled: true, // 修改按钮是否可点击

      mouseFocusPosition: 0, // 鼠标聚焦的位置

      operation: '',

      dialogFormRules: {

        code: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        name: [

          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }

        ],

        enable: [

          { required: true, message: '请选择使用状态', trigger: ['blur', 'change'] }

        ]

        // Data: [

        //   { required: true, message: '请设置工艺', trigger: ['blur', 'change'] }

        // ]

      }



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getRouteSearch()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    tableColumnUpdate(val, isCopyTrue) {

      if (isCopyTrue) {

        this.tableColumnSettingsArray = val

      }

      this.tableTimeStampKey = new Date().getTime()

      this.$refs.tableDataRef.doLayout()

    },

    // 远程搜索

    querySearch(queryString, cb) {

      const routeArr = this.routeArr

      routeArr.forEach(item => {

        item.value = item.stepname

      })

      const results = queryString ? routeArr.filter(this.createFilter(queryString)) : routeArr

      // 调用 callback 返回建议列表的数据

      cb(results)

    },

    // 过滤

    createFilter(queryString) {

      return (res) => {

        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)

      }

    },

    // 工艺设置 下拉获取所有

    async getStepSelectArr() {

      const { data: res } = await StepSelect()

      this.routeArr = res

    },

    // 处理下拉选择

    handleSelect(item, tag) {

      this.autocompleteValue = item.value

      this.$nextTick(_ => {

        this.$refs['saveTagInput' + this.mouseFocusPosition][0].focus()

        this.handleInputConfirm(tag)

      })

    },

    // 输入框确认事件

    handleInputConfirm(tag) {

      // 1.选择内容不能为空

      if (this.autocompleteValue.trim().length < 1) {

        return this.$message.info('选择内容不能为空！')

      }

      // 2.输入框内容与下拉选项内容不匹配

      let flag = false

      this.routeArr.forEach(item => {

        if (item.stepname === this.autocompleteValue) {

          flag = true

        }

      })

      if (!flag) {

        return this.$message.info('输入框内容与下拉选项内容不匹配！')

      }



      // 3.输入框内容与已选内容相同时不能保存

      let flag2 = false

      this.dynamicTags.forEach(item => {

        if (item.stepname === this.autocompleteValue.trim()) {

          flag2 = true

        }

      })

      if (tag.stepname === this.autocompleteValue.trim()) {

        flag2 = false

      }

      if (flag2) {

        return this.$message.info('此工序已选，请选择其它工序！')

      }



      this.routeArr.forEach((item, index) => {

        if (this.autocompleteValue.trim() === item.stepname) {

          this.routeSelectedArr.push({

            stepcode: item.stepcode,

            stepname: item.stepname,

            value: item.value

          })



          this.routeArr.splice(index, 1)

        }

      })



      // 将值替换到原tag位置上

      this.dynamicTags.forEach((item, index) => {

        if ((index + 1) === tag.seq) {

          item.stepname = this.autocompleteValue

          item.effect = 'dark'

        }

        item.editDisabled = true

      })

      this.clickSelected = this.dynamicTags.findIndex(i => i.effect === 'dark') + 1



      this.addDisabled = false

      this.editDisabled = true

      this.selectedName = ''

    },

    // tag点击修改按钮

    tagEdit(tag) {

      this.autocompleteValue = ''

      this.dynamicTags.forEach(item => {

        item.stepname = item.stepname.trim()

        item.editDisabled = false

        if (item.seq !== tag.seq) {

          item.effect = 'light'

        } else {

          item.effect = 'dark'

        }

      })



      if (tag.stepname !== '') {

        const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)



        this.routeArr.push(

          {

            stepcode: routeSelectedArr.stepcode,

            stepname: routeSelectedArr.stepname,

            value: routeSelectedArr.value

          }

        )

      }



      this.addDisabled = true

      this.selectedName = tag.stepname

      this.autocompleteValue = tag.stepname

      this.$nextTick(_ => {

        this.$refs['saveTagInput' + tag.seq][0].focus()

      })

      this.mouseFocusPosition = tag.seq

    },

    // tag点击事件

    elTagClick(tag) {

      if (this.dynamicTags.every(i => i.editDisabled)) {

        this.clickSelected = tag.seq

        if (tag.effect === 'dark') {



        } else {

          this.dynamicTags.forEach(item => {

            item.effect = 'light'

          })

          if (tag.effect === 'light') {

            tag.effect = 'dark'

          } else if (tag.effect === 'dark') {

            tag.effect = 'light'

          }

        }

      }

    },

    // 处理tag关闭事件

    handleTagClose(tag) {

      // 当选中的步骤被删除时

      if (tag.effect === 'dark') {

        this.clickSelected = this.dynamicTags.length - 1

      }

      this.dynamicTags.forEach((item, index) => {

        if (item.seq === tag.seq) {

          this.dynamicTags.splice(index, 1)

        }

      })



      const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)



      if (routeSelectedArr !== undefined) {

        this.routeArr.push(

          {

            stepcode: routeSelectedArr.stepcode,

            stepname: routeSelectedArr.stepname,

            value: routeSelectedArr.value

          }

        )

      }

      this.routeArr = this.routeArr.filter((currentValue, currentIndex, selfArr) => {

        return selfArr.findIndex(item => item.stepcode === currentValue.stepcode) === currentIndex

      })



      // 重新排序

      this.dynamicTags.forEach((item, index) => {

        item.editDisabled = true

        item.seq = index + 1

        item.stepcode = ''

        item.effect = index === this.dynamicTags.length - 1 ? 'dark' : 'light'

      })

      this.addDisabled = false

    },

    // tag添加按钮

    showInput() {

      const seq = this.dynamicTags.findIndex(i => i.effect === 'dark') + 2



      // 先将每个的tag标签颜色改为浅色

      this.dynamicTags.forEach(i => {

        i.effect = 'light'

      })



      this.autocompleteValue = ''

      this.addDisabled = true

      this.editDisabled = false



      this.dynamicTags.splice(this.clickSelected, 0, { editDisabled: true, seq: seq, stepname: '', effect: 'dark' })

      this.dynamicTags.forEach((item, index) => {

        item.seq = index + 1

        item.stepcode = ''

      })

      this.$nextTick(_ => {

        this.$refs['saveTagInput' + seq][0].focus()

      })



      this.mouseFocusPosition = seq



      this.dynamicTags.forEach((item, index) => {

        item.editDisabled = seq === index + 1

      })

    },



    // 获取工艺路线列表清单

    async getRouteSearch() {

      const res = await RouteSearch(this.form)

      this.tableData = res.data

      this.total = res.count

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getRouteSearch()

    },

    // 查询

    search() {

      this.getRouteSearch()

    },

    upload() {



    },

    // 重置

    reset() {

      this.form.routecode = ''

      this.form.routename = ''

      this.form.description = ''

      this.form.createuser = ''

      this.getRouteSearch()

    },



    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.getStepSelectArr()

    },

    // 工艺路线预览

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true



      const { data: res } = await ViewRoute({ routecode: row.code })



      this.dynamicTags = []

      this.$nextTick(() => {

        this.dialogForm.code = res[0].code

        this.dialogForm.name = res[0].name

        this.dialogForm.enable = res[0].enable

        this.dialogForm.description = res[0].description

        // this.dialogForm.Data = row.description

        res[0].Data.forEach(item => {

          this.dynamicTags.push(

            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: 'light' }

          )

        })

      })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteRoute({ routecode: row.code }).then(res => {

          if (res.code === '200') {

            this.$message.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getRouteSearch()

          }

        })

      }).catch(() => {

        this.$message.info('已取消删除')

      })

    },

    // 复制按钮

    async copy(operation, row) {

      this.operation = operation

      this.dialogVisible = true



      await this.getStepSelectArr()

      const { data: res } = await ViewRoute({ routecode: row.code })

      // 待改

      this.dynamicTags = []

      this.routeSelectedArr = []

      this.$nextTick(() => {

        this.dialogForm.code = res[0].code

        this.dialogForm.name = res[0].name

        this.dialogForm.enable = res[0].enable

        this.dialogForm.description = res[0].description

        res[0].Data.forEach((item, index) => {

          this.dynamicTags.push(

            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: index === res[0].Data.length - 1 ? 'dark' : 'light' }

          )

          this.routeSelectedArr.push({

            stepcode: item.stepcode,

            stepname: item.stepname,

            value: item.stepname

          })

          this.routeArr = this.routeArr.filter(i => i.stepcode !== item.stepcode)

        })



        this.addDisabled = false

        this.clickSelected = this.dynamicTags.length

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.code = ''

      this.dialogForm.name = ''

      this.dialogForm.enable = 'Y'

      this.dialogForm.description = ''

      this.dialogForm.Data = []



      this.dynamicTags = [

        { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }

      ]

      this.addDisabled = true

      this.routeSelectedArr = []

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      if (this.dynamicTags[0].stepname.trim() === '') {

        return this.$message.info('工艺设置第一项不能为空！')

      }

      const Data = []

      this.dynamicTags.forEach(item => {

        Data.push({

          seq: item.seq,

          stepcode: this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode,

          stepname: item.stepname

        })

      })



      Data.forEach(item => {

        if (item.stepname === this.routeSelectedArr.find(it => it.stepname === item.stepname).stepname) {

          item.stepcode = this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode

        }

      })



      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          const data = {

            code: this.dialogForm.code,

            name: this.dialogForm.name,

            enable: this.dialogForm.enable,

            description: this.dialogForm.description,

            Data: Data

          }



          AddUpdateRoute(this.dialogForm.id, this.operation === 'edit' ? 'Update' : 'Add', data).then(res => {

            if (res.code === '200') {

              this.dialogVisible = false

              this.$message.success(this.operation === 'add' ? '添加成功！' : '复制成功！')

              this.getRouteSearch()

              this.$store.state.app.buttonIsDisabled = false

            } else {

              this.$message.error(this.operation === 'add' ? '添加失败！' : '复制失败！')

            }

          })

        }

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 195

        if (window.innerHeight < 769) {

          this.tableHeight = this.tableHeight - 40

        }

        this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367

        this.$refs.tableDataRef.doLayout()

      })

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    }

  }

}

</script>



<style lang="scss" scoped>

$main_color: #42b983;



/*

实现工艺设置动态添加样式

*/



.orderNumber {

  margin-bottom: 31px;

  position: absolute;

  margin-left: -7px;

  z-index: 2;

  width: 16px;

  height: 16px !important;

  font-size: 12px;

  text-align: center;

  line-height: 15px;

  color: #FFFFFF;

  background-color: #409EFF;

  border-radius: 50%;

}



.el-icon-edit {

  width: 16px;

  height: 16px;

  border-radius: 50%;

  padding: 3px 0 0 3px;

  margin-left: 5px;

  cursor: pointer;

  position: absolute;

  right: 3px;

  bottom: 8px;

}



.el-icon-edit:hover {

  background-color: #99a9bf;

  color: #FFFFFF;

}



.el-icon-close {

  position: absolute;

  top: -8px;

  z-index: 2;

  left: 141px;

  cursor: pointer;

  color: #FFFFFF;

  border-radius: 50%;

  background-color: #ff7474;

  padding: 1px 0 0 1px;

}



//.el-icon-close:hover {

//  background-color: #99a9bf;

//}



.el-tag--dark {

  background-color: $main_color;

  border-color: $main_color;

}



.tagSuccess {

  margin-left: 20px;

  width: 100px;

  height: 32px;

  display: flex;

  justify-content: center;

  color: $main_color;

}



::v-deep .el-button--success {

  width: 40px !important;

  background-color: #ecf5ff;

  border-radius: 0;

  color: $main_color;

}



::v-deep .el-button--success:disabled {

  background-color: #eeeeee;

  color: $main_color;

}



::v-deep .el-tag {

  //height: 30px;

  border-radius: 0;

  border: 1px solid $main_color;

}



::v-deep .el-input--small .el-input__inner {

  border-radius: 0;

}



.settingDiv {

  display: flex;

  width: 100%;

  padding-left: 7px;

  height: 56px;

  overflow-x: scroll;

  overflow-y: hidden;

  align-items: center;

  background: aliceblue;

}



.elTag {

  margin-left: 0;

  width: 150px;

  position: relative;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.autocompleteClass {

  .el-autocomplete-suggestion li {

    //color: red;

  }

}

</style>



<style>

.el-table .custom-row {

  background: #f8f8fa;

}

</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <!--        <el-button v-waves type="primary" icon="el-icon-upload2" @click="upload">导入</el-button>-->
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="工艺路线编码" style=" display: flex;">
              <el-input v-model="form.routecode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="工艺名称" style=" display: flex;">
              <el-input v-model="form.routename" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="工艺描述" style=" display: flex;">
              <el-input v-model="form.description" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="创建人员" style=" display: flex;">
              <el-input v-model="form.createuser" style="width: 200px" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">
            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
        />
      </div>

      <div class="elTableDiv">
        <!--        <TableColumnSettings-->
        <!--          :list1="tableColumnSettingsArray"-->
        <!--          @tableColumnUpdate="tableColumnUpdate"-->
        <!--        />-->
        <el-table
          ref="tableDataRef"
          :key="tableTimeStampKey"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >

          <el-table-column
            v-for="item in tableColumnSettingsArray"
            v-if="item.show"
            :key="item.id"
            :sortable="item.sortable"
            :prop="item.prop"
            :min-width="item.minWidth"
            :label="item.label"
            :width="item.width"
            show-tooltip-when-overflow
            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
          >
            <template slot-scope="{row}">
              <div v-if="!row[item.prop]">/</div>
              <div v-else-if="item.prop==='enable'">
                <div v-if="row[item.prop]==='Y'">
                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
                  是
                </div>
                <div v-if="row[item.prop]==='N'">
                  <i class="el-icon-info" style="margin-right: 2px" />
                  否
                </div>
              </div>
              <div v-else>{{ row[item.prop] }}</div>
            </template>
          </el-table-column>

          <!--          <el-table-column-->
          <!--            type="selection"-->
          <!--            width="50"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="RowNum"-->
          <!--            width="50"-->
          <!--            label="序号"-->
          <!--            fixed-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="code"-->
          <!--            label="编码"-->
          <!--            show-tooltip-when-overflow-->
          <!--            sortable="custom"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="name"-->
          <!--            show-tooltip-when-overflow-->
          <!--            label="名称"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="description"-->
          <!--            label="工艺路线描述"-->
          <!--            sortable="custom"-->
          <!--            show-tooltip-when-overflow-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div v-if="row.description">{{ row.description }}</div>-->
          <!--              <div v-else>/</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="enable"-->
          <!--            show-tooltip-when-overflow-->
          <!--            label="使用状态"-->
          <!--            sortable="custom"-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div v-if="row.enable==='Y'">-->
          <!--                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />-->
          <!--                是-->
          <!--              </div>-->
          <!--              <div v-if="row.enable==='N'">-->
          <!--                <i class="el-icon-info" style="margin-right: 2px" />-->
          <!--                否-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="lm_user"-->
          <!--            show-tooltip-when-overflow-->
          <!--            label="创建人员"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="lm_date"-->
          <!--            label="创建时间"-->
          <!--            show-tooltip-when-overflow-->
          <!--            sortable="custom"-->
          <!--            width="160"-->
          <!--          />-->
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="预览" placement="top">
                  <i
                    class="el-icon-view"
                    :style="{color:$store.state.settings.theme}"
                    style="margin-right:15px;cursor: pointer;"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" style="margin-right:15px;" @click="del(row)" />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="复制" placement="top">
                  <i :style="{color:$store.state.settings.theme}" class="el-icon-document-copy" style="cursor: pointer;color:#42b983" @click="copy('copy',row)" />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getRouteSearch"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':(operation==='edit'?'预览':'复制')"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
      :top="isIpad?'5vh':'15vh'"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" style="height: 500px" :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <div style="display: flex">
          <el-form-item label="工艺路线编码" prop="code" style="margin-right: 20px">
            <el-input v-model="dialogForm.code" :disabled="operation==='edit'" style="width: 220px" />
          </el-form-item>
          <el-form-item label="工艺名称" prop="name">
            <el-input v-model="dialogForm.name" :disabled="operation==='edit'" style="width: 220px" />
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item prop="enable" label="使用状态" style="margin-right: 20px">
            <el-select
              v-model="dialogForm.enable"
              filterable
              :disabled="operation==='edit'"
              :popper-append-to-body="false"
              style="width: 220px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in isEnableArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工艺描述" prop="description">
            <el-input
              v-model="dialogForm.description"
              :disabled="operation==='edit'"
              type="textarea"
              style="width: 220px"
            />
          </el-form-item>
        </div>
        <el-form-item label="工艺设置" prop="Data" style="margin-top: 30px">
          <div class="settingDiv">
            <!--   实现工艺设置动态添加-->
            <div v-for="(tag,index) in dynamicTags" :key="tag.seq" style="display: flex;align-items: center">
              <div style="display: flex;align-items: center;position: relative;">
                <div
                  class="orderNumber"
                  :style="{
                    backgroundColor:index===0?'#f8f8fa':'#409EFF',
                    color:index===0?'#c6bbc4':'#FFFFFF',
                    border:index===0?'1px solid #c6bbc4':'1px solid #409EFF',
                    zIndex:tag.label===selectedName?0:2
                  }"
                >
                  {{ index + 1 }}
                </div>

                <!--                <el-tooltip-->
                <!--                  class="item"-->
                <!--                  effect="dark"-->
                <!--                  :content="tag.stepname"-->
                <!--                  placement="top"-->
                <!--                >-->
                <!--                  @close="handleTagClose(tag.stepname)"-->
                <!--                  :closable="index!==0"-->

                <el-tag
                  v-if="tag.stepname!==selectedName"
                  :disable-transitions="false"
                  class="elTag"
                  :effect="tag.effect"
                  @click="elTagClick(tag)"
                >
                  {{ tag.stepname }}
                  <i
                    v-if="tag.editDisabled&&operation!=='edit'"
                    class="el-icon-edit"
                    @click="tagEdit(tag)"
                  />
                </el-tag>
                <!--                </el-tooltip>-->
                <!--                {{ tag.editDisabled }}-->
                <!--                left:tag.stepname===selectedName?'191px':'141px',-->
                <i
                  v-if="index!==0&&tag.editDisabled&&operation!=='edit'"
                  :style="{
                    top:tag.stepname===selectedName?'-2px':'-8px',
                  }"
                  class="el-icon-close"
                  @click="handleTagClose(tag)"
                />
                <el-autocomplete
                  v-if="tag.stepname===selectedName"
                  :ref="'saveTagInput'+tag.seq"
                  v-model="autocompleteValue"
                  class="input-new-tag"
                  size="small"
                  :fetch-suggestions="querySearch"
                  style="margin-left: 0;width: 150px;transform: translate(1)"
                  autofocus
                  :debounce="300"
                  :popper-append-to-body="false"
                  popper-class="autocompleteClass"
                  @select="val=>handleSelect(val,tag)"
                  @keyup.enter.native="handleInputConfirm(tag)"
                />
                <!--                @keyup.enter.native="handleInputConfirm(tag)"-->

                <!--        @blur="handleBlur2"-->
                <div
                  v-if="index!==dynamicTags.length-1"
                  style="width: 40px;height: 1px;border: 1px solid #42b983"
                />
              </div>
            </div>

            <el-button
              v-if="operation!=='edit'"
              v-waves
              type="success"
              :disabled="addDisabled"
              class="tagSuccess"
              size="small"
              icon="el-icon-plus"
              @click="showInput"
            />

          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-if="operation==='edit'" v-waves @click="dialogVisibleCancel">返 回</el-button>
          <el-button v-if="operation!=='edit'" v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-if="operation!=='edit'"
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { AddUpdateRoute, DeleteRoute, RouteSearch, StepSelect, ViewRoute } from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import TableColumnSettings from '@/components/TableColumnSettings'

export default {
  name: 'ProcessRoute',
  components: {
    Pagination, TableColumnSettings
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      isIpad: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        routecode: '', // 工艺路线编码
        routename: '', // 工艺路线名称
        description: '', // 工艺路线描述
        createuser: '', // 创建人员
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      isEnableArr: [
        { label: '是', value: 'Y' },
        { label: '否', value: 'N' }
      ],
      total: 10,
      tableData: [],
      tableColumnSettingsArray: [
        { minWidth: 50, width: false, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示
        { minWidth: 25, width: 50, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom
        {
          minWidth: 110,
          width: false,
          prop: 'code',
          label: '编码',
          id: 3,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'name',
          label: '名称',
          id: 4,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 330,
          width: false,
          prop: 'description',
          label: '工艺路线描述',
          id: 5,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'enable',
          label: '使用状态',
          id: 6,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'lm_user',
          label: '创建人员',
          id: 7,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 160,
          width: false,
          prop: 'lm_date',
          label: '创建时间',
          id: 8,
          show: true,
          fixed: false,
          sortable: true
        }
      ],
      tableTimeStampKey: new Date().getTime(), // 表格key
      dialogVisible: false,
      dialogForm: {
        id: '',
        code: '',
        name: '',
        enable: 'Y',
        description: '',
        Data: []
      },
      dynamicTags: [// 工艺设置数组
        { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
        // { editDisabled: true, stepcode: 'Step02', seq: 2, stepname: '奶', effect: 'light' },
        // { editDisabled: true, stepcode: 'Step03', seq: 3, stepname: '大', effect: 'light' }
      ],
      clickSelected: '', // 鼠标点击选中的值
      selectedName: '', // 选中的名称
      autocompleteValue: '', // 可搜索输入框中的值
      routeArr: [], // 工艺设置下拉所有值
      routeSelectedArr: [], // 工艺设置下拉已选的值
      addDisabled: true, // 添加按钮是否可点击
      // editDisabled: true, // 修改按钮是否可点击
      mouseFocusPosition: 0, // 鼠标聚焦的位置
      operation: '',
      dialogFormRules: {
        code: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ],
        enable: [
          { required: true, message: '请选择使用状态', trigger: ['blur', 'change'] }
        ]
        // Data: [
        //   { required: true, message: '请设置工艺', trigger: ['blur', 'change'] }
        // ]
      }

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getRouteSearch()
  },
  created() {
    this.getRouteSearch()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    tableColumnUpdate(val, isCopyTrue) {
      if (isCopyTrue) {
        this.tableColumnSettingsArray = val
      }
      this.tableTimeStampKey = new Date().getTime()
      this.$refs.tableDataRef.doLayout()
    },
    // 远程搜索
    querySearch(queryString, cb) {
      const routeArr = this.routeArr
      routeArr.forEach(item => {
        item.value = item.stepname
      })
      const results = queryString ? routeArr.filter(this.createFilter(queryString)) : routeArr
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 过滤
    createFilter(queryString) {
      return (res) => {
        return (res.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    // 工艺设置 下拉获取所有
    async getStepSelectArr() {
      const { data: res } = await StepSelect()
      this.routeArr = res
    },
    // 处理下拉选择
    handleSelect(item, tag) {
      this.autocompleteValue = item.value
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + this.mouseFocusPosition][0].focus()
        this.handleInputConfirm(tag)
      })
    },
    // 输入框确认事件
    handleInputConfirm(tag) {
      // 1.选择内容不能为空
      if (this.autocompleteValue.trim().length < 1) {
        return this.$message.info('选择内容不能为空！')
      }
      // 2.输入框内容与下拉选项内容不匹配
      let flag = false
      this.routeArr.forEach(item => {
        if (item.stepname === this.autocompleteValue) {
          flag = true
        }
      })
      if (!flag) {
        return this.$message.info('输入框内容与下拉选项内容不匹配！')
      }

      // 3.输入框内容与已选内容相同时不能保存
      let flag2 = false
      this.dynamicTags.forEach(item => {
        if (item.stepname === this.autocompleteValue.trim()) {
          flag2 = true
        }
      })
      if (tag.stepname === this.autocompleteValue.trim()) {
        flag2 = false
      }
      if (flag2) {
        return this.$message.info('此工序已选，请选择其它工序！')
      }

      this.routeArr.forEach((item, index) => {
        if (this.autocompleteValue.trim() === item.stepname) {
          this.routeSelectedArr.push({
            stepcode: item.stepcode,
            stepname: item.stepname,
            value: item.value
          })

          this.routeArr.splice(index, 1)
        }
      })

      // 将值替换到原tag位置上
      this.dynamicTags.forEach((item, index) => {
        if ((index + 1) === tag.seq) {
          item.stepname = this.autocompleteValue
          item.effect = 'dark'
        }
        item.editDisabled = true
      })
      this.clickSelected = this.dynamicTags.findIndex(i => i.effect === 'dark') + 1

      this.addDisabled = false
      this.editDisabled = true
      this.selectedName = ''
    },
    // tag点击修改按钮
    tagEdit(tag) {
      this.autocompleteValue = ''
      this.dynamicTags.forEach(item => {
        item.stepname = item.stepname.trim()
        item.editDisabled = false
        if (item.seq !== tag.seq) {
          item.effect = 'light'
        } else {
          item.effect = 'dark'
        }
      })

      if (tag.stepname !== '') {
        const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)

        this.routeArr.push(
          {
            stepcode: routeSelectedArr.stepcode,
            stepname: routeSelectedArr.stepname,
            value: routeSelectedArr.value
          }
        )
      }

      this.addDisabled = true
      this.selectedName = tag.stepname
      this.autocompleteValue = tag.stepname
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + tag.seq][0].focus()
      })
      this.mouseFocusPosition = tag.seq
    },
    // tag点击事件
    elTagClick(tag) {
      if (this.dynamicTags.every(i => i.editDisabled)) {
        this.clickSelected = tag.seq
        if (tag.effect === 'dark') {

        } else {
          this.dynamicTags.forEach(item => {
            item.effect = 'light'
          })
          if (tag.effect === 'light') {
            tag.effect = 'dark'
          } else if (tag.effect === 'dark') {
            tag.effect = 'light'
          }
        }
      }
    },
    // 处理tag关闭事件
    handleTagClose(tag) {
      // 当选中的步骤被删除时
      if (tag.effect === 'dark') {
        this.clickSelected = this.dynamicTags.length - 1
      }
      this.dynamicTags.forEach((item, index) => {
        if (item.seq === tag.seq) {
          this.dynamicTags.splice(index, 1)
        }
      })

      const routeSelectedArr = this.routeSelectedArr.find(item => item.stepname === tag.stepname)

      if (routeSelectedArr !== undefined) {
        this.routeArr.push(
          {
            stepcode: routeSelectedArr.stepcode,
            stepname: routeSelectedArr.stepname,
            value: routeSelectedArr.value
          }
        )
      }
      this.routeArr = this.routeArr.filter((currentValue, currentIndex, selfArr) => {
        return selfArr.findIndex(item => item.stepcode === currentValue.stepcode) === currentIndex
      })

      // 重新排序
      this.dynamicTags.forEach((item, index) => {
        item.editDisabled = true
        item.seq = index + 1
        item.stepcode = ''
        item.effect = index === this.dynamicTags.length - 1 ? 'dark' : 'light'
      })
      this.addDisabled = false
    },
    // tag添加按钮
    showInput() {
      const seq = this.dynamicTags.findIndex(i => i.effect === 'dark') + 2

      // 先将每个的tag标签颜色改为浅色
      this.dynamicTags.forEach(i => {
        i.effect = 'light'
      })

      this.autocompleteValue = ''
      this.addDisabled = true
      this.editDisabled = false

      this.dynamicTags.splice(this.clickSelected, 0, { editDisabled: true, seq: seq, stepname: '', effect: 'dark' })
      this.dynamicTags.forEach((item, index) => {
        item.seq = index + 1
        item.stepcode = ''
      })
      this.$nextTick(_ => {
        this.$refs['saveTagInput' + seq][0].focus()
      })

      this.mouseFocusPosition = seq

      this.dynamicTags.forEach((item, index) => {
        item.editDisabled = seq === index + 1
      })
    },

    // 获取工艺路线列表清单
    async getRouteSearch() {
      const res = await RouteSearch(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getRouteSearch()
    },
    // 查询
    search() {
      this.getRouteSearch()
    },
    upload() {

    },
    // 重置
    reset() {
      this.form.routecode = ''
      this.form.routename = ''
      this.form.description = ''
      this.form.createuser = ''
      this.getRouteSearch()
    },

    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.getStepSelectArr()
    },
    // 工艺路线预览
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      const { data: res } = await ViewRoute({ routecode: row.code })

      this.dynamicTags = []
      this.$nextTick(() => {
        this.dialogForm.code = res[0].code
        this.dialogForm.name = res[0].name
        this.dialogForm.enable = res[0].enable
        this.dialogForm.description = res[0].description
        // this.dialogForm.Data = row.description
        res[0].Data.forEach(item => {
          this.dynamicTags.push(
            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: 'light' }
          )
        })
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteRoute({ routecode: row.code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getRouteSearch()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 复制按钮
    async copy(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      await this.getStepSelectArr()
      const { data: res } = await ViewRoute({ routecode: row.code })
      // 待改
      this.dynamicTags = []
      this.routeSelectedArr = []
      this.$nextTick(() => {
        this.dialogForm.code = res[0].code
        this.dialogForm.name = res[0].name
        this.dialogForm.enable = res[0].enable
        this.dialogForm.description = res[0].description
        res[0].Data.forEach((item, index) => {
          this.dynamicTags.push(
            { seq: item.seq, stepname: item.stepname, stepcode: item.stepcode, editDisabled: true, effect: index === res[0].Data.length - 1 ? 'dark' : 'light' }
          )
          this.routeSelectedArr.push({
            stepcode: item.stepcode,
            stepname: item.stepname,
            value: item.stepname
          })
          this.routeArr = this.routeArr.filter(i => i.stepcode !== item.stepcode)
        })

        this.addDisabled = false
        this.clickSelected = this.dynamicTags.length
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.code = ''
      this.dialogForm.name = ''
      this.dialogForm.enable = 'Y'
      this.dialogForm.description = ''
      this.dialogForm.Data = []

      this.dynamicTags = [
        { editDisabled: true, stepcode: '', seq: 1, stepname: ' ', effect: 'light' }
      ]
      this.addDisabled = true
      this.routeSelectedArr = []
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      if (this.dynamicTags[0].stepname.trim() === '') {
        return this.$message.info('工艺设置第一项不能为空！')
      }
      const Data = []
      this.dynamicTags.forEach(item => {
        Data.push({
          seq: item.seq,
          stepcode: this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode,
          stepname: item.stepname
        })
      })

      Data.forEach(item => {
        if (item.stepname === this.routeSelectedArr.find(it => it.stepname === item.stepname).stepname) {
          item.stepcode = this.routeSelectedArr.find(it => it.stepname === item.stepname).stepcode
        }
      })

      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          const data = {
            code: this.dialogForm.code,
            name: this.dialogForm.name,
            enable: this.dialogForm.enable,
            description: this.dialogForm.description,
            Data: Data
          }

          AddUpdateRoute(this.dialogForm.id, this.operation === 'edit' ? 'Update' : 'Add', data).then(res => {
            if (res.code === '200') {
              this.dialogVisible = false
              this.$message.success(this.operation === 'add' ? '添加成功！' : '复制成功！')
              this.getRouteSearch()
              this.$store.state.app.buttonIsDisabled = false
            } else {
              this.$message.error(this.operation === 'add' ? '添加失败！' : '复制失败！')
            }
          })
        }
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 195
        if (window.innerHeight < 769) {
          this.tableHeight = this.tableHeight - 40
        }
        this.isIpad = window.innerHeight < 769 && window.innerWidth < 1367
        this.$refs.tableDataRef.doLayout()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    }
  }
}
</script>

<style lang="scss" scoped>
$main_color: #42b983;

/*
实现工艺设置动态添加样式
*/

.orderNumber {
  margin-bottom: 31px;
  position: absolute;
  margin-left: -7px;
  z-index: 2;
  width: 16px;
  height: 16px !important;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
  color: #FFFFFF;
  background-color: #409EFF;
  border-radius: 50%;
}

.el-icon-edit {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  padding: 3px 0 0 3px;
  margin-left: 5px;
  cursor: pointer;
  position: absolute;
  right: 3px;
  bottom: 8px;
}

.el-icon-edit:hover {
  background-color: #99a9bf;
  color: #FFFFFF;
}

.el-icon-close {
  position: absolute;
  top: -8px;
  z-index: 2;
  left: 141px;
  cursor: pointer;
  color: #FFFFFF;
  border-radius: 50%;
  background-color: #ff7474;
  padding: 1px 0 0 1px;
}

//.el-icon-close:hover {
//  background-color: #99a9bf;
//}

.el-tag--dark {
  background-color: $main_color;
  border-color: $main_color;
}

.tagSuccess {
  margin-left: 20px;
  width: 100px;
  height: 32px;
  display: flex;
  justify-content: center;
  color: $main_color;
}

::v-deep .el-button--success {
  width: 40px !important;
  background-color: #ecf5ff;
  border-radius: 0;
  color: $main_color;
}

::v-deep .el-button--success:disabled {
  background-color: #eeeeee;
  color: $main_color;
}

::v-deep .el-tag {
  //height: 30px;
  border-radius: 0;
  border: 1px solid $main_color;
}

::v-deep .el-input--small .el-input__inner {
  border-radius: 0;
}

.settingDiv {
  display: flex;
  width: 100%;
  padding-left: 7px;
  height: 56px;
  overflow-x: scroll;
  overflow-y: hidden;
  align-items: center;
  background: aliceblue;
}

.elTag {
  margin-left: 0;
  width: 150px;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocompleteClass {
  .el-autocomplete-suggestion li {
    //color: red;
  }
}
</style>

<style>
.el-table .custom-row {
  background: #f8f8fa;
}
</style>

 src/views/basicSettings/roleDivider.vue

@@ -1,555 +1,561 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <el-button v-waves type="danger" icon="el-icon-error" @click="batchCancel">批量取消授权</el-button>

        <!--        <el-button v-waves type="warning" icon="el-icon-close">关闭</el-button>-->

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="角色编码" style=" display: flex;">

              <el-select

                v-model="form.role_code"

                style="width:200px"

                placeholder="请选择"

                @change="roleChange"

              >

                <el-option

                  v-for="item in roleArr"

                  :key="item.rolecode"

                  :label="item.rolename"

                  :value="item.rolecode"

                />

              </el-select>

            </el-form-item>

            <el-form-item label="用户编码" style=" display: flex;">

              <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="用户名称" style=" display: flex;">

              <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />

            </el-form-item>



            <el-form-item label="组织编码" style=" display: flex;">

              <el-cascader

                ref="cascader"

                v-model="form.storg_code"

                :options="cascaderOptions"

                filterable

                :props="defaultProps"

                :show-all-levels="false"

              />

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="岗位名称" style=" display: flex;">

              <el-select

                v-model="form.post_code"

                style="width:200px"

                multiple

                collapse-tags

                placeholder="请选择"

              >

                <el-option

                  v-for="item in postArr"

                  :key="item.postcode"

                  :label="item.postname"

                  :value="item.postcode"

                />

              </el-select>

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="班组编码" style=" display: flex;">

              <el-select

                v-model="form.group_code"

                style="width:200px"

                multiple

                collapse-tags

                placeholder="请选择"

              >

                <el-option

                  v-for="item in groupArr"

                  :key="item.usergroupcode"

                  :label="item.usergroupname"

                  :value="item.usergroupcode"

                />

              </el-select>

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="getRoleAssignedUserData">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

        >

          <svg-icon

            v-show="mouseHoverType==='mouseout'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"

            @mouseenter="mouseHoverType=$event.type"

          />

          <svg-icon

            v-show="mouseHoverType==='mouseenter'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"

            @click="isExpandForm=!isExpandForm"

            @mouseout="mouseHoverType=$event.type"

          />

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"

          border

          row-class-name="custom-row"

          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"

          highlight-current-row

          :row-key="getRowKey"

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @selection-change="handleSelectionChange"

          @sort-change="sortChange"

        >

          <el-table-column

            type="selection"

            width="50"

            :reserve-selection="true"

            fixed

          />

          <el-table-column

            prop="rowNum"

            width="50"

            fixed

            label="序号"

          />

          <el-table-column

            prop="usercode"

            label="用户编码"

            sortable="custom"

          />

          <el-table-column

            prop="username"

            label="用户名称"

            sortable="custom"

          />

          <el-table-column

            prop="storg_name"

            label="所属组织"

            sortable="custom"

          />

          <el-table-column

            prop="rolename"

            label="角色"

            show-overflow-tooltip

            sortable="custom"

          >

            <template slot-scope="{row}">

              {{ row.rolename ? row.rolename : '/' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="postname"

            label="岗位"

            sortable="custom"

            show-overflow-tooltip

          >

            <template slot-scope="{row}">

              {{ row.postname ? row.postname : '/' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="group_name"

            label="班组"

            show-overflow-tooltip

            sortable="custom"

          >

            <template slot-scope="{row}">

              {{ row.group_name ? row.group_name : '/' }}

            </template>

          </el-table-column>



          <el-table-column

            label="操作"

            width="200"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-button

                  type="text"

                  style="cursor: pointer;font-size: 14px"

                  @click="cancel(row.usercode)"

                >取消授权

                </el-button>



              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes,jumper"

        popper-class="select_bottom"

        @pagination="getRoleAssignedUserData"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      title="新增"

      :visible.sync="dialogVisible"

      width="1200px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <div>

        <el-table

          ref="tableDataDialogRef"

          class="tableFixed"

          :data="tableDataDialog"

          row-class-name="custom-row"



          height="400"

          border

          :style="{width: 100+'%',height:'400px',}"

          highlight-current-row

          :row-key="getRowKey"

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @selection-change="handleDialogSelectionChange"

        >

          <el-table-column

            type="selection"

            width="50"

            :reserve-selection="true"

            fixed

          />

          <el-table-column

            prop="rowNum"

            width="50"

            fixed

            label="序号"

          />

          <el-table-column

            prop="usercode"

            label="用户编码"

          />

          <el-table-column

            prop="username"

            label="用户名称"

          />

          <el-table-column

            prop="storg_name"

            label="所属组织"

          />

          <el-table-column

            prop="rolename"

            show-overflow-tooltip

            label="角色"

          >

            <template slot-scope="{row}">

              {{ row.rolename?row.rolename:'/' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="postname"

            label="岗位"

            show-overflow-tooltip

          >

            <template slot-scope="{row}">

              {{ row.postname?row.postname:'/' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="group_name"

            show-overflow-tooltip

            label="班组"

          >

            <template slot-scope="{row}">

              {{ row.group_name?row.group_name:'/' }}

            </template>

          </el-table-column>

        </el-table>

        <!--分页-->

        <pagination

          :total="totalDialog"

          :page.sync="dialogForm.page"

          :limit.sync="dialogForm.rows"

          align="right"

          style="margin-top: 10px;"

          layout="total,prev, pager, next,sizes,jumper"

          popper-class="select_bottom"

          @pagination="add"

        />

      </div>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button

            v-waves

            @click="dialogVisibleCancel"

          >取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import {

  RoleAssignedUserBatchAdd,

  RoleAssignedUserBatchCancel,

  RoleAssignedUserData

} from '@/api/basicSettings'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import arrayToTree from 'array-to-tree'

import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData'



export default {

  name: 'RoleDivider',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      form: {

        flag: 'TRUE', // TRUE(已关联) FALSE(未关联)

        role_code: '', // 角色编码

        usercode: '', // 用户编码

        username: '', // 用户名称

        storg_code: [], //

        post_code: [], //

        group_code: [], //

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      total: 10,

      tableData: [],



      cascaderOptions: [],

      defaultProps: {

        checkStrictly: true,

        expandTrigger: 'hover',

        value: 'torg_code',

        label: 'torg_name'

      },

      roleArr: [],

      postArr: [],

      groupArr: [],



      dialogVisible: false,

      dialogForm: {

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      tableDataDialog: [],

      totalDialog: 10,



      batchRoleCode: [],

      batchDialogRoleCode: []



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    this.getAllSelectData()

    this.getPrentOrganization()

  },

  methods: {

    // 组织架构大列表查询

    async getRoleAssignedUserData() {

      if (window.location.hash.indexOf('?') !== -1) {

        this.form.role_code = window.location.hash.split('?')[1].split('=')[1]

      }



      if (!this.form.role_code) {

        this.form.role_code = this.roleArr[0].rolecode

      }



      this.form.storg_code = this.form.storg_code ? this.form.storg_code[this.form.storg_code.length - 1] : ''

      this.form.post_code = this.form.post_code ? this.form.post_code.join(',') : ''

      this.form.group_code = this.form.group_code ? this.form.group_code.join(',') : ''



      const res = await RoleAssignedUserData(this.form)

      this.tableData = res.data

      this.total = res.count

    },

    async getPrentOrganization() {

      const { data: res } = await PrentOrganization()

      this.cascaderOptions = arrayToTree(res, {

        parentProperty: 'parent_id',

        customID: 'torg_code',

        childrenProperty: 'children'

      })

    },

    // 岗位 角色 班组

    async getAllSelectData() {

      const { data: res2 } = await RolePermissions()

      this.roleArr = res2

      await this.getRoleAssignedUserData()



      const { data: res1 } = await PostPermissions()

      this.postArr = res1



      const { data: res3 } = await GroupsPermissions()

      this.groupArr = res3

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getRoleAssignedUserData()

    },

    // 重置

    reset() {

      this.form.usercode = ''

      this.form.username = ''



      this.form.storg_code = []

      this.form.post_code = []

      this.form.group_code = []

      this.getRoleAssignedUserData()

    },

    roleChange(val) {

      this.getRoleAssignedUserData()

      this.batchRoleCode = []

      this.$refs.tableDataRef.clearSelection()

    },



    async cancel(code) {

      // if (!this.form.role_code) {

      //   return this.$message.error('')

      // }



      const res = await RoleAssignedUserBatchCancel([code], this.form.role_code)

      if (res.code === '200') {

        this.$notify.success('取消授权成功！')

        await this.getRoleAssignedUserData()

      } else {

        this.$notify.error('取消授权失败！')

      }

    },



    async batchCancel() {

      const res = await RoleAssignedUserBatchCancel(this.batchRoleCode, this.form.role_code)

      if (res.code === '200') {

        this.$notify.success(this.batchRoleCode.length + '个用户取消授权成功！')

        await this.getRoleAssignedUserData()

        this.batchRoleCode = []

        this.$refs.tableDataRef.clearSelection()

      } else {

        this.$notify.error(this.batchRoleCode.length + '个用户取消授权失败！')

      }

    },



    // 新增按钮

    async add() {

      this.dialogVisible = true



      const data = {

        flag: 'FALSE', // TRUE(已关联) FALSE(未关联)

        role_code: this.form.role_code, // 角色编码

        usercode: '', // 用户编码

        username: '', // 用户名称

        storg_code: '', //

        post_code: '', //

        group_code: '', //

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: this.dialogForm.page, // 第几页

        rows: this.dialogForm.rows // 每页多少条

      }

      const res = await RoleAssignedUserData(data)

      this.tableDataDialog = res.data

      this.totalDialog = res.count

    },



    // 对话框关闭事件

    handleClose() {

      // this.form.flag = 'TRUE'

    },

    getRowKey(row) {

      return row.usercode

    },

    handleSelectionChange(rows) {

      this.batchRoleCode = rows.map(i => i.usercode)

    },

    handleDialogSelectionChange(rows) {

      this.batchDialogRoleCode = rows.map(i => i.usercode)

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    async  dialogVisibleConfirm() {

      const res = await RoleAssignedUserBatchAdd(this.batchDialogRoleCode, this.form.role_code)

      if (res.code === '200') {

        this.$notify.success(this.batchDialogRoleCode.length + '个用户新增授权成功！')

        await this.getRoleAssignedUserData()

        this.batchDialogRoleCode = []

        this.$refs.tableDataDialogRef.clearSelection()

        this.dialogVisible = false

      } else {

        this.$notify.error(this.batchDialogRoleCode.length + '个用户新增授权失败！')

      }

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 255

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button v-waves type="danger" icon="el-icon-error" @click="batchCancel">批量取消授权</el-button>
        <!--        <el-button v-waves type="warning" icon="el-icon-close">关闭</el-button>-->
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="角色编码" style=" display: flex;">
              <el-select
                v-model="form.role_code"
                style="width:200px"
                placeholder="请选择"
                @change="roleChange"
              >
                <el-option
                  v-for="item in roleArr"
                  :key="item.rolecode"
                  :label="item.rolename"
                  :value="item.rolecode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="用户编码" style=" display: flex;">
              <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="用户名称" style=" display: flex;">
              <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />
            </el-form-item>

            <el-form-item label="组织编码" style=" display: flex;">
              <el-cascader
                ref="cascader"
                v-model="form.storg_code"
                :options="cascaderOptions"
                filterable
                :props="defaultProps"
                :show-all-levels="false"
              />
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="岗位名称" style=" display: flex;">
              <el-select
                v-model="form.post_code"
                style="width:200px"
                multiple
                collapse-tags
                placeholder="请选择"
              >
                <el-option
                  v-for="item in postArr"
                  :key="item.postcode"
                  :label="item.postname"
                  :value="item.postcode"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="班组编码" style=" display: flex;">
              <el-select
                v-model="form.group_code"
                style="width:200px"
                multiple
                collapse-tags
                placeholder="请选择"
              >
                <el-option
                  v-for="item in groupArr"
                  :key="item.usergroupcode"
                  :label="item.usergroupname"
                  :value="item.usergroupcode"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="getRoleAssignedUserData">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
        >
          <svg-icon
            v-show="mouseHoverType==='mouseout'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
            @mouseenter="mouseHoverType=$event.type"
          />
          <svg-icon
            v-show="mouseHoverType==='mouseenter'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
            @click="isExpandForm=!isExpandForm"
            @mouseout="mouseHoverType=$event.type"
          />
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"
          highlight-current-row
          :row-key="getRowKey"
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @selection-change="handleSelectionChange"
          @sort-change="sortChange"
        >
          <el-table-column
            type="selection"
            width="50"
            :reserve-selection="true"
            fixed
          />
          <el-table-column
            prop="rowNum"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="usercode"
            label="用户编码"
            sortable="custom"
          />
          <el-table-column
            prop="username"
            label="用户名称"
            sortable="custom"
          />
          <el-table-column
            prop="storg_name"
            label="所属组织"
            sortable="custom"
          />
          <el-table-column
            prop="rolename"
            label="角色"
            show-overflow-tooltip
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.rolename ? row.rolename : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="postname"
            label="岗位"
            sortable="custom"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">
              {{ row.postname ? row.postname : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="group_name"
            label="班组"
            show-overflow-tooltip
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.group_name ? row.group_name : '/' }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="200"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-button
                  type="text"
                  style="cursor: pointer;font-size: 14px"
                  @click="cancel(row.usercode)"
                >取消授权
                </el-button>

              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getRoleAssignedUserData"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="1200px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <div>
        <el-table
          ref="tableDataDialogRef"
          class="tableFixed"
          :data="tableDataDialog"
          row-class-name="custom-row"

          height="400"
          border
          :style="{width: 100+'%',height:'400px',}"
          highlight-current-row
          :row-key="getRowKey"
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @selection-change="handleDialogSelectionChange"
        >
          <el-table-column
            type="selection"
            width="50"
            :reserve-selection="true"
            fixed
          />
          <el-table-column
            prop="rowNum"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="usercode"
            label="用户编码"
          />
          <el-table-column
            prop="username"
            label="用户名称"
          />
          <el-table-column
            prop="storg_name"
            label="所属组织"
          />
          <el-table-column
            prop="rolename"
            show-overflow-tooltip
            label="角色"
          >
            <template slot-scope="{row}">
              {{ row.rolename?row.rolename:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="postname"
            label="岗位"
            show-overflow-tooltip
          >
            <template slot-scope="{row}">
              {{ row.postname?row.postname:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="group_name"
            show-overflow-tooltip
            label="班组"
          >
            <template slot-scope="{row}">
              {{ row.group_name?row.group_name:'/' }}
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <pagination
          :total="totalDialog"
          :page.sync="dialogForm.page"
          :limit.sync="dialogForm.rows"
          align="right"
          style="margin-top: 10px;"
          layout="total,prev, pager, next,sizes,jumper"
          popper-class="select_bottom"
          @pagination="add"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button
            v-waves
            @click="dialogVisibleCancel"
          >取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  RoleAssignedUserBatchAdd,
  RoleAssignedUserBatchCancel,
  RoleAssignedUserData
} from '@/api/basicSettings'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import arrayToTree from 'array-to-tree'
import { GroupsPermissions, PostPermissions, PrentOrganization, RolePermissions } from '@/api/GeneralBasicData'

export default {
  name: 'RoleDivider',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        flag: 'TRUE', // TRUE(已关联) FALSE(未关联)
        role_code: '', // 角色编码
        usercode: '', // 用户编码
        username: '', // 用户名称
        storg_code: [], //
        post_code: [], //
        group_code: [], //
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],

      cascaderOptions: [],
      defaultProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        value: 'torg_code',
        label: 'torg_name'
      },
      roleArr: [],
      postArr: [],
      groupArr: [],

      dialogVisible: false,
      dialogForm: {
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      tableDataDialog: [],
      totalDialog: 10,

      batchRoleCode: [],
      batchDialogRoleCode: []

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getAllSelectData()
    this.getPrentOrganization()
  },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.getAllSelectData()
    this.getPrentOrganization()
  },
  methods: {
    // 组织架构大列表查询
    async getRoleAssignedUserData() {
      if (window.location.hash.indexOf('?') !== -1) {
        this.form.role_code = window.location.hash.split('?')[1].split('=')[1]
      }

      if (!this.form.role_code) {
        this.form.role_code = this.roleArr[0].rolecode
      }

      this.form.storg_code = this.form.storg_code ? this.form.storg_code[this.form.storg_code.length - 1] : ''
      this.form.post_code = this.form.post_code ? this.form.post_code.join(',') : ''
      this.form.group_code = this.form.group_code ? this.form.group_code.join(',') : ''

      const res = await RoleAssignedUserData(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    async getPrentOrganization() {
      const { data: res } = await PrentOrganization()
      this.cascaderOptions = arrayToTree(res, {
        parentProperty: 'parent_id',
        customID: 'torg_code',
        childrenProperty: 'children'
      })
    },
    // 岗位 角色 班组
    async getAllSelectData() {
      const { data: res2 } = await RolePermissions()
      this.roleArr = res2
      await this.getRoleAssignedUserData()

      const { data: res1 } = await PostPermissions()
      this.postArr = res1

      const { data: res3 } = await GroupsPermissions()
      this.groupArr = res3
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getRoleAssignedUserData()
    },
    // 重置
    reset() {
      this.form.usercode = ''
      this.form.username = ''

      this.form.storg_code = []
      this.form.post_code = []
      this.form.group_code = []
      this.getRoleAssignedUserData()
    },
    roleChange(val) {
      this.getRoleAssignedUserData()
      this.batchRoleCode = []
      this.$refs.tableDataRef.clearSelection()
    },

    async cancel(code) {
      // if (!this.form.role_code) {
      //   return this.$message.error('')
      // }

      const res = await RoleAssignedUserBatchCancel([code], this.form.role_code)
      if (res.code === '200') {
        this.$notify.success('取消授权成功！')
        await this.getRoleAssignedUserData()
      } else {
        this.$notify.error('取消授权失败！')
      }
    },

    async batchCancel() {
      const res = await RoleAssignedUserBatchCancel(this.batchRoleCode, this.form.role_code)
      if (res.code === '200') {
        this.$notify.success(this.batchRoleCode.length + '个用户取消授权成功！')
        await this.getRoleAssignedUserData()
        this.batchRoleCode = []
        this.$refs.tableDataRef.clearSelection()
      } else {
        this.$notify.error(this.batchRoleCode.length + '个用户取消授权失败！')
      }
    },

    // 新增按钮
    async add() {
      this.dialogVisible = true

      const data = {
        flag: 'FALSE', // TRUE(已关联) FALSE(未关联)
        role_code: this.form.role_code, // 角色编码
        usercode: '', // 用户编码
        username: '', // 用户名称
        storg_code: '', //
        post_code: '', //
        group_code: '', //
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: this.dialogForm.page, // 第几页
        rows: this.dialogForm.rows // 每页多少条
      }
      const res = await RoleAssignedUserData(data)
      this.tableDataDialog = res.data
      this.totalDialog = res.count
    },

    // 对话框关闭事件
    handleClose() {
      // this.form.flag = 'TRUE'
    },
    getRowKey(row) {
      return row.usercode
    },
    handleSelectionChange(rows) {
      this.batchRoleCode = rows.map(i => i.usercode)
    },
    handleDialogSelectionChange(rows) {
      this.batchDialogRoleCode = rows.map(i => i.usercode)
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    async  dialogVisibleConfirm() {
      const res = await RoleAssignedUserBatchAdd(this.batchDialogRoleCode, this.form.role_code)
      if (res.code === '200') {
        this.$notify.success(this.batchDialogRoleCode.length + '个用户新增授权成功！')
        await this.getRoleAssignedUserData()
        this.batchDialogRoleCode = []
        this.$refs.tableDataDialogRef.clearSelection()
        this.dialogVisible = false
      } else {
        this.$notify.error(this.batchDialogRoleCode.length + '个用户新增授权失败！')
      }
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 255
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

 src/views/basicSettings/roleList.vue

@@ -1,480 +1,487 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=4')">导入</el-button>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="角色编码" style=" display: flex;">

              <el-input v-model="form.role_code" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="角色名称" style=" display: flex;">

              <el-input v-model="form.role_name" placeholder="请输入" style="width: 200px" />

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="getRoleData">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

          style="height:5px"

        >

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseout'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

          <!--            @mouseenter="mouseHoverType=$event.type"-->

          <!--          />-->

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseenter'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

          <!--            @click="isExpandForm=!isExpandForm"-->

          <!--            @mouseout="mouseHoverType=$event.type"-->

          <!--          />-->

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="tableHeight+'px'"

          border

          row-class-name="custom-row"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >

          <el-table-column

            prop="rowNum"

            width="120"

            fixed

            label="序号"

          />

          <el-table-column

            prop="rolecode"

            label="角色编码"

            sortable="custom"

          />

          <el-table-column

            prop="rolename"

            label="角色名称"

            sortable="custom"

          />

          <el-table-column

            prop="status"

            label="状态"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>

              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>

            </template>

          </el-table-column>

          <!--          <el-table-column-->

          <!--            prop="dataname"-->

          <!--            label="权限范围"-->

          <!--            sortable="custom"-->

          <!--          />-->

          <el-table-column

            prop="description"

            label="备注"

            sortable="custom"

          >

            <template slot-scope="{row}">

              {{ row.description?row.description:'/' }}

            </template>

          </el-table-column>

          <el-table-column

            prop="username"

            label="创建人员"

            sortable="custom"

          />

          <el-table-column

            prop="lm_date"

            label="创建时间"

            width="160"

            sortable="custom"

          />

          <el-table-column

            label="操作"

            width="160"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i

                    class="el-icon-edit-outline"

                    :style="{color:$store.state.settings.theme}"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i

                    class="el-icon-delete"

                    :style="{color:$store.state.settings.theme}"

                    @click="del(row)"

                  />

                </el-tooltip>



                <el-dropdown placement="bottom" @command="command=>handleCommand(command,row)">

                  <div

                    class="el-dropdown-link"

                    style="display: flex;align-content: center;

                    justify-content: center;

                    cursor: pointer;"

                    :style="{color:$store.state.settings.theme}"

                  >

                    <div>更多</div>

                    <div>

                      <i class="el-icon-arrow-down el-icon--right" />

                    </div>

                  </div>

                  <el-dropdown-menu slot="dropdown">

                    <el-dropdown-item icon="el-icon-circle-check" command="menuPower">菜单权限</el-dropdown-item>

                    <el-dropdown-item icon="el-icon-user" command="divideUser">分配用户</el-dropdown-item>

                    <!--                    <el-dropdown-item icon="el-icon-download" command="downloadMenu">导出菜单</el-dropdown-item>-->

                  </el-dropdown-menu>

                </el-dropdown>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes,jumper"

        popper-class="select_bottom"

        @pagination="getRoleData"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

        <!--        <el-form-item label="角色编码" prop="rolecode">-->

        <!--          <el-input v-model="dialogForm.rolecode" :disabled="operation!=='add'" style="width: 200px" />-->

        <!--        </el-form-item>-->

        <el-form-item label="角色名称" prop="rolename">

          <el-input v-model="dialogForm.rolename" style="width: 200px" />

        </el-form-item>



        <!--        <el-form-item required label="数据范围">-->

        <!--          <el-select-->

        <!--            v-model="dialogForm.datacode"-->

        <!--            style="width:200px"-->

        <!--            placeholder="请选择"-->

        <!--            :popper-append-to-body="false"-->

        <!--          >-->

        <!--            <el-option-->

        <!--              v-for="item in datacodeArr"-->

        <!--              :key="item.datacode"-->

        <!--              :label="item.dataname"-->

        <!--              :value="item.datacode"-->

        <!--            />-->

        <!--          </el-select>-->

        <!--        </el-form-item>-->

        <el-form-item required label="状态">

          <el-radio-group v-model="dialogForm.status" style="width: 200px">

            <el-radio label="Y">正常</el-radio>

            <el-radio label="N">停用</el-radio>

          </el-radio-group>

        </el-form-item>

        <!--        <el-form-item v-if="dialogForm.datacode==='CUSTOM'" label="数据权限" style="margin: 0">-->

        <!--          <el-checkbox-group v-model="checkboxGroupSelected" @change="checkboxGroupChange">-->

        <!--            <el-checkbox v-for="item in checkboxGroup" :key="item" :label="item">-->

        <!--              {{ item }}-->

        <!--              <el-tooltip class="item" effect="dark" content="勾选父节点是否同时选中子节点" placement="top">-->

        <!--                <i v-if="item==='父子联动'" class="el-icon-question" />-->

        <!--              </el-tooltip>-->

        <!--            </el-checkbox>-->

        <!--          </el-checkbox-group>-->

        <!--        </el-form-item>-->

        <!--        <el-card-->

        <!--          v-if="dialogForm.datacode==='CUSTOM'"-->

        <!--          class="box-card"-->

        <!--          shadow="never"-->

        <!--          style="margin-bottom: 30px;width: 78%;margin-left: 12%;"-->

        <!--        >-->



        <!--          <el-tree-->

        <!--            ref="tree"-->

        <!--            :key="checkboxGroupSelected.toString()"-->

        <!--            :data="treeData"-->

        <!--            show-checkbox-->

        <!--            :check-strictly="!checkboxGroupSelected.includes('父子联动')"-->

        <!--            :default-expand-all="checkboxGroupSelected.includes('展开/折叠')"-->

        <!--            node-key="torg_code"-->

        <!--            :props="defaultProps"-->

        <!--          />-->

        <!--        </el-card>-->



        <el-form-item label="备注">

          <el-input v-model="dialogForm.description" type="textarea" style="width:500px" />

        </el-form-item>



      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import {

  AddUpdateGroup,

  DeleteGroup, RoleAddUpdateSava,

  RoleData, RoleDeleteSava

} from '@/api/basicSettings'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import { DataPermissions, PrentOrganization } from '@/api/GeneralBasicData'

import arrayToTree from 'array-to-tree'



export default {

  name: 'RoleList',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,

      form: {

        role_code: '',

        role_name: '',

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      total: 10,

      tableData: [],

      dialogVisible: false,

      dialogForm: {

        rolecode: '', //

        rolename: '', //

        datacode: 'ALL',

        description: '',

        datapermissions: '', // 数据权限

        status: 'Y'// 状态

      },

      datacodeArr: [],

      checkboxGroupSelected: ['展开/折叠', '父子联动'],

      checkboxGroup: ['展开/折叠', '全选/全不选', '父子联动'],

      operation: '',

      dialogFormRules: {

        rolecode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        rolename: [

          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }

        ]

      },

      defaultProps: {

        children: 'children',

        label: 'torg_name'

      },

      treeData: []



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getRoleData()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    this.getPrentOrganization()

    this.getDataPermissions()

  },

  methods: {

    async getRoleData() {

      const res = await RoleData(this.form)

      this.tableData = res.data

      this.total = res.count

    },

    async getDataPermissions() {

      const { data: res } = await DataPermissions()

      this.datacodeArr = res

    },

    // 组织架构级联选择器

    async getPrentOrganization() {

      const { data: res } = await PrentOrganization()

      this.treeData = arrayToTree(res, {

        parentProperty: 'parent_id',

        customID: 'torg_code',

        childrenProperty: 'children'

      })

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getRoleData()

    },

    // 重置

    reset() {

      this.form.role_code = ''

      this.form.role_name = ''

      this.getRoleData()

    },

    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'

      this.$nextTick(() => {

        this.dialogForm.rolecode = row.rolecode

        this.dialogForm.rolename = row.rolename

        this.dialogForm.datacode = row.datacode

        this.dialogForm.status = row.status

        this.dialogForm.description = row.description

        if (this.dialogForm.datacode === 'CUSTOM') {

          setTimeout(() => {

            this.$refs.tree.setCheckedKeys(row.datapermissionscode.split(','))

          })

        }

      })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        RoleDeleteSava({ rolecode: row.rolecode }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getRoleData()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    checkboxGroupChange(val) {

      if (val.includes('全选/全不选')) {

        this.$refs.tree.setCheckedKeys([this.treeData[0].torg_code])

      }

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.rolecode = ''

      this.dialogForm.rolename = ''

      this.dialogForm.description = ''

      this.dialogForm.datapermissions = ''

      this.dialogForm.datacode = 'ALL'

      this.dialogForm.status = 'Y'

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          if (this.$refs.tree) {

            this.dialogForm.datapermissions = this.$refs.tree.getCheckedKeys().join(',')

          }

          RoleAddUpdateSava(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getRoleData()

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    handleCommand(command, row) {

      console.log(command, row)

      if (command === 'menuPower') {

        this.$router.push('./powerDivider?rolecode=' + row.rolecode)

      }

      if (command === 'divideUser') {

        this.$router.push('./roleDivider?rolecode=' + row.rolecode)

      }

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 200

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=4')">导入</el-button>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="角色编码" style=" display: flex;">
              <el-input v-model="form.role_code" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="角色名称" style=" display: flex;">
              <el-input v-model="form.role_name" placeholder="请输入" style="width: 200px" />
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="getRoleData">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="rowNum"
            width="120"
            fixed
            label="序号"
          />
          <el-table-column
            prop="rolecode"
            label="角色编码"
            sortable="custom"
          />
          <el-table-column
            prop="rolename"
            label="角色名称"
            sortable="custom"
          />
          <el-table-column
            prop="status"
            label="状态"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.status==='Y'" size="small" type="success">正常</el-tag>
              <el-tag v-if="row.status==='N'" size="small" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="dataname"-->
          <!--            label="权限范围"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <el-table-column
            prop="description"
            label="备注"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.description?row.description:'/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            width="160"
            sortable="custom"
          />
          <el-table-column
            label="操作"
            width="160"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    class="el-icon-edit-outline"
                    :style="{color:$store.state.settings.theme}"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    @click="del(row)"
                  />
                </el-tooltip>

                <el-dropdown placement="bottom" @command="command=>handleCommand(command,row)">
                  <div
                    class="el-dropdown-link"
                    style="display: flex;align-content: center;
                    justify-content: center;
                    cursor: pointer;"
                    :style="{color:$store.state.settings.theme}"
                  >
                    <div>更多</div>
                    <div>
                      <i class="el-icon-arrow-down el-icon--right" />
                    </div>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-circle-check" command="menuPower">菜单权限</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-user" command="divideUser">分配用户</el-dropdown-item>
                    <!--                    <el-dropdown-item icon="el-icon-download" command="downloadMenu">导出菜单</el-dropdown-item>-->
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getRoleData"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <!--        <el-form-item label="角色编码" prop="rolecode">-->
        <!--          <el-input v-model="dialogForm.rolecode" :disabled="operation!=='add'" style="width: 200px" />-->
        <!--        </el-form-item>-->
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="dialogForm.rolename" style="width: 200px" />
        </el-form-item>

        <!--        <el-form-item required label="数据范围">-->
        <!--          <el-select-->
        <!--            v-model="dialogForm.datacode"-->
        <!--            style="width:200px"-->
        <!--            placeholder="请选择"-->
        <!--            :popper-append-to-body="false"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="item in datacodeArr"-->
        <!--              :key="item.datacode"-->
        <!--              :label="item.dataname"-->
        <!--              :value="item.datacode"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item required label="状态">
          <el-radio-group v-model="dialogForm.status" style="width: 200px">
            <el-radio label="Y">正常</el-radio>
            <el-radio label="N">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--        <el-form-item v-if="dialogForm.datacode==='CUSTOM'" label="数据权限" style="margin: 0">-->
        <!--          <el-checkbox-group v-model="checkboxGroupSelected" @change="checkboxGroupChange">-->
        <!--            <el-checkbox v-for="item in checkboxGroup" :key="item" :label="item">-->
        <!--              {{ item }}-->
        <!--              <el-tooltip class="item" effect="dark" content="勾选父节点是否同时选中子节点" placement="top">-->
        <!--                <i v-if="item==='父子联动'" class="el-icon-question" />-->
        <!--              </el-tooltip>-->
        <!--            </el-checkbox>-->
        <!--          </el-checkbox-group>-->
        <!--        </el-form-item>-->
        <!--        <el-card-->
        <!--          v-if="dialogForm.datacode==='CUSTOM'"-->
        <!--          class="box-card"-->
        <!--          shadow="never"-->
        <!--          style="margin-bottom: 30px;width: 78%;margin-left: 12%;"-->
        <!--        >-->

        <!--          <el-tree-->
        <!--            ref="tree"-->
        <!--            :key="checkboxGroupSelected.toString()"-->
        <!--            :data="treeData"-->
        <!--            show-checkbox-->
        <!--            :check-strictly="!checkboxGroupSelected.includes('父子联动')"-->
        <!--            :default-expand-all="checkboxGroupSelected.includes('展开/折叠')"-->
        <!--            node-key="torg_code"-->
        <!--            :props="defaultProps"-->
        <!--          />-->
        <!--        </el-card>-->

        <el-form-item label="备注">
          <el-input v-model="dialogForm.description" type="textarea" style="width:500px" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  AddUpdateGroup,
  DeleteGroup, RoleAddUpdateSava,
  RoleData, RoleDeleteSava
} from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import { DataPermissions, PrentOrganization } from '@/api/GeneralBasicData'
import arrayToTree from 'array-to-tree'

export default {
  name: 'RoleList',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        role_code: '',
        role_name: '',
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        rolecode: '', //
        rolename: '', //
        datacode: 'ALL',
        description: '',
        datapermissions: '', // 数据权限
        status: 'Y'// 状态
      },
      datacodeArr: [],
      checkboxGroupSelected: ['展开/折叠', '父子联动'],
      checkboxGroup: ['展开/折叠', '全选/全不选', '父子联动'],
      operation: '',
      dialogFormRules: {
        rolecode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        rolename: [
          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'torg_name'
      },
      treeData: []

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getRoleData()
    this.getPrentOrganization()
    this.getDataPermissions()
  },
  created() {
    this.getRoleData()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.getPrentOrganization()
    this.getDataPermissions()
  },
  methods: {
    async getRoleData() {
      const res = await RoleData(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    async getDataPermissions() {
      const { data: res } = await DataPermissions()
      this.datacodeArr = res
    },
    // 组织架构级联选择器
    async getPrentOrganization() {
      const { data: res } = await PrentOrganization()
      this.treeData = arrayToTree(res, {
        parentProperty: 'parent_id',
        customID: 'torg_code',
        childrenProperty: 'children'
      })
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getRoleData()
    },
    // 重置
    reset() {
      this.form.role_code = ''
      this.form.role_name = ''
      this.getRoleData()
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'
      this.$nextTick(() => {
        this.dialogForm.rolecode = row.rolecode
        this.dialogForm.rolename = row.rolename
        this.dialogForm.datacode = row.datacode
        this.dialogForm.status = row.status
        this.dialogForm.description = row.description
        if (this.dialogForm.datacode === 'CUSTOM') {
          setTimeout(() => {
            this.$refs.tree.setCheckedKeys(row.datapermissionscode.split(','))
          })
        }
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        RoleDeleteSava({ rolecode: row.rolecode }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getRoleData()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    checkboxGroupChange(val) {
      if (val.includes('全选/全不选')) {
        this.$refs.tree.setCheckedKeys([this.treeData[0].torg_code])
      }
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.rolecode = ''
      this.dialogForm.rolename = ''
      this.dialogForm.description = ''
      this.dialogForm.datapermissions = ''
      this.dialogForm.datacode = 'ALL'
      this.dialogForm.status = 'Y'
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          if (this.$refs.tree) {
            this.dialogForm.datapermissions = this.$refs.tree.getCheckedKeys().join(',')
          }
          RoleAddUpdateSava(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getRoleData()
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    handleCommand(command, row) {
      console.log(command, row)
      if (command === 'menuPower') {
        this.$router.push('./powerDivider?rolecode=' + row.rolecode)
      }
      if (command === 'divideUser') {
        this.$router.push('./roleDivider?rolecode=' + row.rolecode)
      }
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 200
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>

 src/views/basicSettings/storageList.vue

@@ -1,887 +1,892 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">



      <div style="display: flex">

        <div style="width: 300px;margin: 10px 10px 0  0;background:#fff">



          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">

            <div style="display: flex;">

              <div

                style="width: 5px;height: 100%;border-radius: 5px;"

                :style="{background:$store.state.settings.theme}"

              />

              <div style="margin-left: 8px;">仓库</div>

            </div>



            <!--            <div style="margin-right:10px">-->

            <!--              <el-tooltip v-del-tab-index class="item" effect="dark" content="新增" placement="top">-->

            <!--                <i class="el-icon-plus" style="cursor: pointer;color: #999" @click="treeAddClick('add')" />-->

            <!--              </el-tooltip>-->

            <!--            </div>-->



          </div>



          <el-tree

            ref="treeLeftRef"

            style="padding: 10px;overflow: auto"

            :style="{height:(tableHeight+222)+'px'}"

            :data="treeLeft"

            node-key="code"

            highlight-current

            :props="defaultPropsLeft"

            :default-expand-all="true"

            :expand-on-click-node="false"

            @node-click="getTSecLocaData"

          >

            <!--            <span slot-scope="{ node, data }" class="custom-tree-node">-->

            <!--              <span v-if="!data.isEdit">{{ data.name }}</span>-->

            <!--              <span v-if="!data.isEdit">-->

            <!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="编辑" placement="top">-->

            <!--                  <i-->

            <!--                    v-if="data.code!=='-1'"-->

            <!--                    class="el-icon-edit"-->

            <!--                    style="margin-right:10px;color: #999"-->

            <!--                    @click.stop="treeEditClick(node,data,'edit')"-->

            <!--                  />-->

            <!--                </el-tooltip>-->

            <!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->

            <!--                  <i-->

            <!--                    v-if="data.code!=='-1'"-->

            <!--                    class="el-icon-delete"-->

            <!--                    style="margin-right: 4px;color: #999"-->

            <!--                    @click.stop="treeDeleteClick(node,data)"-->

            <!--                  />-->

            <!--                </el-tooltip>-->

            <!--              </span>-->

            <!--            </span>-->

          </el-tree>

        </div>



        <div

          style=" width:calc(100% - 300px);"

        >

          <div class="bodyTopButtonGroup" style="justify-content: space-between">

            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

            <el-button

              v-waves

              type="success"

              icon="el-icon-download"

              @click="$router.push('./../systemSetting/dataImport?fileCode=7')"

            >导入

            </el-button>

          </div>



          <div class="bodyTopFormGroup">

            <el-form

              ref="form"

              :model="form"

              label-width="100px"

              inline

              style="display: flex;"

            >

              <div class="elForm">

                <el-form-item label="货位编码" style=" display: flex;">

                  <el-input v-model="form.locacode" placeholder="请输入" style="width: 200px" />

                </el-form-item>

                <el-form-item label="货位名称" style=" display: flex;">

                  <el-input v-model="form.locaname" placeholder="请输入" style="width: 200px" />

                </el-form-item>

                <!--                <el-form-item label="存货规格" style=" display: flex;">-->

                <!--                  <el-input v-model="form.partspec" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->

                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->

                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->

                <!--                </el-form-item>-->

              </div>

              <div

                class="bodySearchReset"

                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

              >

                <el-button

                  v-waves

                  type="primary"

                  icon="el-icon-search"

                  @click="getTSecLocaData($refs.treeLeftRef.getCurrentNode())"

                >查询

                </el-button>

                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

              </div>

            </el-form>

            <div

              class="bodyTopFormExpand"

              style="height: 5px;"

            >

              <!--              <svg-icon-->

              <!--                v-show="mouseHoverType==='mouseout'"-->

              <!--                style="cursor: pointer"-->

              <!--                :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

              <!--                @mouseenter="mouseHoverType=$event.type"-->

              <!--              />-->

              <!--              <svg-icon-->

              <!--                v-show="mouseHoverType==='mouseenter'"-->

              <!--                style="cursor: pointer"-->

              <!--                :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

              <!--                @click="isExpandForm=!isExpandForm"-->

              <!--                @mouseout="mouseHoverType=$event.type"-->

              <!--              />-->

            </div>

          </div>



          <div class="elTableDiv">

            <el-table

              ref="tableDataRef"

              class="tableFixed"

              :data="tableData"

              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"

              border

              row-class-name="custom-row"

              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"

              highlight-current-row

              :header-cell-style="this.$headerCellStyle"

              :cell-style="this.$cellStyle"

              @sort-change="sortChange"

            >

              <!--            prop="RowNum"-->

              <el-table-column

                prop="rowNum"

                width="50"

                fixed

                label="序号"

              />

              <el-table-column

                prop="code"

                label="货位编码"

                sortable="custom"

              />

              <el-table-column

                prop="name"

                label="货位名称"

                show-overflow-tooltip

                sortable="custom"

              />



              <el-table-column

                prop="stckname"

                label="对应仓库"

                sortable="custom"

              />



              <el-table-column

                prop="status"

                label="状态"

                width="110"

                sortable="custom"

              >

                <template slot-scope="{row}">

                  <el-tag v-if="row.status==='0'" size="small" type="success">正常</el-tag>

                  <el-tag v-if="row.status==='1'" size="small" type="danger">停用</el-tag>

                </template>

              </el-table-column>



              <el-table-column

                prop="description"

                label="备注"

                sortable="custom"

              >

                <template slot-scope="{row}">

                  {{ row.description ? row.description : '/' }}

                </template>

              </el-table-column>

              <!--              <el-table-column-->

              <!--                label="数据来源"-->

              <!--                prop="data_sources"-->

              <!--                sortable="custom"-->

              <!--                width="110"-->

              <!--              />-->

              <el-table-column

                label="创建人员"

                prop="username"

                sortable="custom"

                width="110"

              />

              <el-table-column

                label="创建时间"

                prop="lm_date"

                sortable="custom"

                width="160"

              />



              <el-table-column

                label="操作"

                width="120"

                fixed="right"

              >

                <template slot-scope="{row}">

                  <div class="operationClass">

                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                      <i

                        class="el-icon-edit-outline"

                        :style="{color:$store.state.settings.theme}"

                        @click="edit('edit',row)"

                      />

                    </el-tooltip>

                    <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                      <i

                        class="el-icon-delete"

                        :style="{color:$store.state.settings.theme}"

                        @click="del(row)"

                      />

                    </el-tooltip>

                  </div>

                </template>

              </el-table-column>

            </el-table>

          </div>



          <!--分页-->

          <pagination

            :total="total"

            :page.sync="form.page"

            :limit.sync="form.rows"

            align="right"

            layout="total,prev, pager, next,sizes,jumper"

            popper-class="select_bottom"

            @pagination="getTSecLocaData($refs.treeLeftRef.getCurrentNode())"

          />



        </div>

      </div>

    </div>



    <!--    往来类别新增修改-->

    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogClassVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClassClose"

      @close="handleClassClose"

    >

      <el-form ref="dialogClassForm" inline :rules="dialogClassFormRules" :model="dialogClassForm" label-width="80px">

        <el-form-item label="分类编码" prop="customerclasscode">

          <el-input v-model="dialogClassForm.customerclasscode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="分类名称" prop="customerclassname">

          <el-input v-model="dialogClassForm.customerclassname" style="width: 200px" />

        </el-form-item>

        <el-form-item label="上级分类">

          <el-select

            v-model="dialogClassForm.parentcode"

            style="width:200px"

            placeholder="请选择"

            :popper-append-to-body="false"

            clearable

          >

            <el-option

              v-for="item in treeLeftArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

      </el-form>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleClassCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleClassConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



    <!--    往来单位新增修改-->

    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >



      <el-form ref="dialogForm" class="" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">

        <!--        <el-divider content-position="left">基本信息</el-divider>-->

        <el-form-item label="货位编码" prop="locacode">

          <el-input v-model="dialogForm.locacode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="货位名称" prop="locaname">

          <el-input v-model="dialogForm.locaname" style="width: 200px" />

        </el-form-item>



        <el-form-item label="对应仓库" prop="stckcode">

          <el-select

            v-model="dialogForm.stckcode"

            style="width:200px"

            placeholder="请选择"

            filterable

            :popper-append-to-body="false"

            :disabled="!isEdit&&operation==='edit'"

            @change="stckcodeChange"

          >

            <el-option

              v-for="item in stckcodeArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>



        <el-form-item label="上级货位">

          <el-select

            v-model="dialogForm.parentlocacode"

            style="width:200px"

            placeholder="请选择"

            clearable

            filterable

            :disabled="dialogForm.stckcode===''"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in parentlocacodeArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>



        <el-form-item required label="状态">

          <el-radio-group v-model="dialogForm.status" style="width: 200px">

            <el-radio label="0">正常</el-radio>

            <el-radio label="1">停用</el-radio>

          </el-radio-group>

        </el-form-item>



        <el-form-item label="备注">

          <el-input

            v-model="dialogForm.description"

            type="textarea"

            :autosize="{ minRows: 2, maxRows: 4}"

            style="width: 200px;"

          />

        </el-form-item>



      </el-form>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import waves from '@/directive/waves'

import Pagination from '@/components/Pagination'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import arrayToTree from 'array-to-tree'

import { TCunstomerClassTreeAddUpdate, TCunstomerClassTreeDelete, TSecLocaAddUpdate, TSecLocaData, TSecLocaDelete, TSecLocaTree } from '@/api/basicSettings'

import { WareHouseSelectLocation } from '@/api/GeneralBasicData'



const _ = require('lodash')



export default {

  name: 'StorageList',

  directives: { waves, elDragDialog },

  components: {

    Pagination

  },

  data() {

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      operation: '',



      treeLeft: [

        {

          code: '-1',

          name: '全部'

        }

      ], // 左侧树

      treeLeftArr: [],

      defaultPropsLeft: {

        children: 'children',

        label: 'name'

      },



      tableData: [],

      form: {

        stckcode: '',

        locacode: '',

        locaname: '',

        partspec: '',

        flag: '',

        page: 1,

        rows: 20,

        prop: 'lm_date', // 排序字段

        order: 'desc' // 排序字段

      },

      total: 0,

      dialogClassVisible: false,

      dialogClassForm: {

        data_sources: '', // 数据来源:ERP/MES

        customerclasscode: '', // 存货分类编码

        customerclassname: '', // 存货分类名称

        parentcode: '', // 上级分类编码

        OperType: ''// OperType

      },

      classArr: [],

      dialogClassFormRules: {

        customerclasscode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        customerclassname: [

          { required: true, message: '请输往来单位名称', trigger: ['blur', 'change'] }

        ]

      },



      dialogVisible: false,

      dialogForm: {

        data_sources: 'MES', // 数据来源；ERP/MES

        locacode: '', //

        locaname: '', //

        stckcode: '', // 对应仓库编码

        parentlocacode: '', // 上级货位编码

        status: '0', // 使用状态: 正常(0)停用(1)

        description: '',

        depth: '', // 层级



        OperType: '' // 操作类型

      },

      dialogFormRules: {

        locacode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        locaname: [

          { required: true, message: '请输入往来单位名称', trigger: ['blur', 'change'] }

        ],

        stckcode: [

          { required: true, message: '请选择对应仓库', trigger: ['blur', 'change'] }

        ]

      },

      stckcodeArr: [],

      parentlocacodeArr: [],



      isEdit: true



    }

  },



  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {



  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()



    this.getTSecLocaTree()

  },

  methods: {

    async getTSecLocaTree() {

      const { data: res } = await TSecLocaTree()

      res.forEach(e => {

        e.name = e.code + ' ' + e.name

      })

      //  获取仓库

      const ck = res.filter(i => i.depth === 0)// 层级为0的  是仓库

      const kw = res.filter(i => i.depth !== 0)// 反之 为仓位

      this.stckcodeArr = ck

      const tree = arrayToTree(kw, {

        parentProperty: 'idparent',

        customID: 'code',

        childrenProperty: 'children'

      })

      const group = _.groupBy(tree, i => i.warhouse)

      const newArr = []

      ck.forEach(j => {

        if (Object.keys(group).includes(j.code)) {

          newArr.push({

            code: j.code,

            name: j.name,

            depth: 0,

            idparent: '-1',

            children: group[j.code]

          })

        } else {

          newArr.push({

            code: j.code,

            name: j.name,

            depth: 0,

            idparent: '-1',

            children: []

          })

        }

      })

      this.treeLeft = [

        {

          code: '-1',

          name: '全部',

          idparent: '',

          children: newArr

        }

      ]// 左侧树

      this.$nextTick(() => {

        this.$refs.treeLeftRef.setCurrentKey('-1')

        this.getTSecLocaData(this.$refs.treeLeftRef.getCurrentNode())

      })



      console.log(JSON.parse(JSON.stringify(this.treeLeft)))

    },



    async getTSecLocaData(node) {

      let result = ''

      if (node.code === '-1') {

        result = node.children.map(i => i.code)

      } else {

        result = [node.code]

      }

      // const result = this.getChildrenCodeMethod(node, [])

      // if (result.includes('-1')) {

      //   result.shift()

      // }

      this.form.stckcode = result.join(',')



      if (this.$refs.treeLeftRef.getCurrentNode().idparent === '') {

        this.form.flag = -1

      } else {

        this.form.flag = this.$refs.treeLeftRef.getCurrentNode().depth

      }



      const res = await TSecLocaData(this.form)



      this.tableData = res.data

      this.total = res.count

    },



    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 280

        this.$refs.tableDataRef.doLayout()

      })

    },

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getTSecLocaData(this.$refs.treeLeftRef.getCurrentNode())

    },

    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'



      const temp = this.$refs.treeLeftRef.getCurrentNode()



      if (temp.idparent === '-1' || temp.idparent === '') {

        this.isEdit = temp.depth !== 1

      } else {

        this.isEdit = false

      }



      // this.$nextTick(() => {

      this.dialogForm.data_sources = row.data_sources

      this.dialogForm.locacode = row.code

      this.dialogForm.locaname = row.name

      this.dialogForm.stckcode = row.stckcode



      const { data: res } = await WareHouseSelectLocation({ warhousecode: row.stckcode })



      this.parentlocacodeArr = res

      // this.parentlocacodeArr = this.treeLeftArr.filter(i => i.idparent === this.dialogForm.stckcode)



      this.dialogForm.parentlocacode = row.parentname ? row.parentcode : null

      this.dialogForm.status = row.status

      this.dialogForm.description = row.description

      // })

    },

    del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        TSecLocaDelete({ locacode: row.code, data_sources: row.data_sources }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            this.getTSecLocaTree()

            this.getTSecLocaData(this.$refs.treeLeftRef.getCurrentNode())

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    reset() {

      this.form.stckcode = ''

      this.form.locacode = ''

      this.form.locaname = ''

      this.$refs.treeLeftRef.setCurrentKey('-1')

      this.getTSecLocaData(this.$refs.treeLeftRef.getCurrentNode())

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.data_sources = 'MES'

      this.dialogForm.locacode = ''

      this.dialogForm.locaname = ''

      this.dialogForm.stckcode = ''

      this.dialogForm.parentlocacode = ''

      this.dialogForm.description = ''

      this.dialogForm.status = '0'



      if (this.$refs.treeLeftRef.getCurrentNode().idparent === '') {

        this.form.flag = ''

      } else {

        this.form.flag = this.$refs.treeLeftRef.getCurrentNode().depth

      }

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          // console.log(JSON.parse(JSON.stringify(this.dialogForm)), 2)



          if (this.dialogForm.locacode === this.dialogForm.parentlocacode) {

            return this.$message.error('上级货位不能是货位本身！')

          }



          if (this.dialogForm.parentlocacode === '') {

            this.dialogForm.depth = 1

          } else {

            this.dialogForm.depth = parseFloat(this.parentlocacodeArr.find(i => i.code === this.dialogForm.parentlocacode).depth) + 1

          }



          this.$store.state.app.buttonIsDisabled = true

          TSecLocaAddUpdate(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getTSecLocaTree()

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },



    async stckcodeChange(val) {

      const { data: res } = await WareHouseSelectLocation({ warhousecode: val })

      this.parentlocacodeArr = res



      this.dialogForm.parentlocacode = ''

      // const res = this.recursiveLookupArray([], val)// 递归查找数组

      // this.parentlocacodeArr = res

    },

    recursiveLookupArray(newArr, val) {

      const temp = this.treeLeftArr.filter(i => i.idparent === val)

      if (temp.length > 0 && temp) {

        temp.forEach(i => {

          newArr.push(i)

          this.recursiveLookupArray(newArr, i.code)

        })

      }

      return newArr

    },



    // 递归取子集的所有code

    getChildrenCodeMethod(node, result) {

      result.push(node.code)

      if (node.children && node.children.length > 0) {

        node.children.forEach(i => {

          this.getChildrenCodeMethod(i, result)

        })

      }

      return result

    },



    treeEditClick(node, data, operation) {

      this.dialogClassForm.data_sources = data.data_sources

      this.dialogClassForm.customerclasscode = data.code

      this.dialogClassForm.customerclassname = data.name

      this.dialogClassForm.parentcode = data.idparent === '-1' ? '' : data.idparent

      this.dialogClassForm.OperType = 'Update'

      this.operation = operation

      this.dialogClassVisible = true

    },

    treeDeleteClick(node, data) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        const result = this.getChildrenCodeMethod(data, [])

        TCunstomerClassTreeDelete({ customerclasscode: result.join(',') }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            this.getTSecLocaTree()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    treeAddClick(operation) {

      this.operation = operation

      this.dialogClassVisible = true

      this.dialogClassForm.OperType = 'Add'

      this.dialogClassForm.data_sources = 'MES'

    },



    handleClassClose() {

      this.dialogClassForm.data_sources = ''

      this.dialogClassForm.customerclasscode = ''

      this.dialogClassForm.customerclassname = ''

      this.dialogClassForm.parentcode = ''

      this.dialogClassForm.OperType = ''

      this.$refs.dialogClassForm.clearValidate()

    },

    dialogVisibleClassCancel() {

      this.dialogClassVisible = false

    },

    dialogVisibleClassConfirm() {

      this.$refs.dialogClassForm.validate(valid => {

        if (valid) {

          TCunstomerClassTreeAddUpdate(this.dialogClassForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogClassVisible = false

              this.$store.state.app.buttonIsDisabled = false

              this.getTSecLocaTree()

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    unittypcodeChange(val) {

      console.log(val)



      this.dialogForm.unitcode = ''

      this.dialogForm.unitsubcode = ''

      this.dialogForm.idSubUnitByReport = ''

      this.dialogForm.idUnitByStock = ''

      this.dialogForm.idUnitByPurchase = ''

      this.dialogForm.idUnitBySale = ''

      this.dialogForm.idunitbymanufacture = ''

      // this.$refs.dialogForm.clearValidate()

      // this.$forceUpdate()

    },

    unitcodeChange(val, type) {

      console.log(val)



      if (type === '1') {

        // this.dialogForm.unitcode = val

        this.dialogForm.unitsubcode = ''

        this.dialogForm.idSubUnitByReport = ''



        const unitname = this.unitcodeSingleArr.find(i => i.unitcode === val).unitname



        this.dialogForm.idUnitByStock = unitname

        this.dialogForm.idUnitByPurchase = unitname

        this.dialogForm.idUnitBySale = unitname

        this.dialogForm.idunitbymanufacture = unitname

      }



      if (type === '0') {

        const t = this.unitcodeGroupArr.find(i => i.unitcode === val).children



        this.idSubUnitByReportArr = t.filter(i => i.isMainUnit !== '1')

        this.idUnitBvStockArr = t



        const mainUnitCode = t.find(i => i.isMainUnit === '1').unitcode

        this.dialogForm.unitsubcode = mainUnitCode

        this.dialogForm.idSubUnitByReport = this.idSubUnitByReportArr[0].unitcode



        this.dialogForm.idUnitByStock = mainUnitCode

        this.dialogForm.idUnitByPurchase = mainUnitCode

        this.dialogForm.idUnitBySale = mainUnitCode

        this.dialogForm.idunitbymanufacture = mainUnitCode

      }

    }

  }

}

</script>



<style scoped lang="scss">

.custom-tree-node {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 14px;

  padding-right: 8px;

}



//::v-deep .el-checkbox__label {

//  width: 55px;

//}

//

.el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover {

  color: #000 !important;

}

</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">

      <div style="display: flex">
        <div style="width: 300px;margin: 10px 10px 0  0;background:#fff">

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="margin-left: 8px;">仓库</div>
            </div>

            <!--            <div style="margin-right:10px">-->
            <!--              <el-tooltip v-del-tab-index class="item" effect="dark" content="新增" placement="top">-->
            <!--                <i class="el-icon-plus" style="cursor: pointer;color: #999" @click="treeAddClick('add')" />-->
            <!--              </el-tooltip>-->
            <!--            </div>-->

          </div>

          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto"
            :style="{height:(tableHeight+222)+'px'}"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="getTSecLocaData"
          >
            <!--            <span slot-scope="{ node, data }" class="custom-tree-node">-->
            <!--              <span v-if="!data.isEdit">{{ data.name }}</span>-->
            <!--              <span v-if="!data.isEdit">-->
            <!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="编辑" placement="top">-->
            <!--                  <i-->
            <!--                    v-if="data.code!=='-1'"-->
            <!--                    class="el-icon-edit"-->
            <!--                    style="margin-right:10px;color: #999"-->
            <!--                    @click.stop="treeEditClick(node,data,'edit')"-->
            <!--                  />-->
            <!--                </el-tooltip>-->
            <!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->
            <!--                  <i-->
            <!--                    v-if="data.code!=='-1'"-->
            <!--                    class="el-icon-delete"-->
            <!--                    style="margin-right: 4px;color: #999"-->
            <!--                    @click.stop="treeDeleteClick(node,data)"-->
            <!--                  />-->
            <!--                </el-tooltip>-->
            <!--              </span>-->
            <!--            </span>-->
          </el-tree>
        </div>

        <div
          style=" width:calc(100% - 300px);"
        >
          <div class="bodyTopButtonGroup" style="justify-content: space-between">
            <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
            <el-button
              v-waves
              type="success"
              icon="el-icon-download"
              @click="$router.push('./../systemSetting/dataImport?fileCode=7')"
            >导入
            </el-button>
          </div>

          <div class="bodyTopFormGroup">
            <el-form
              ref="form"
              :model="form"
              label-width="100px"
              inline
              style="display: flex;"
            >
              <div class="elForm">
                <el-form-item label="货位编码" style=" display: flex;">
                  <el-input v-model="form.locacode" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <el-form-item label="货位名称" style=" display: flex;">
                  <el-input v-model="form.locaname" placeholder="请输入" style="width: 200px" />
                </el-form-item>
                <!--                <el-form-item label="存货规格" style=" display: flex;">-->
                <!--                  <el-input v-model="form.partspec" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户编码" style=" display: flex;">-->
                <!--                  <el-input v-model="form.usercode" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item v-show="isExpandForm" label="用户名称" style=" display: flex;">-->
                <!--                  <el-input v-model="form.username" placeholder="请输入" style="width: 200px" />-->
                <!--                </el-form-item>-->
              </div>
              <div
                class="bodySearchReset"
                :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
              >
                <el-button
                  v-waves
                  type="primary"
                  icon="el-icon-search"
                  @click="getTSecLocaData($refs.treeLeftRef.getCurrentNode())"
                >查询
                </el-button>
                <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
              </div>
            </el-form>
            <div
              class="bodyTopFormExpand"
              style="height: 5px;"
            >
              <!--              <svg-icon-->
              <!--                v-show="mouseHoverType==='mouseout'"-->
              <!--                style="cursor: pointer"-->
              <!--                :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
              <!--                @mouseenter="mouseHoverType=$event.type"-->
              <!--              />-->
              <!--              <svg-icon-->
              <!--                v-show="mouseHoverType==='mouseenter'"-->
              <!--                style="cursor: pointer"-->
              <!--                :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
              <!--                @click="isExpandForm=!isExpandForm"-->
              <!--                @mouseout="mouseHoverType=$event.type"-->
              <!--              />-->
            </div>
          </div>

          <div class="elTableDiv">
            <el-table
              ref="tableDataRef"
              class="tableFixed"
              :data="tableData"
              :height="isExpandForm?tableHeight:(tableHeight+80)+'px'"
              border
              row-class-name="custom-row"
              :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px',}"
              highlight-current-row
              :header-cell-style="this.$headerCellStyle"
              :cell-style="this.$cellStyle"
              @sort-change="sortChange"
            >
              <!--            prop="RowNum"-->
              <el-table-column
                prop="rowNum"
                width="50"
                fixed
                label="序号"
              />
              <el-table-column
                prop="code"
                label="货位编码"
                sortable="custom"
              />
              <el-table-column
                prop="name"
                label="货位名称"
                show-overflow-tooltip
                sortable="custom"
              />

              <el-table-column
                prop="stckname"
                label="对应仓库"
                sortable="custom"
              />

              <el-table-column
                prop="status"
                label="状态"
                width="110"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  <el-tag v-if="row.status==='0'" size="small" type="success">正常</el-tag>
                  <el-tag v-if="row.status==='1'" size="small" type="danger">停用</el-tag>
                </template>
              </el-table-column>

              <el-table-column
                prop="description"
                label="备注"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.description ? row.description : '/' }}
                </template>
              </el-table-column>
              <!--              <el-table-column-->
              <!--                label="数据来源"-->
              <!--                prop="data_sources"-->
              <!--                sortable="custom"-->
              <!--                width="110"-->
              <!--              />-->
              <el-table-column
                label="创建人员"
                prop="username"
                sortable="custom"
                width="110"
              />
              <el-table-column
                label="创建时间"
                prop="lm_date"
                sortable="custom"
                width="160"
              />

              <el-table-column
                label="操作"
                width="120"
                fixed="right"
              >
                <template slot-scope="{row}">
                  <div class="operationClass">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <i
                        class="el-icon-edit-outline"
                        :style="{color:$store.state.settings.theme}"
                        @click="edit('edit',row)"
                      />
                    </el-tooltip>
                    <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                      <i
                        class="el-icon-delete"
                        :style="{color:$store.state.settings.theme}"
                        @click="del(row)"
                      />
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!--分页-->
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes,jumper"
            popper-class="select_bottom"
            @pagination="getTSecLocaData($refs.treeLeftRef.getCurrentNode())"
          />

        </div>
      </div>
    </div>

    <!--    往来类别新增修改-->
    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogClassVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClassClose"
      @close="handleClassClose"
    >
      <el-form ref="dialogClassForm" inline :rules="dialogClassFormRules" :model="dialogClassForm" label-width="80px">
        <el-form-item label="分类编码" prop="customerclasscode">
          <el-input v-model="dialogClassForm.customerclasscode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="分类名称" prop="customerclassname">
          <el-input v-model="dialogClassForm.customerclassname" style="width: 200px" />
        </el-form-item>
        <el-form-item label="上级分类">
          <el-select
            v-model="dialogClassForm.parentcode"
            style="width:200px"
            placeholder="请选择"
            :popper-append-to-body="false"
            clearable
          >
            <el-option
              v-for="item in treeLeftArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleClassCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleClassConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    往来单位新增修改-->
    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >

      <el-form ref="dialogForm" class="" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">
        <!--        <el-divider content-position="left">基本信息</el-divider>-->
        <el-form-item label="货位编码" prop="locacode">
          <el-input v-model="dialogForm.locacode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="货位名称" prop="locaname">
          <el-input v-model="dialogForm.locaname" style="width: 200px" />
        </el-form-item>

        <el-form-item label="对应仓库" prop="stckcode">
          <el-select
            v-model="dialogForm.stckcode"
            style="width:200px"
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
            :disabled="!isEdit&&operation==='edit'"
            @change="stckcodeChange"
          >
            <el-option
              v-for="item in stckcodeArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="上级货位">
          <el-select
            v-model="dialogForm.parentlocacode"
            style="width:200px"
            placeholder="请选择"
            clearable
            filterable
            :disabled="dialogForm.stckcode===''"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in parentlocacodeArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>

        <el-form-item required label="状态">
          <el-radio-group v-model="dialogForm.status" style="width: 200px">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="dialogForm.description"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            style="width: 200px;"
          />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import arrayToTree from 'array-to-tree'
import { TCunstomerClassTreeAddUpdate, TCunstomerClassTreeDelete, TSecLocaAddUpdate, TSecLocaData, TSecLocaDelete, TSecLocaTree } from '@/api/basicSettings'
import { WareHouseSelectLocation } from '@/api/GeneralBasicData'

const _ = require('lodash')

export default {
  name: 'StorageList',
  directives: { waves, elDragDialog },
  components: {
    Pagination
  },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      operation: '',

      treeLeft: [
        {
          code: '-1',
          name: '全部'
        }
      ], // 左侧树
      treeLeftArr: [],
      defaultPropsLeft: {
        children: 'children',
        label: 'name'
      },

      tableData: [],
      form: {
        stckcode: '',
        locacode: '',
        locaname: '',
        partspec: '',
        flag: '',
        page: 1,
        rows: 20,
        prop: 'lm_date', // 排序字段
        order: 'desc' // 排序字段
      },
      total: 0,
      dialogClassVisible: false,
      dialogClassForm: {
        data_sources: '', // 数据来源:ERP/MES
        customerclasscode: '', // 存货分类编码
        customerclassname: '', // 存货分类名称
        parentcode: '', // 上级分类编码
        OperType: ''// OperType
      },
      classArr: [],
      dialogClassFormRules: {
        customerclasscode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        customerclassname: [
          { required: true, message: '请输往来单位名称', trigger: ['blur', 'change'] }
        ]
      },

      dialogVisible: false,
      dialogForm: {
        data_sources: 'MES', // 数据来源；ERP/MES
        locacode: '', //
        locaname: '', //
        stckcode: '', // 对应仓库编码
        parentlocacode: '', // 上级货位编码
        status: '0', // 使用状态: 正常(0)停用(1)
        description: '',
        depth: '', // 层级

        OperType: '' // 操作类型
      },
      dialogFormRules: {
        locacode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        locaname: [
          { required: true, message: '请输入往来单位名称', trigger: ['blur', 'change'] }
        ],
        stckcode: [
          { required: true, message: '请选择对应仓库', trigger: ['blur', 'change'] }
        ]
      },
      stckcodeArr: [],
      parentlocacodeArr: [],

      isEdit: true

    }
  },

  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getTSecLocaTree()
  },
  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()

    this.getTSecLocaTree()
  },
  methods: {
    async getTSecLocaTree() {
      const { data: res } = await TSecLocaTree()
      res.forEach(e => {
        e.name = e.code + ' ' + e.name
      })
      //  获取仓库
      const ck = res.filter(i => i.depth === 0)// 层级为0的  是仓库
      const kw = res.filter(i => i.depth !== 0)// 反之 为仓位
      this.stckcodeArr = ck
      const tree = arrayToTree(kw, {
        parentProperty: 'idparent',
        customID: 'code',
        childrenProperty: 'children'
      })
      const group = _.groupBy(tree, i => i.warhouse)
      const newArr = []
      ck.forEach(j => {
        if (Object.keys(group).includes(j.code)) {
          newArr.push({
            code: j.code,
            name: j.name,
            depth: 0,
            idparent: '-1',
            children: group[j.code]
          })
        } else {
          newArr.push({
            code: j.code,
            name: j.name,
            depth: 0,
            idparent: '-1',
            children: []
          })
        }
      })
      this.treeLeft = [
        {
          code: '-1',
          name: '全部',
          idparent: '',
          children: newArr
        }
      ]// 左侧树
      this.$nextTick(() => {
        this.$refs.treeLeftRef.setCurrentKey('-1')
        this.getTSecLocaData(this.$refs.treeLeftRef.getCurrentNode())
      })

      console.log(JSON.parse(JSON.stringify(this.treeLeft)))
    },

    async getTSecLocaData(node) {
      let result = ''
      if (node.code === '-1') {
        result = node.children.map(i => i.code)
      } else {
        result = [node.code]
      }
      // const result = this.getChildrenCodeMethod(node, [])
      // if (result.includes('-1')) {
      //   result.shift()
      // }
      this.form.stckcode = result.join(',')

      if (this.$refs.treeLeftRef.getCurrentNode().idparent === '') {
        this.form.flag = -1
      } else {
        this.form.flag = this.$refs.treeLeftRef.getCurrentNode().depth
      }

      const res = await TSecLocaData(this.form)

      this.tableData = res.data
      this.total = res.count
    },

    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 280
        this.$refs.tableDataRef.doLayout()
      })
    },
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getTSecLocaData(this.$refs.treeLeftRef.getCurrentNode())
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'

      const temp = this.$refs.treeLeftRef.getCurrentNode()

      if (temp.idparent === '-1' || temp.idparent === '') {
        this.isEdit = temp.depth !== 1
      } else {
        this.isEdit = false
      }

      // this.$nextTick(() => {
      this.dialogForm.data_sources = row.data_sources
      this.dialogForm.locacode = row.code
      this.dialogForm.locaname = row.name
      this.dialogForm.stckcode = row.stckcode

      const { data: res } = await WareHouseSelectLocation({ warhousecode: row.stckcode })

      this.parentlocacodeArr = res
      // this.parentlocacodeArr = this.treeLeftArr.filter(i => i.idparent === this.dialogForm.stckcode)

      this.dialogForm.parentlocacode = row.parentname ? row.parentcode : null
      this.dialogForm.status = row.status
      this.dialogForm.description = row.description
      // })
    },
    del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TSecLocaDelete({ locacode: row.code, data_sources: row.data_sources }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            this.getTSecLocaTree()
            this.getTSecLocaData(this.$refs.treeLeftRef.getCurrentNode())
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    reset() {
      this.form.stckcode = ''
      this.form.locacode = ''
      this.form.locaname = ''
      this.$refs.treeLeftRef.setCurrentKey('-1')
      this.getTSecLocaData(this.$refs.treeLeftRef.getCurrentNode())
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.data_sources = 'MES'
      this.dialogForm.locacode = ''
      this.dialogForm.locaname = ''
      this.dialogForm.stckcode = ''
      this.dialogForm.parentlocacode = ''
      this.dialogForm.description = ''
      this.dialogForm.status = '0'

      if (this.$refs.treeLeftRef.getCurrentNode().idparent === '') {
        this.form.flag = ''
      } else {
        this.form.flag = this.$refs.treeLeftRef.getCurrentNode().depth
      }
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          // console.log(JSON.parse(JSON.stringify(this.dialogForm)), 2)

          if (this.dialogForm.locacode === this.dialogForm.parentlocacode) {
            return this.$message.error('上级货位不能是货位本身！')
          }

          if (this.dialogForm.parentlocacode === '') {
            this.dialogForm.depth = 1
          } else {
            this.dialogForm.depth = parseFloat(this.parentlocacodeArr.find(i => i.code === this.dialogForm.parentlocacode).depth) + 1
          }

          this.$store.state.app.buttonIsDisabled = true
          TSecLocaAddUpdate(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getTSecLocaTree()
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },

    async stckcodeChange(val) {
      const { data: res } = await WareHouseSelectLocation({ warhousecode: val })
      this.parentlocacodeArr = res

      this.dialogForm.parentlocacode = ''
      // const res = this.recursiveLookupArray([], val)// 递归查找数组
      // this.parentlocacodeArr = res
    },
    recursiveLookupArray(newArr, val) {
      const temp = this.treeLeftArr.filter(i => i.idparent === val)
      if (temp.length > 0 && temp) {
        temp.forEach(i => {
          newArr.push(i)
          this.recursiveLookupArray(newArr, i.code)
        })
      }
      return newArr
    },

    // 递归取子集的所有code
    getChildrenCodeMethod(node, result) {
      result.push(node.code)
      if (node.children && node.children.length > 0) {
        node.children.forEach(i => {
          this.getChildrenCodeMethod(i, result)
        })
      }
      return result
    },

    treeEditClick(node, data, operation) {
      this.dialogClassForm.data_sources = data.data_sources
      this.dialogClassForm.customerclasscode = data.code
      this.dialogClassForm.customerclassname = data.name
      this.dialogClassForm.parentcode = data.idparent === '-1' ? '' : data.idparent
      this.dialogClassForm.OperType = 'Update'
      this.operation = operation
      this.dialogClassVisible = true
    },
    treeDeleteClick(node, data) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const result = this.getChildrenCodeMethod(data, [])
        TCunstomerClassTreeDelete({ customerclasscode: result.join(',') }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            this.getTSecLocaTree()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    treeAddClick(operation) {
      this.operation = operation
      this.dialogClassVisible = true
      this.dialogClassForm.OperType = 'Add'
      this.dialogClassForm.data_sources = 'MES'
    },

    handleClassClose() {
      this.dialogClassForm.data_sources = ''
      this.dialogClassForm.customerclasscode = ''
      this.dialogClassForm.customerclassname = ''
      this.dialogClassForm.parentcode = ''
      this.dialogClassForm.OperType = ''
      this.$refs.dialogClassForm.clearValidate()
    },
    dialogVisibleClassCancel() {
      this.dialogClassVisible = false
    },
    dialogVisibleClassConfirm() {
      this.$refs.dialogClassForm.validate(valid => {
        if (valid) {
          TCunstomerClassTreeAddUpdate(this.dialogClassForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogClassVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.getTSecLocaTree()
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    unittypcodeChange(val) {
      console.log(val)

      this.dialogForm.unitcode = ''
      this.dialogForm.unitsubcode = ''
      this.dialogForm.idSubUnitByReport = ''
      this.dialogForm.idUnitByStock = ''
      this.dialogForm.idUnitByPurchase = ''
      this.dialogForm.idUnitBySale = ''
      this.dialogForm.idunitbymanufacture = ''
      // this.$refs.dialogForm.clearValidate()
      // this.$forceUpdate()
    },
    unitcodeChange(val, type) {
      console.log(val)

      if (type === '1') {
        // this.dialogForm.unitcode = val
        this.dialogForm.unitsubcode = ''
        this.dialogForm.idSubUnitByReport = ''

        const unitname = this.unitcodeSingleArr.find(i => i.unitcode === val).unitname

        this.dialogForm.idUnitByStock = unitname
        this.dialogForm.idUnitByPurchase = unitname
        this.dialogForm.idUnitBySale = unitname
        this.dialogForm.idunitbymanufacture = unitname
      }

      if (type === '0') {
        const t = this.unitcodeGroupArr.find(i => i.unitcode === val).children

        this.idSubUnitByReportArr = t.filter(i => i.isMainUnit !== '1')
        this.idUnitBvStockArr = t

        const mainUnitCode = t.find(i => i.isMainUnit === '1').unitcode
        this.dialogForm.unitsubcode = mainUnitCode
        this.dialogForm.idSubUnitByReport = this.idSubUnitByReportArr[0].unitcode

        this.dialogForm.idUnitByStock = mainUnitCode
        this.dialogForm.idUnitByPurchase = mainUnitCode
        this.dialogForm.idUnitBySale = mainUnitCode
        this.dialogForm.idunitbymanufacture = mainUnitCode
      }
    }
  }
}
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

//::v-deep .el-checkbox__label {
//  width: 55px;
//}
//
.el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover {
  color: #000 !important;
}
</style>

 src/views/basicSettings/warehouseList.vue

@@ -1,466 +1,471 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>



        <div style="display:flex">

          <el-button

            v-waves

            type="success"

            icon="el-icon-download"

            @click="$router.push('./../systemSetting/dataImport?fileCode=6')"

          >导入

          </el-button>

          <el-button v-waves icon="el-icon-refresh-right" @click="syncERP">同步仓库</el-button>

        </div>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="仓库编码" style="display: flex;">

              <el-input v-model="form.code" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="仓库名称" style="display: flex;">

              <el-input v-model="form.name" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="状态" style=" display: flex;">

              <el-select

                v-model="form.status"

                style="width:200px"

                placeholder="请选择"

                :popper-append-to-body="false"

              >

                <el-option

                  v-for="item in statusArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>



            <el-form-item label="货位管理" style="display: flex;">



              <el-select

                v-model="form.ishasPosition"

                style="width:200px"

                placeholder="请选择"

                :popper-append-to-body="false"

              >

                <el-option

                  v-for="item in ishasPositionArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>



            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="getTSecStckData">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

          style="height:5px"

        >

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseout'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->

          <!--            @mouseenter="mouseHoverType=$event.type"-->

          <!--          />-->

          <!--          <svg-icon-->

          <!--            v-show="mouseHoverType==='mouseenter'"-->

          <!--            style="cursor: pointer"-->

          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->

          <!--            @click="isExpandForm=!isExpandForm"-->

          <!--            @mouseout="mouseHoverType=$event.type"-->

          <!--          />-->

        </div>

      </div>



      <div class="elTableDiv">

        <el-table

          ref="tableDataRef"

          class="tableFixed"

          :data="tableData"

          :height="tableHeight+'px'"

          border

          row-class-name="custom-row"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >

          <el-table-column

            prop="rowNum"

            width="120"

            fixed

            label="序号"

          />

          <el-table-column

            prop="code"

            label="仓库编码"

            sortable="custom"

          />

          <el-table-column

            prop="name"

            label="仓库名称"

            sortable="custom"

          />

          <el-table-column

            prop="ishasPosition"

            label="是否货位管理"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <el-tag v-if="row.ishasPosition==='1'" size="small" type="primary">是</el-tag>

              <el-tag v-if="row.ishasPosition==='0'" size="small" type="info">否</el-tag>

            </template>

          </el-table-column>

          <el-table-column

            prop="status"

            label="状态"

            sortable="custom"

          >

            <template slot-scope="{row}">

              <el-tag v-if="row.status==='0'" size="small" type="success">正常</el-tag>

              <el-tag v-if="row.status==='1'" size="small" type="danger">停用</el-tag>

            </template>

          </el-table-column>

          <el-table-column

            prop="description"

            label="备注"

            sortable="custom"

          >

            <template slot-scope="{row}">

              {{ row.description ? row.description : '/' }}

            </template>

          </el-table-column>

          <!--          <el-table-column-->

          <!--            prop="data_sources"-->

          <!--            label="数据来源"-->

          <!--            sortable="custom"-->

          <!--          />-->

          <el-table-column

            prop="username"

            label="创建人员"

            sortable="custom"

          />

          <el-table-column

            prop="lm_date"

            label="创建时间"

            width="160"

            sortable="custom"

          />

          <el-table-column

            label="操作"

            width="120"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i

                    class="el-icon-edit-outline"

                    :style="{color:$store.state.settings.theme}"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i

                    class="el-icon-delete"

                    :style="{color:$store.state.settings.theme}"

                    @click="del(row)"

                  />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes,jumper"

        popper-class="select_bottom"

        @pagination="getTSecStckData"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

        <el-form-item label="仓库编码" prop="stckcode">

          <el-input v-model="dialogForm.stckcode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="仓库名称" prop="stckname">

          <el-input v-model="dialogForm.stckname" style="width: 200px" />

        </el-form-item>

        <el-form-item required label="货位管理">

          <el-radio-group v-model="dialogForm.ishaspostion" style="width: 200px">

            <el-radio label="1">是</el-radio>

            <el-radio label="0">否</el-radio>

          </el-radio-group>

        </el-form-item>

        <el-form-item required label="状态">

          <el-radio-group v-model="dialogForm.status" style="width: 200px">

            <el-radio label="0">正常</el-radio>

            <el-radio label="1">停用</el-radio>

          </el-radio-group>

        </el-form-item>

        <el-form-item label="描述">

          <el-input v-model="dialogForm.description" type="textarea" style="width: 490px" />

        </el-form-item>



      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import { TSecStckAddUpdate, TSecStckData, TSecStckDelete } from '@/api/basicSettings'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import { SaveSearchWareHouse } from '@/api/ErpSyncMes'



export default {

  name: 'WarehouseList',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,

      form: {

        code: '',

        name: '',

        status: '',

        ishasPosition: '',

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      total: 10,

      tableData: [],

      statusArr: [

        { code: '0', name: '正常' },

        { code: '1', name: '停用' }

      ],

      ishasPositionArr: [

        { code: '0', name: '否' },

        { code: '1', name: '是' }

      ],

      dialogVisible: false,

      dialogForm: {

        data_sources: 'MES',

        stckcode: '', //

        stckname: '', //

        ishaspostion: '0', // 0否 1 是

        description: '',

        status: '0', // 0正常 1停用

        OperType: ''

      },

      operation: '',

      dialogFormRules: {

        stckcode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        stckname: [

          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }

        ]

      }



    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getTSecStckData()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    // 组织架构大列表查询

    async getTSecStckData() {

      const res = await TSecStckData(this.form)

      this.tableData = res.data

      this.total = res.count

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getTSecStckData()

    },

    // 重置

    reset() {

      this.form.code = ''

      this.form.name = ''

      this.form.status = ''

      this.form.ishasPosition = ''

      this.getTSecStckData()

    },

    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Add'

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true

      this.dialogForm.OperType = 'Update'

      this.$nextTick(() => {

        this.dialogForm.stckcode = row.code

        this.dialogForm.stckname = row.name

        this.dialogForm.status = row.status

        this.dialogForm.description = row.description

        this.dialogForm.ishaspostion = row.ishasPosition

        this.dialogForm.data_sources = row.data_sources

      })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        TSecStckDelete({ stckcode: row.code, data_sources: row.data_sources }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getTSecStckData()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.data_sources = 'MES'

      this.dialogForm.stckcode = ''

      this.dialogForm.stckname = ''

      this.dialogForm.ishaspostion = '0'

      this.dialogForm.description = ''

      this.dialogForm.status = '0'

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          TSecStckAddUpdate(this.dialogForm).then(res => {

            if (res.code === '200') {

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.getTSecStckData()

              this.$store.state.app.buttonIsDisabled = false

            } else {

              this.$store.state.app.buttonIsDisabled = false

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 200

        this.$refs.tableDataRef.doLayout()

      })

    },

    // 同步ERP

    syncERP() {

      const loading = this.$loading({

        lock: true,

        text: '正在同步ERP，请稍等...',

        spinner: 'el-icon-loading',

        customClass: 'osloading',

        background: 'rgba(0, 0, 0, 0.7)'

      })



      SaveSearchWareHouse().then(res => {

        if (res.code === '200') {

          setTimeout(() => {

            this.getTSecStckData()

            loading.close()

            this.$notify.success('同步成功！')

          }, 2000)

        }

        // else if (res.code === '300') {

        //   setTimeout(() => {

        //     loading.close()

        //     this.$message.error('同步失败！')

        //   }, 10000)

        // }

      }).catch(e => {

        loading.close()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <div style="display:flex">
          <el-button
            v-waves
            type="success"
            icon="el-icon-download"
            @click="$router.push('./../systemSetting/dataImport?fileCode=6')"
          >导入
          </el-button>
          <el-button v-waves icon="el-icon-refresh-right" @click="syncERP">同步仓库</el-button>
        </div>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="仓库编码" style="display: flex;">
              <el-input v-model="form.code" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="仓库名称" style="display: flex;">
              <el-input v-model="form.name" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="状态" style=" display: flex;">
              <el-select
                v-model="form.status"
                style="width:200px"
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in statusArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="货位管理" style="display: flex;">

              <el-select
                v-model="form.ishasPosition"
                style="width:200px"
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in ishasPositionArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>

            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="getTSecStckData">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
          style="height:5px"
        >
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseout'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
          <!--            @mouseenter="mouseHoverType=$event.type"-->
          <!--          />-->
          <!--          <svg-icon-->
          <!--            v-show="mouseHoverType==='mouseenter'"-->
          <!--            style="cursor: pointer"-->
          <!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
          <!--            @click="isExpandForm=!isExpandForm"-->
          <!--            @mouseout="mouseHoverType=$event.type"-->
          <!--          />-->
        </div>
      </div>

      <div class="elTableDiv">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
          :data="tableData"
          :height="tableHeight+'px'"
          border
          row-class-name="custom-row"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="rowNum"
            width="120"
            fixed
            label="序号"
          />
          <el-table-column
            prop="code"
            label="仓库编码"
            sortable="custom"
          />
          <el-table-column
            prop="name"
            label="仓库名称"
            sortable="custom"
          />
          <el-table-column
            prop="ishasPosition"
            label="是否货位管理"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.ishasPosition==='1'" size="small" type="primary">是</el-tag>
              <el-tag v-if="row.ishasPosition==='0'" size="small" type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            sortable="custom"
          >
            <template slot-scope="{row}">
              <el-tag v-if="row.status==='0'" size="small" type="success">正常</el-tag>
              <el-tag v-if="row.status==='1'" size="small" type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="备注"
            sortable="custom"
          >
            <template slot-scope="{row}">
              {{ row.description ? row.description : '/' }}
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="data_sources"-->
          <!--            label="数据来源"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <el-table-column
            prop="username"
            label="创建人员"
            sortable="custom"
          />
          <el-table-column
            prop="lm_date"
            label="创建时间"
            width="160"
            sortable="custom"
          />
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    class="el-icon-edit-outline"
                    :style="{color:$store.state.settings.theme}"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    @click="del(row)"
                  />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes,jumper"
        popper-class="select_bottom"
        @pagination="getTSecStckData"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="仓库编码" prop="stckcode">
          <el-input v-model="dialogForm.stckcode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="仓库名称" prop="stckname">
          <el-input v-model="dialogForm.stckname" style="width: 200px" />
        </el-form-item>
        <el-form-item required label="货位管理">
          <el-radio-group v-model="dialogForm.ishaspostion" style="width: 200px">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item required label="状态">
          <el-radio-group v-model="dialogForm.status" style="width: 200px">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="dialogForm.description" type="textarea" style="width: 490px" />
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { TSecStckAddUpdate, TSecStckData, TSecStckDelete } from '@/api/basicSettings'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import { SaveSearchWareHouse } from '@/api/ErpSyncMes'

export default {
  name: 'WarehouseList',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        code: '',
        name: '',
        status: '',
        ishasPosition: '',
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
      statusArr: [
        { code: '0', name: '正常' },
        { code: '1', name: '停用' }
      ],
      ishasPositionArr: [
        { code: '0', name: '否' },
        { code: '1', name: '是' }
      ],
      dialogVisible: false,
      dialogForm: {
        data_sources: 'MES',
        stckcode: '', //
        stckname: '', //
        ishaspostion: '0', // 0否 1 是
        description: '',
        status: '0', // 0正常 1停用
        OperType: ''
      },
      operation: '',
      dialogFormRules: {
        stckcode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        stckname: [
          { required: true, message: '请输入组织名称', trigger: ['blur', 'change'] }
        ]
      }

    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getTSecStckData()
  },
  created() {
    this.getTSecStckData()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 组织架构大列表查询
    async getTSecStckData() {
      const res = await TSecStckData(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getTSecStckData()
    },
    // 重置
    reset() {
      this.form.code = ''
      this.form.name = ''
      this.form.status = ''
      this.form.ishasPosition = ''
      this.getTSecStckData()
    },
    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Add'
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true
      this.dialogForm.OperType = 'Update'
      this.$nextTick(() => {
        this.dialogForm.stckcode = row.code
        this.dialogForm.stckname = row.name
        this.dialogForm.status = row.status
        this.dialogForm.description = row.description
        this.dialogForm.ishaspostion = row.ishasPosition
        this.dialogForm.data_sources = row.data_sources
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TSecStckDelete({ stckcode: row.code, data_sources: row.data_sources }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getTSecStckData()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.data_sources = 'MES'
      this.dialogForm.stckcode = ''
      this.dialogForm.stckname = ''
      this.dialogForm.ishaspostion = '0'
      this.dialogForm.description = ''
      this.dialogForm.status = '0'
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          TSecStckAddUpdate(this.dialogForm).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.getTSecStckData()
              this.$store.state.app.buttonIsDisabled = false
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 200
        this.$refs.tableDataRef.doLayout()
      })
    },
    // 同步ERP
    syncERP() {
      const loading = this.$loading({
        lock: true,
        text: '正在同步ERP，请稍等...',
        spinner: 'el-icon-loading',
        customClass: 'osloading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      SaveSearchWareHouse().then(res => {
        if (res.code === '200') {
          setTimeout(() => {
            this.getTSecStckData()
            loading.close()
            this.$notify.success('同步成功！')
          }, 2000)
        }
        // else if (res.code === '300') {
        //   setTimeout(() => {
        //     loading.close()
        //     this.$message.error('同步失败！')
        //   }, 10000)
        // }
      }).catch(e => {
        loading.close()
      })
    }
  }
}
</script>

 src/views/deviceManager/checkPosition.vue

@@ -1,608 +1,613 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=10')">导入</el-button>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="部位编码" style=" display: flex;">

              <el-input v-model="form.checkitemcode" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="部位名称" style=" display: flex;">

              <el-input v-model="form.checkitemname" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="点检要求" style=" display: flex;">

              <el-input v-model="form.checkdescr" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="选中扫码" style=" display: flex;">

              <el-select v-model="form.isqrcode" style="width: 200px" placeholder="请选择">

                <el-option

                  v-for="item in isqrcodeArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="点检周期" style=" display: flex;">

              <el-select v-model="form.cycle" style="width: 200px" placeholder="请选择">

                <el-option

                  v-for="item in cycleArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

        >

          <svg-icon

            v-show="mouseHoverType==='mouseout'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"

            @mouseenter="mouseHoverType=$event.type"

          />

          <svg-icon

            v-show="mouseHoverType==='mouseenter'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"

            @click="isExpandForm=!isExpandForm"

            @mouseout="mouseHoverType=$event.type"

          />

        </div>

      </div>



      <div class="elTableDiv">

        <!--        <TableColumnSettings-->

        <!--          :list1="tableColumnSettingsArray"-->

        <!--          @tableColumnUpdate="tableColumnUpdate"-->

        <!--        />-->

        <el-table

          ref="tableDataRef"

          :key="tableTimeStampKey"

          :data="tableData"

          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"

          border

          class="tableFixed"

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >



          <el-table-column

            v-for="item in tableColumnSettingsArray"

            v-if="item.show"

            :key="item.id"

            :sortable="item.sortable"

            :prop="item.prop"

            :min-width="item.minWidth"

            :label="item.label"

            :width="item.width"

            show-tooltip-when-overflow

            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"

          >

            <template slot-scope="{row}">

              <div v-if="!row[item.prop]">/</div>

              <div v-else-if="item.prop==='cycle'">{{ cycleArr.find(i=>i.code===row[item.prop]).name }}</div>

              <div v-else-if="item.prop==='isscan'">

                <div v-if="row[item.prop]==='Y'">

                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />

                  是

                </div>

                <div v-if="row[item.prop]==='N'">

                  <i class="el-icon-info" style="margin-right: 2px" />

                  否

                </div>

              </div>

              <div v-else>{{ row[item.prop] }}</div>

            </template>

          </el-table-column>



          <!--          <el-table-column-->

          <!--            type="selection"-->

          <!--            width="50"-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="RowNum"-->

          <!--            width="50"-->

          <!--            fixed-->

          <!--            label="序号"-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="code"-->

          <!--            label="部位编码"-->

          <!--            sortable="custom"-->

          <!--            show-tooltip-when-overflow-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="name"-->

          <!--            label="部位名称"-->

          <!--            show-tooltip-when-overflow-->

          <!--            sortable="custom"-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="description"-->

          <!--            label="点检要求"-->

          <!--            show-tooltip-when-overflow-->

          <!--            sortable="custom"-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <div v-if="row.description">{{ row.description }}</div>-->

          <!--              <div v-else>/</div>-->

          <!--            </template>-->

          <!--          </el-table-column>-->

          <!--          <el-table-column-->

          <!--            prop="isscan"-->

          <!--            label="选择扫码"-->

          <!--            sortable="custom"-->

          <!--            show-tooltip-when-overflow-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <div v-if="row.isscan==='Y'">-->

          <!--                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />-->

          <!--                是-->

          <!--              </div>-->

          <!--              <div v-if="row.isscan==='N'">-->

          <!--                <i class="el-icon-info" style="margin-right: 2px" />-->

          <!--                否-->

          <!--              </div>-->

          <!--            </template>-->

          <!--          </el-table-column>-->

          <!--          <el-table-column-->

          <!--            prop="cycle"-->

          <!--            label="点检周期"-->

          <!--            show-tooltip-when-overflow-->

          <!--            sortable="custom"-->

          <!--          >-->

          <!--            <template slot-scope="{row}">-->

          <!--              <div v-if="row.cycle==='Y'">年</div>-->

          <!--              <div v-if="row.cycle==='S'">季</div>-->

          <!--              <div v-if="row.cycle==='M'">月</div>-->

          <!--              <div v-if="row.cycle==='W'">周</div>-->

          <!--              <div v-if="row.cycle==='D'">日</div>-->

          <!--            </template>-->

          <!--          </el-table-column>-->

          <!--          <el-table-column-->

          <!--            prop="lm_user"-->

          <!--            label="创建人员"-->

          <!--            sortable="custom"-->

          <!--            show-tooltip-when-overflow-->

          <!--          />-->

          <!--          <el-table-column-->

          <!--            prop="lm_date"-->

          <!--            label="创建时间"-->

          <!--            show-tooltip-when-overflow-->

          <!--            width="160"-->

          <!--            sortable="custom"-->

          <!--          />-->

          <el-table-column

            label="操作"

            fixed="right"

            width="120"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i :style="{color:$store.state.settings.theme}" class="el-icon-edit-outline" @click="edit('edit',row)" />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" @click="del(row)" />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes"

        popper-class="select_bottom"

        @pagination="getDeviceCheckItemSearch"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >

      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

        <el-form-item label="部位编码" prop="checkitemcode">

          <el-input v-model="dialogForm.checkitemcode" :disabled="operation!=='add'" style="width: 200px" />

        </el-form-item>

        <el-form-item label="部位名称" prop="checkitemname">

          <el-input v-model="dialogForm.checkitemname" style="width: 200px" />

        </el-form-item>

        <el-form-item prop="cycle" label="点检周期">

          <el-select

            v-model="dialogForm.cycle"

            style="width: 200px"

            placeholder="请选择"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in cycleArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

        <el-form-item prop="isqrcode" label="选择扫码">

          <el-select

            v-model="dialogForm.isqrcode"

            style="width: 200px"

            placeholder="请选择"

            :popper-append-to-body="false"

          >

            <el-option

              v-for="item in isqrcodeArr"

              :key="item.code"

              :label="item.name"

              :value="item.code"

            />

          </el-select>

        </el-form-item>

        <el-form-item label="点检要求" prop="checkitemdescr">

          <el-input v-model="dialogForm.checkitemdescr" type="textarea" style="width: 200px" />

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import { AddUpdateDeviceCheckItem, DeleteDeviceCheckItem, DeviceCheckItemSearch } from '@/api/DeviceManager'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import TableColumnSettings from '@/components/TableColumnSettings'



export default {

  name: 'CheckPosition',

  components: {

    Pagination, TableColumnSettings

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      form: {

        checkitemcode: '', // 部位编码

        checkitemname: '', // 部位名称

        checkdescr: '', // 点检要求

        isqrcode: '', // 选中扫码

        cycle: '', // 点检周期

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      isqrcodeArr: [

        { code: 'Y', name: '是' },

        { code: 'N', name: '否' }

      ],

      cycleArr: [

        { code: 'Y', name: '年' },

        { code: 'S', name: '季' },

        { code: 'M', name: '月' },

        { code: 'W', name: '周' },

        { code: 'D', name: '日' }

      ],



      total: 10,

      tableData: [],

      tableColumnSettingsArray: [

        { minWidth: false, width: 55, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示

        { minWidth: false, width: 55, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom

        {

          minWidth: 110,

          width: false,

          prop: 'code',

          label: '部位编码',

          id: 3,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'name',

          label: '部位名称',

          id: 4,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 330,

          width: false,

          prop: 'description',

          label: '点检要求',

          id: 5,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 110,

          prop: 'isscan',

          label: '选择扫码',

          id: 6,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 110,

          prop: 'cycle',

          label: '点检周期',

          id: 7,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 110,

          prop: 'lm_user',

          label: '创建人员',

          id: 8,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 160,

          prop: 'lm_date',

          label: '创建时间',

          id: 9,

          show: true,

          fixed: false,

          sortable: true

        }

      ],

      tableTimeStampKey: new Date().getTime(), // 表格key



      dialogVisible: false,

      dialogForm: {

        id: '',

        checkitemcode: '', // 设备点检部位编码

        checkitemname: '', // 设备点检部位名称

        checkitemdescr: '', // 设备点检部位要求

        cycle: 'D', // 设备点检部位周期

        isqrcode: 'N', // 是否扫码

        OperType: '' // 操作类型

      },

      operation: '',

      dialogFormRules: {

        checkitemcode: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        checkitemname: [

          { required: true, message: '请输入部位名称', trigger: ['blur', 'change'] }

        ],

        cycle: [

          { required: true, message: '', trigger: ['blur', 'change'] }

        ],

        isqrcode: [

          { required: true, message: '', trigger: ['blur', 'change'] }

        ]

      },



      title_value: '数据导入 / 点检部位',

      code: '10',

      shows: false



    }

  },

  watch: {

    shows() {

      if (!this.shows) {

        this.getDeviceCheckItemSearch()

      }

    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.getDeviceCheckItemSearch()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    tableColumnUpdate(val, isCopyTrue) {

      if (isCopyTrue) {

        this.tableColumnSettingsArray = val

      }

      this.tableTimeStampKey = new Date().getTime()

      this.$refs.tableDataRef.doLayout()

    },

    async getDeviceCheckItemSearch() {

      const res = await DeviceCheckItemSearch(this.form)

      this.tableData = res.data

      this.total = res.count

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getDeviceCheckItemSearch()

    },

    // 查询

    search() {

      this.getDeviceCheckItemSearch()

    },

    // 重置

    reset() {

      this.form.checkitemcode = ''

      this.form.checkitemname = ''

      this.form.checkdescr = ''

      this.form.isqrcode = ''

      this.form.cycle = ''

      this.getDeviceCheckItemSearch()

    },



    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

    },

    // 修改按钮

    edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true



      this.$nextTick(() => {

        this.dialogForm.id = row.id

        this.dialogForm.cycle = row.cycle

        this.dialogForm.isqrcode = row.isscan

        this.dialogForm.checkitemcode = row.code

        this.dialogForm.checkitemname = row.name

        this.dialogForm.checkitemdescr = row.description

      })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteDeviceCheckItem({ checkitemcode: row.code }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getDeviceCheckItemSearch()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.id = ''

      this.dialogForm.checkitemcode = ''

      this.dialogForm.checkitemname = ''

      this.dialogForm.checkitemdescr = ''

      this.dialogForm.cycle = 'D'

      this.dialogForm.isqrcode = 'N'

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          const data = {

            id: this.dialogForm.id,

            checkitemcode: this.dialogForm.checkitemcode,

            checkitemname: this.dialogForm.checkitemname,

            checkitemdescr: this.dialogForm.checkitemdescr,

            cycle: this.dialogForm.cycle,

            isqrcode: this.dialogForm.isqrcode,

            OperType: this.operation === 'add' ? 'Add' : 'Update'

            // Operator: getCookie('admin')

          }

          AddUpdateDeviceCheckItem(data).then(res => {

            if (res.code === '200') {

              this.dialogVisible = false

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.getDeviceCheckItemSearch()

              this.$store.state.app.buttonIsDisabled = false

            } else {

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 255

        this.$refs.tableDataRef.doLayout()

      })

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    },

    // 导入按钮

    upload() {

      this.shows = true

      this.$refs.importPickerFunc.newDataFunc()

    },

    colos() {

      this.shows = false

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=10')">导入</el-button>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="部位编码" style=" display: flex;">
              <el-input v-model="form.checkitemcode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="部位名称" style=" display: flex;">
              <el-input v-model="form.checkitemname" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="点检要求" style=" display: flex;">
              <el-input v-model="form.checkdescr" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="选中扫码" style=" display: flex;">
              <el-select v-model="form.isqrcode" style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in isqrcodeArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="点检周期" style=" display: flex;">
              <el-select v-model="form.cycle" style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in cycleArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
        >
          <svg-icon
            v-show="mouseHoverType==='mouseout'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
            @mouseenter="mouseHoverType=$event.type"
          />
          <svg-icon
            v-show="mouseHoverType==='mouseenter'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
            @click="isExpandForm=!isExpandForm"
            @mouseout="mouseHoverType=$event.type"
          />
        </div>
      </div>

      <div class="elTableDiv">
        <!--        <TableColumnSettings-->
        <!--          :list1="tableColumnSettingsArray"-->
        <!--          @tableColumnUpdate="tableColumnUpdate"-->
        <!--        />-->
        <el-table
          ref="tableDataRef"
          :key="tableTimeStampKey"
          :data="tableData"
          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
          border
          class="tableFixed"
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >

          <el-table-column
            v-for="item in tableColumnSettingsArray"
            v-if="item.show"
            :key="item.id"
            :sortable="item.sortable"
            :prop="item.prop"
            :min-width="item.minWidth"
            :label="item.label"
            :width="item.width"
            show-tooltip-when-overflow
            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
          >
            <template slot-scope="{row}">
              <div v-if="!row[item.prop]">/</div>
              <div v-else-if="item.prop==='cycle'">{{ cycleArr.find(i=>i.code===row[item.prop]).name }}</div>
              <div v-else-if="item.prop==='isscan'">
                <div v-if="row[item.prop]==='Y'">
                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
                  是
                </div>
                <div v-if="row[item.prop]==='N'">
                  <i class="el-icon-info" style="margin-right: 2px" />
                  否
                </div>
              </div>
              <div v-else>{{ row[item.prop] }}</div>
            </template>
          </el-table-column>

          <!--          <el-table-column-->
          <!--            type="selection"-->
          <!--            width="50"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="RowNum"-->
          <!--            width="50"-->
          <!--            fixed-->
          <!--            label="序号"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="code"-->
          <!--            label="部位编码"-->
          <!--            sortable="custom"-->
          <!--            show-tooltip-when-overflow-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="name"-->
          <!--            label="部位名称"-->
          <!--            show-tooltip-when-overflow-->
          <!--            sortable="custom"-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="description"-->
          <!--            label="点检要求"-->
          <!--            show-tooltip-when-overflow-->
          <!--            sortable="custom"-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div v-if="row.description">{{ row.description }}</div>-->
          <!--              <div v-else>/</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="isscan"-->
          <!--            label="选择扫码"-->
          <!--            sortable="custom"-->
          <!--            show-tooltip-when-overflow-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div v-if="row.isscan==='Y'">-->
          <!--                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />-->
          <!--                是-->
          <!--              </div>-->
          <!--              <div v-if="row.isscan==='N'">-->
          <!--                <i class="el-icon-info" style="margin-right: 2px" />-->
          <!--                否-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="cycle"-->
          <!--            label="点检周期"-->
          <!--            show-tooltip-when-overflow-->
          <!--            sortable="custom"-->
          <!--          >-->
          <!--            <template slot-scope="{row}">-->
          <!--              <div v-if="row.cycle==='Y'">年</div>-->
          <!--              <div v-if="row.cycle==='S'">季</div>-->
          <!--              <div v-if="row.cycle==='M'">月</div>-->
          <!--              <div v-if="row.cycle==='W'">周</div>-->
          <!--              <div v-if="row.cycle==='D'">日</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="lm_user"-->
          <!--            label="创建人员"-->
          <!--            sortable="custom"-->
          <!--            show-tooltip-when-overflow-->
          <!--          />-->
          <!--          <el-table-column-->
          <!--            prop="lm_date"-->
          <!--            label="创建时间"-->
          <!--            show-tooltip-when-overflow-->
          <!--            width="160"-->
          <!--            sortable="custom"-->
          <!--          />-->
          <el-table-column
            label="操作"
            fixed="right"
            width="120"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i :style="{color:$store.state.settings.theme}" class="el-icon-edit-outline" @click="edit('edit',row)" />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" @click="del(row)" />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getDeviceCheckItemSearch"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >
      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
        <el-form-item label="部位编码" prop="checkitemcode">
          <el-input v-model="dialogForm.checkitemcode" :disabled="operation!=='add'" style="width: 200px" />
        </el-form-item>
        <el-form-item label="部位名称" prop="checkitemname">
          <el-input v-model="dialogForm.checkitemname" style="width: 200px" />
        </el-form-item>
        <el-form-item prop="cycle" label="点检周期">
          <el-select
            v-model="dialogForm.cycle"
            style="width: 200px"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in cycleArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="isqrcode" label="选择扫码">
          <el-select
            v-model="dialogForm.isqrcode"
            style="width: 200px"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in isqrcodeArr"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="点检要求" prop="checkitemdescr">
          <el-input v-model="dialogForm.checkitemdescr" type="textarea" style="width: 200px" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { AddUpdateDeviceCheckItem, DeleteDeviceCheckItem, DeviceCheckItemSearch } from '@/api/DeviceManager'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import TableColumnSettings from '@/components/TableColumnSettings'

export default {
  name: 'CheckPosition',
  components: {
    Pagination, TableColumnSettings
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        checkitemcode: '', // 部位编码
        checkitemname: '', // 部位名称
        checkdescr: '', // 点检要求
        isqrcode: '', // 选中扫码
        cycle: '', // 点检周期
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      isqrcodeArr: [
        { code: 'Y', name: '是' },
        { code: 'N', name: '否' }
      ],
      cycleArr: [
        { code: 'Y', name: '年' },
        { code: 'S', name: '季' },
        { code: 'M', name: '月' },
        { code: 'W', name: '周' },
        { code: 'D', name: '日' }
      ],

      total: 10,
      tableData: [],
      tableColumnSettingsArray: [
        { minWidth: false, width: 55, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示
        { minWidth: false, width: 55, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom
        {
          minWidth: 110,
          width: false,
          prop: 'code',
          label: '部位编码',
          id: 3,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'name',
          label: '部位名称',
          id: 4,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 330,
          width: false,
          prop: 'description',
          label: '点检要求',
          id: 5,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 110,
          prop: 'isscan',
          label: '选择扫码',
          id: 6,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 110,
          prop: 'cycle',
          label: '点检周期',
          id: 7,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 110,
          prop: 'lm_user',
          label: '创建人员',
          id: 8,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 160,
          prop: 'lm_date',
          label: '创建时间',
          id: 9,
          show: true,
          fixed: false,
          sortable: true
        }
      ],
      tableTimeStampKey: new Date().getTime(), // 表格key

      dialogVisible: false,
      dialogForm: {
        id: '',
        checkitemcode: '', // 设备点检部位编码
        checkitemname: '', // 设备点检部位名称
        checkitemdescr: '', // 设备点检部位要求
        cycle: 'D', // 设备点检部位周期
        isqrcode: 'N', // 是否扫码
        OperType: '' // 操作类型
      },
      operation: '',
      dialogFormRules: {
        checkitemcode: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        checkitemname: [
          { required: true, message: '请输入部位名称', trigger: ['blur', 'change'] }
        ],
        cycle: [
          { required: true, message: '', trigger: ['blur', 'change'] }
        ],
        isqrcode: [
          { required: true, message: '', trigger: ['blur', 'change'] }
        ]
      },

      title_value: '数据导入 / 点检部位',
      code: '10',
      shows: false

    }
  },
  watch: {
    shows() {
      if (!this.shows) {
        this.getDeviceCheckItemSearch()
      }
    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.getDeviceCheckItemSearch()
  },
  created() {
    this.getDeviceCheckItemSearch()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    tableColumnUpdate(val, isCopyTrue) {
      if (isCopyTrue) {
        this.tableColumnSettingsArray = val
      }
      this.tableTimeStampKey = new Date().getTime()
      this.$refs.tableDataRef.doLayout()
    },
    async getDeviceCheckItemSearch() {
      const res = await DeviceCheckItemSearch(this.form)
      this.tableData = res.data
      this.total = res.count
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getDeviceCheckItemSearch()
    },
    // 查询
    search() {
      this.getDeviceCheckItemSearch()
    },
    // 重置
    reset() {
      this.form.checkitemcode = ''
      this.form.checkitemname = ''
      this.form.checkdescr = ''
      this.form.isqrcode = ''
      this.form.cycle = ''
      this.getDeviceCheckItemSearch()
    },

    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
    },
    // 修改按钮
    edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      this.$nextTick(() => {
        this.dialogForm.id = row.id
        this.dialogForm.cycle = row.cycle
        this.dialogForm.isqrcode = row.isscan
        this.dialogForm.checkitemcode = row.code
        this.dialogForm.checkitemname = row.name
        this.dialogForm.checkitemdescr = row.description
      })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteDeviceCheckItem({ checkitemcode: row.code }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getDeviceCheckItemSearch()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.id = ''
      this.dialogForm.checkitemcode = ''
      this.dialogForm.checkitemname = ''
      this.dialogForm.checkitemdescr = ''
      this.dialogForm.cycle = 'D'
      this.dialogForm.isqrcode = 'N'
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          const data = {
            id: this.dialogForm.id,
            checkitemcode: this.dialogForm.checkitemcode,
            checkitemname: this.dialogForm.checkitemname,
            checkitemdescr: this.dialogForm.checkitemdescr,
            cycle: this.dialogForm.cycle,
            isqrcode: this.dialogForm.isqrcode,
            OperType: this.operation === 'add' ? 'Add' : 'Update'
            // Operator: getCookie('admin')
          }
          AddUpdateDeviceCheckItem(data).then(res => {
            if (res.code === '200') {
              this.dialogVisible = false
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.getDeviceCheckItemSearch()
              this.$store.state.app.buttonIsDisabled = false
            } else {
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 255
        this.$refs.tableDataRef.doLayout()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    },
    // 导入按钮
    upload() {
      this.shows = true
      this.$refs.importPickerFunc.newDataFunc()
    },
    colos() {
      this.shows = false
    }
  }
}
</script>

 src/views/deviceManager/checkRecord.vue

@@ -1,595 +1,600 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup">

        <!--        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>-->

        <!--        <el-button v-waves icon="el-icon-download" @click="upload">导入</el-button>-->

        <el-button v-waves type="primary" icon="el-icon-download" @click="download">导出</el-button>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm" style="justify-content: flex-start">

            <el-form-item label="生产车间" style=" display: flex;">

              <el-select v-model="form.wkshopcode" style="width: 200px" placeholder="请选择">

                <el-option

                  v-for="item in wkshopSelectArr"

                  :key="item.torg_code"

                  :label="item.torg_name"

                  :value="item.torg_code"

                />

              </el-select>

            </el-form-item>

            <el-form-item label="设备编码" style=" display: flex;">

              <el-input v-model="form.eqpcode" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="设备名称" style=" display: flex;">

              <el-input v-model="form.eqpname" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="标准名称" style=" display: flex;">

              <el-input v-model="form.stanedname" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="点检人员" style=" display: flex;">

              <el-input v-model="form.checkuser" style="width: 200px" placeholder="请输入" />

            </el-form-item>

            <el-form-item v-show="isExpandForm" label="点检时间" style=" display: flex;font-size:14px;align-items: center">

              <el-date-picker

                v-model="form.checkdate"

                type="daterange"

                :clearable="false"

                class="timeMini"

                range-separator="~"

                start-placeholder="开始日期"

                style="width: 200px;display: flex;line-height: 34px ;height: 34px;"

                end-placeholder="结束日期"

                size="mini"

              />

            </el-form-item>



          </div>

          <div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">

            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>

        <div

          class="bodyTopFormExpand"

        >

          <svg-icon

            v-show="mouseHoverType==='mouseout'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"

            @mouseenter="mouseHoverType=$event.type"

          />

          <svg-icon

            v-show="mouseHoverType==='mouseenter'"

            style="cursor: pointer"

            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"

            @click="isExpandForm=!isExpandForm"

            @mouseout="mouseHoverType=$event.type"

          />

        </div>

      </div>



      <div class="elTableDiv">

        <!--        <TableColumnSettings-->

        <!--          :list1="tableColumnSettingsArray"-->

        <!--          @tableColumnUpdate="tableColumnUpdate"-->

        <!--        />-->

        <el-table

          ref="tableDataRef"

          :key="tableTimeStampKey"

          class="tableFixed"

          :data="tableData"

          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"

          border

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px'}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >



          <el-table-column

            v-for="item in tableColumnSettingsArray"

            v-if="item.show"

            :key="item.id"

            :sortable="item.sortable"

            :prop="item.prop"

            :min-width="item.minWidth"

            :label="item.label"

            :width="item.width"

            show-tooltip-when-overflow

            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"

          >

            <template slot-scope="{row}">

              <div v-if="!row[item.prop]">/</div>



              <div v-else-if="item.prop==='chk_result'">

                <div v-if="row[item.prop]==='OK'" style="display: flex;align-items: center">

                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />

                  正常

                </div>

                <div v-if="row[item.prop]==='NG'" style="display: flex;align-items: center">

                  <i class="el-icon-info" style="margin-right: 2px" />

                  异常

                </div>

              </div>

              <div v-else>{{ row[item.prop] }}</div>

            </template>

          </el-table-column>



          <el-table-column

            label="明细"

            width="120"

            fixed="right"

          >

            <template slot-scope="{row}">

              <!--              <div class="operationClass">-->

              <!--                <el-tooltip class="item" effect="dark" content="编辑" placement="top">-->

              <!--                  <i class="el-icon-edit-outline" @click="edit('edit',row)" />-->

              <!--                </el-tooltip>-->

              <!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->

              <!--                  <i class="el-icon-delete" @click="del(row)" />-->

              <!--                </el-tooltip>-->

              <!--              </div>-->

              <i

                class="el-icon-tickets"

                :style="{color:$store.state.settings.theme}"

                style="cursor: pointer;margin-right: 15px"

                @click="edit('edit',row)"

              />

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes"

        popper-class="select_bottom"

        @pagination="getDeviceCheckTakeSearch"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'点检明细'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="15vh"

      @closed="handleClose"

      @close="handleClose"

    >



      <div class="elTableDiv" style="margin-top: 0">

        <el-table

          :data="tableDataDialog"

          :height="500+'px'"

          border

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:500+'px'}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >

          <el-table-column

            prop="seq"

            width="50"

            fixed

            label="序号"

          />

          <el-table-column

            prop="itemcode"

            label="部位编码"

          />

          <el-table-column

            prop="itemname"

            label="部位名称"

          />

          <el-table-column

            prop="result"

            label="点检结果"

          >

            <template slot-scope="{row}">

              <div v-if="row.result==='OK'" style="display: flex;align-items: center">

                <!--                <div style="margin-right: 5px;width:10px;height: 10px;border-radius: 50%;background-color: #42b983" />-->

                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />

                正常

              </div>

              <div v-if="row.result==='NG'" style="display: flex;align-items: center">

                <!--                <div style="margin-right: 5px;width:10px;height: 10px;border-radius: 50%;background-color: red" />-->

                <i class="el-icon-info" style="margin-right: 2px" />

                异常

              </div>

            </template>

          </el-table-column>

          <el-table-column

            prop="chk_value"

            label="数值"

          />

          <!--          <el-table-column-->

          <!--            prop="remark"-->

          <!--            label="备注"-->

          <!--            show-tooltip-when-overflow-->

          <!--          />-->

        </el-table>

      </div>



      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisible = false">返 回</el-button>

          <!--          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>-->

          <!--          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>-->

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import { AddUpdateOrganization, DeleteOrganization } from '@/api/basicSettings'

import { getCookie } from '@/utils/auth'

import { handleDatetime } from '@/utils/global'

import { DeviceCheckSubTakeSearch, DeviceCheckTakeOutExcel, DeviceCheckTakeSearch } from '@/api/DeviceManager'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import TableColumnSettings from '@/components/TableColumnSettings'

import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'



export default {

  name: 'CheckRecord',

  components: {

    Pagination, TableColumnSettings

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      form: {

        wkshopcode: '', // 车间编码

        eqpcode: '', // 设备编码

        eqpname: '', // 设备名称

        stanedname: '', // 标准名称

        checkuser: '', // 点检人员

        checkdate: '', // 点检时间

        prop: 'chk_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      wkshopSelectArr: [],

      total: 10,

      tableData: [],

      tableColumnSettingsArray: [

        // { minWidth: false, width: 55, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示

        { minWidth: false, width: 55, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom

        {

          minWidth: 110,

          width: false,

          prop: 'djwo',

          label: '点检单号',

          id: 3,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 130,

          prop: 'org_code',

          label: '生产车间编码',

          id: 4,

          show: false,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'org_name',

          label: '生产车间',

          id: 5,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'eqp_code',

          label: '设备编码',

          id: 6,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'eqp_name',

          label: '设备名称',

          id: 7,

          show: true,

          fixed: false,

          sortable: true

        }, {

          minWidth: false,

          width: 130,

          prop: 'stanedcode',

          label: '点检标准编码',

          id: 8,

          show: true,

          fixed: false,

          sortable: true

        }, {

          minWidth: 130,

          width: false,

          prop: 'stanedname',

          label: '点检标准名称',

          id: 9,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 110,

          prop: 'chk_user',

          label: '点检人员',

          id: 10,

          show: true,

          fixed: false,

          sortable: true

        }, {

          minWidth: false,

          width: 110,

          prop: 'chk_result',

          label: '点检结果',

          id: 11,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 160,

          prop: 'chk_date',

          label: '点检时间',

          id: 12,

          show: true,

          fixed: false,

          sortable: true

        }

      ],

      tableTimeStampKey: new Date().getTime(), // 表格key

      dialogVisible: false,

      // dialogForm: {

      //   OrgType: '',

      //   OrgCode: '',

      //   OrgName: '',

      //   SupUnit: ''// 上级单位

      // },

      operation: '',



      tableDataDialog: [], // 点检明细对话框table



      title_value: '数据导入 / 点检部位',

      code: '4',

      shows: false



    }

  },



  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.handleRequest()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    tableColumnUpdate(val, isCopyTrue) {

      if (isCopyTrue) {

        this.tableColumnSettingsArray = val

      }

      this.tableTimeStampKey = new Date().getTime()



      this.$refs.tableDataRef.doLayout()

    },

    handleRequest() {

      this.getDeviceCheckTakeSearch().then(res => {

        if (res.code === '200') {

          this.getShopSearch()

        }

      })

    },

    async getDeviceCheckTakeSearch() {

      let tempDate = this.form.checkdate

      if (tempDate.length > 0) {

        tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])

      }



      const data = {

        wkshopcode: this.form.wkshopcode,

        eqpcode: this.form.eqpcode,

        eqpname: this.form.eqpname,

        stanedname: this.form.stanedname,

        checkuser: this.form.checkuser,

        checkdate: tempDate,

        prop: this.form.prop, // 排序字段

        order: this.form.order, // 排序字段

        page: this.form.page, // 第几页

        rows: this.form.rows // 每页多少条

      }



      const res = await DeviceCheckTakeSearch(data)

      this.tableData = res.data

      this.total = res.count

      return { code: res.code }

    },

    // 获取执行车间下拉数组

    async getShopSearch() {

      const { data: res } = await PrentOrganizationNoCompany()

      this.wkshopSelectArr = res

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getDeviceCheckTakeSearch()

    },

    // 查询

    search() {

      this.getDeviceCheckTakeSearch()

    },

    // 导入按钮

    upload() {

      this.shows = true

      this.$refs.importPickerFunc.newDataFunc()

    },

    colos() {

      this.shows = false

    },

    // 重置

    reset() {

      this.form.wkshopcode = ''

      this.form.eqpcode = ''

      this.form.eqpname = ''

      this.form.stanedname = ''

      this.form.checkuser = ''

      this.form.checkdate = ''

      this.getDeviceCheckTakeSearch()

    },



    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

    },

    // 修改按钮

    async edit(operation, row) {

      this.operation = operation

      this.dialogVisible = true



      const res = await DeviceCheckSubTakeSearch({ djwo: row.djwo })



      this.tableDataDialog = res.data

      // this.$nextTick(() => {

      //   this.dialogForm.OrgCode = row.org_code

      //   this.dialogForm.OrgName = row.org_name

      //   this.dialogForm.SupUnit = row.parent_id

      // })

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteOrganization({ orgid: row.code }).then(res => {

          if (res.code === '200') {

            this.$message.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getDeviceCheckTakeSearch()

          }

        })

      }).catch(() => {

        this.$message.info('已取消删除')

      })

    },

    // 对话框关闭事件

    handleClose() {

      // this.dialogForm.OrgType = ''

      // this.dialogForm.OrgCode = ''

      // this.dialogForm.OrgName = ''

      // this.dialogForm.SupUnit = ''

      // this.$refs.dialogForm.clearValidate()

      this.tableDataDialog = []

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          const data = {

            OrganCode: this.dialogForm.OrgCode,

            OrganName: this.dialogForm.OrgName,

            OperType: this.operation === 'add' ? 'Add' : 'Update',

            Operator: getCookie('admin')

          }

          AddUpdateOrganization(data).then(res => {

            if (res.code === '200') {

              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.dialogVisible = false

              this.getDeviceCheckTakeSearch()

            } else {

              this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },

    async download() {

      let tempDate = this.form.checkdate

      if (tempDate.length > 0) {

        tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])

      }

      const data = {

        wkshopcode: this.form.wkshopcode,

        eqpcode: this.form.eqpcode,

        eqpname: this.form.eqpname,

        stanedname: this.form.stanedname,

        checkuser: this.form.checkuser,

        checkdate: tempDate

      }

      const { data: res } = await DeviceCheckTakeOutExcel(data)

      window.location.href = res

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 255



        this.$refs.tableDataRef.doLayout()

      })

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    }



  }

}

</script>



<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup">
        <!--        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>-->
        <!--        <el-button v-waves icon="el-icon-download" @click="upload">导入</el-button>-->
        <el-button v-waves type="primary" icon="el-icon-download" @click="download">导出</el-button>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm" style="justify-content: flex-start">
            <el-form-item label="生产车间" style=" display: flex;">
              <el-select v-model="form.wkshopcode" style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in wkshopSelectArr"
                  :key="item.torg_code"
                  :label="item.torg_name"
                  :value="item.torg_code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="设备编码" style=" display: flex;">
              <el-input v-model="form.eqpcode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="设备名称" style=" display: flex;">
              <el-input v-model="form.eqpname" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="标准名称" style=" display: flex;">
              <el-input v-model="form.stanedname" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="点检人员" style=" display: flex;">
              <el-input v-model="form.checkuser" style="width: 200px" placeholder="请输入" />
            </el-form-item>
            <el-form-item v-show="isExpandForm" label="点检时间" style=" display: flex;font-size:14px;align-items: center">
              <el-date-picker
                v-model="form.checkdate"
                type="daterange"
                :clearable="false"
                class="timeMini"
                range-separator="~"
                start-placeholder="开始日期"
                style="width: 200px;display: flex;line-height: 34px ;height: 34px;"
                end-placeholder="结束日期"
                size="mini"
              />
            </el-form-item>

          </div>
          <div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">
            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>
        <div
          class="bodyTopFormExpand"
        >
          <svg-icon
            v-show="mouseHoverType==='mouseout'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"
            @mouseenter="mouseHoverType=$event.type"
          />
          <svg-icon
            v-show="mouseHoverType==='mouseenter'"
            style="cursor: pointer"
            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"
            @click="isExpandForm=!isExpandForm"
            @mouseout="mouseHoverType=$event.type"
          />
        </div>
      </div>

      <div class="elTableDiv">
        <!--        <TableColumnSettings-->
        <!--          :list1="tableColumnSettingsArray"-->
        <!--          @tableColumnUpdate="tableColumnUpdate"-->
        <!--        />-->
        <el-table
          ref="tableDataRef"
          :key="tableTimeStampKey"
          class="tableFixed"
          :data="tableData"
          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px'}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >

          <el-table-column
            v-for="item in tableColumnSettingsArray"
            v-if="item.show"
            :key="item.id"
            :sortable="item.sortable"
            :prop="item.prop"
            :min-width="item.minWidth"
            :label="item.label"
            :width="item.width"
            show-tooltip-when-overflow
            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
          >
            <template slot-scope="{row}">
              <div v-if="!row[item.prop]">/</div>

              <div v-else-if="item.prop==='chk_result'">
                <div v-if="row[item.prop]==='OK'" style="display: flex;align-items: center">
                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
                  正常
                </div>
                <div v-if="row[item.prop]==='NG'" style="display: flex;align-items: center">
                  <i class="el-icon-info" style="margin-right: 2px" />
                  异常
                </div>
              </div>
              <div v-else>{{ row[item.prop] }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="明细"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <!--              <div class="operationClass">-->
              <!--                <el-tooltip class="item" effect="dark" content="编辑" placement="top">-->
              <!--                  <i class="el-icon-edit-outline" @click="edit('edit',row)" />-->
              <!--                </el-tooltip>-->
              <!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->
              <!--                  <i class="el-icon-delete" @click="del(row)" />-->
              <!--                </el-tooltip>-->
              <!--              </div>-->
              <i
                class="el-icon-tickets"
                :style="{color:$store.state.settings.theme}"
                style="cursor: pointer;margin-right: 15px"
                @click="edit('edit',row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getDeviceCheckTakeSearch"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'点检明细'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="15vh"
      @closed="handleClose"
      @close="handleClose"
    >

      <div class="elTableDiv" style="margin-top: 0">
        <el-table
          :data="tableDataDialog"
          :height="500+'px'"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:500+'px'}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="seq"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="itemcode"
            label="部位编码"
          />
          <el-table-column
            prop="itemname"
            label="部位名称"
          />
          <el-table-column
            prop="result"
            label="点检结果"
          >
            <template slot-scope="{row}">
              <div v-if="row.result==='OK'" style="display: flex;align-items: center">
                <!--                <div style="margin-right: 5px;width:10px;height: 10px;border-radius: 50%;background-color: #42b983" />-->
                <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
                正常
              </div>
              <div v-if="row.result==='NG'" style="display: flex;align-items: center">
                <!--                <div style="margin-right: 5px;width:10px;height: 10px;border-radius: 50%;background-color: red" />-->
                <i class="el-icon-info" style="margin-right: 2px" />
                异常
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="chk_value"
            label="数值"
          />
          <!--          <el-table-column-->
          <!--            prop="remark"-->
          <!--            label="备注"-->
          <!--            show-tooltip-when-overflow-->
          <!--          />-->
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisible = false">返 回</el-button>
          <!--          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>-->
          <!--          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>-->
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { AddUpdateOrganization, DeleteOrganization } from '@/api/basicSettings'
import { getCookie } from '@/utils/auth'
import { handleDatetime } from '@/utils/global'
import { DeviceCheckSubTakeSearch, DeviceCheckTakeOutExcel, DeviceCheckTakeSearch } from '@/api/DeviceManager'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import TableColumnSettings from '@/components/TableColumnSettings'
import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'

export default {
  name: 'CheckRecord',
  components: {
    Pagination, TableColumnSettings
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        wkshopcode: '', // 车间编码
        eqpcode: '', // 设备编码
        eqpname: '', // 设备名称
        stanedname: '', // 标准名称
        checkuser: '', // 点检人员
        checkdate: '', // 点检时间
        prop: 'chk_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      wkshopSelectArr: [],
      total: 10,
      tableData: [],
      tableColumnSettingsArray: [
        // { minWidth: false, width: 55, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示
        { minWidth: false, width: 55, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom
        {
          minWidth: 110,
          width: false,
          prop: 'djwo',
          label: '点检单号',
          id: 3,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 130,
          prop: 'org_code',
          label: '生产车间编码',
          id: 4,
          show: false,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'org_name',
          label: '生产车间',
          id: 5,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'eqp_code',
          label: '设备编码',
          id: 6,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'eqp_name',
          label: '设备名称',
          id: 7,
          show: true,
          fixed: false,
          sortable: true
        }, {
          minWidth: false,
          width: 130,
          prop: 'stanedcode',
          label: '点检标准编码',
          id: 8,
          show: true,
          fixed: false,
          sortable: true
        }, {
          minWidth: 130,
          width: false,
          prop: 'stanedname',
          label: '点检标准名称',
          id: 9,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 110,
          prop: 'chk_user',
          label: '点检人员',
          id: 10,
          show: true,
          fixed: false,
          sortable: true
        }, {
          minWidth: false,
          width: 110,
          prop: 'chk_result',
          label: '点检结果',
          id: 11,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 160,
          prop: 'chk_date',
          label: '点检时间',
          id: 12,
          show: true,
          fixed: false,
          sortable: true
        }
      ],
      tableTimeStampKey: new Date().getTime(), // 表格key
      dialogVisible: false,
      // dialogForm: {
      //   OrgType: '',
      //   OrgCode: '',
      //   OrgName: '',
      //   SupUnit: ''// 上级单位
      // },
      operation: '',

      tableDataDialog: [], // 点检明细对话框table

      title_value: '数据导入 / 点检部位',
      code: '4',
      shows: false

    }
  },

  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.handleRequest()
  },
  created() {
    this.handleRequest()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    tableColumnUpdate(val, isCopyTrue) {
      if (isCopyTrue) {
        this.tableColumnSettingsArray = val
      }
      this.tableTimeStampKey = new Date().getTime()

      this.$refs.tableDataRef.doLayout()
    },
    handleRequest() {
      this.getDeviceCheckTakeSearch().then(res => {
        if (res.code === '200') {
          this.getShopSearch()
        }
      })
    },
    async getDeviceCheckTakeSearch() {
      let tempDate = this.form.checkdate
      if (tempDate.length > 0) {
        tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])
      }

      const data = {
        wkshopcode: this.form.wkshopcode,
        eqpcode: this.form.eqpcode,
        eqpname: this.form.eqpname,
        stanedname: this.form.stanedname,
        checkuser: this.form.checkuser,
        checkdate: tempDate,
        prop: this.form.prop, // 排序字段
        order: this.form.order, // 排序字段
        page: this.form.page, // 第几页
        rows: this.form.rows // 每页多少条
      }

      const res = await DeviceCheckTakeSearch(data)
      this.tableData = res.data
      this.total = res.count
      return { code: res.code }
    },
    // 获取执行车间下拉数组
    async getShopSearch() {
      const { data: res } = await PrentOrganizationNoCompany()
      this.wkshopSelectArr = res
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getDeviceCheckTakeSearch()
    },
    // 查询
    search() {
      this.getDeviceCheckTakeSearch()
    },
    // 导入按钮
    upload() {
      this.shows = true
      this.$refs.importPickerFunc.newDataFunc()
    },
    colos() {
      this.shows = false
    },
    // 重置
    reset() {
      this.form.wkshopcode = ''
      this.form.eqpcode = ''
      this.form.eqpname = ''
      this.form.stanedname = ''
      this.form.checkuser = ''
      this.form.checkdate = ''
      this.getDeviceCheckTakeSearch()
    },

    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
    },
    // 修改按钮
    async edit(operation, row) {
      this.operation = operation
      this.dialogVisible = true

      const res = await DeviceCheckSubTakeSearch({ djwo: row.djwo })

      this.tableDataDialog = res.data
      // this.$nextTick(() => {
      //   this.dialogForm.OrgCode = row.org_code
      //   this.dialogForm.OrgName = row.org_name
      //   this.dialogForm.SupUnit = row.parent_id
      // })
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteOrganization({ orgid: row.code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getDeviceCheckTakeSearch()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      // this.dialogForm.OrgType = ''
      // this.dialogForm.OrgCode = ''
      // this.dialogForm.OrgName = ''
      // this.dialogForm.SupUnit = ''
      // this.$refs.dialogForm.clearValidate()
      this.tableDataDialog = []
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          const data = {
            OrganCode: this.dialogForm.OrgCode,
            OrganName: this.dialogForm.OrgName,
            OperType: this.operation === 'add' ? 'Add' : 'Update',
            Operator: getCookie('admin')
          }
          AddUpdateOrganization(data).then(res => {
            if (res.code === '200') {
              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.getDeviceCheckTakeSearch()
            } else {
              this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },
    async download() {
      let tempDate = this.form.checkdate
      if (tempDate.length > 0) {
        tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])
      }
      const data = {
        wkshopcode: this.form.wkshopcode,
        eqpcode: this.form.eqpcode,
        eqpname: this.form.eqpname,
        stanedname: this.form.stanedname,
        checkuser: this.form.checkuser,
        checkdate: tempDate
      }
      const { data: res } = await DeviceCheckTakeOutExcel(data)
      window.location.href = res
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 255

        this.$refs.tableDataRef.doLayout()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    }

  }
}
</script>


 src/views/deviceManager/checkStandard.vue

@@ -1,1349 +1,1354 @@
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div class="bodyTopButtonGroup" style="justify-content: space-between">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>

        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=10_1')">导入</el-button>

      </div>



      <div class="bodyTopFormGroup">

        <el-form

          ref="form"

          :model="form"

          label-width="100px"

          inline

          style="display: flex;"

        >

          <div class="elForm">

            <el-form-item label="标准编码" style=" display: flex;">

              <el-input v-model="form.checkstandcode" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="标准名称" style=" display: flex;">

              <el-input v-model="form.checkstandname" placeholder="请输入" style="width: 200px" />

            </el-form-item>

            <el-form-item label="点检管控" style=" display: flex;">

              <el-select v-model="form.checkcontr" style="width: 200px" placeholder="请选择">

                <el-option

                  v-for="item in checkcontrArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </el-form-item>

          </div>

          <div

            class="bodySearchReset"

            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"

          >

            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>

            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>

          </div>

        </el-form>



        <div

          class="bodyTopFormExpand"

        />

      </div>



      <div class="elTableDiv">

        <!--        <TableColumnSettings-->

        <!--          :list1="tableColumnSettingsArray"-->

        <!--          @tableColumnUpdate="tableColumnUpdate"-->

        <!--        />-->

        <el-table

          ref="tableDataRef"

          :key="tableTimeStampKey"

          :data="tableData"

          :height="tableHeight+'px'"

          border

          class="tableFixed"

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:tableHeight+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

          @sort-change="sortChange"

        >



          <el-table-column

            v-for="item in tableColumnSettingsArray"

            v-if="item.show"

            :key="item.id"

            :sortable="item.sortable"

            :prop="item.prop"

            :min-width="item.minWidth"

            :label="item.label"

            :width="item.width"

            show-tooltip-when-overflow

            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"

          >

            <template slot-scope="{row}">

              <div v-if="!row[item.prop]">/</div>

              <div v-else-if="item.prop==='is_checkeqp'">

                <i

                  v-if="row[item.prop]==='Y'"

                  :style="{color:$store.state.settings.theme}"

                  class="el-icon-share"

                  @click="checkeqpClick(row)"

                />

                <i

                  v-if="row[item.prop]==='N'"

                  class="el-icon-share"

                  style="color: rgb(180 ,181, 185)"

                  @click="checkeqpClick(row)"

                />

              </div>

              <div v-else-if="item.prop==='iscontr'">

                <div v-if="row[item.prop]==='Y'">

                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />

                  是

                </div>

                <div v-if="row[item.prop]==='N'">

                  <i class="el-icon-info" style="margin-right: 2px" />

                  否

                </div>

              </div>

              <div v-else>{{ row[item.prop] }}</div>

            </template>

          </el-table-column>



          <el-table-column

            label="操作"

            fixed="right"

            width="120"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-tooltip class="item" effect="dark" content="编辑" placement="top">

                  <i

                    :style="{color:$store.state.settings.theme}"

                    class="el-icon-edit-outline"

                    @click="edit('edit',row)"

                  />

                </el-tooltip>

                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">

                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" @click="del(row)" />

                </el-tooltip>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <!--分页-->

      <pagination

        :total="total"

        :page.sync="form.page"

        :limit.sync="form.rows"

        align="right"

        layout="total,prev, pager, next,sizes"

        popper-class="select_bottom"

        @pagination="getDeviceCheckStandArdSearch"

      />

    </div>



    <el-dialog

      v-el-drag-dialog

      :title="operation==='add'?'新增':'编辑'"

      :visible.sync="dialogVisible"

      width="800px"

      :close-on-click-modal="false"

      top="8vh"

      @closed="handleClose"

    >

      <!--      @close="handleClose"-->

      <div>

        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" style="margin: -20px 10px 20px 0" />设备点检标准信息：

      </div>

      <div style="margin: 0 30px;">

        <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">

          <el-form-item label="标准编码" prop="code">

            <el-input v-model="dialogForm.code" :disabled="operation!=='add'" style="width: 200px" />

          </el-form-item>

          <el-form-item label="标准名称" prop="name">

            <el-input v-model="dialogForm.name" style="width: 200px" />

          </el-form-item>

          <el-form-item required label="点检管控">

            <el-select

              v-model="dialogForm.enable"

              style="width: 200px"

              placeholder="请选择"

              :popper-append-to-body="false"

            >

              <el-option

                v-for="item in checkcontrArr"

                :key="item.code"

                :label="item.name"

                :value="item.code"

              />

            </el-select>

          </el-form-item>

          <el-form-item label="标准描述" prop="description">

            <el-input v-model="dialogForm.description" type="textarea" style="width: 200px" />

          </el-form-item>

        </el-form>

      </div>

      <div>

        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" style="margin: -20px 10px 20px 0" />设备关联点检项信息：

      </div>

      <div style="margin-bottom:10px">

        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="addRow">新增</el-button>

      </div>

      <div class="elTableDiv">

        <el-table

          ref="tableDataDialogRef"

          :data="tableDataDialog"

          :height="(tableHeight-300)+'px'"

          border

          :row-class-name="tableRowClassName"

          :style="{width: 100+'%',height:(tableHeight-300)+'px',}"

          highlight-current-row

          :header-cell-style="this.$headerCellStyle"

          :cell-style="this.$cellStyle"

        >

          <el-table-column

            type="index"

            width="50"

            label="序号"

          />

          <el-table-column

            prop="checkitem_code"

            label="点检部位编码"

            show-tooltip-when-overflow

          >

            <template slot-scope="{row}">

              <div v-if="row.isVisible===0">{{ row.checkitem_code }}</div>

              <el-select

                v-if="row.isVisible===1"

                v-model="row.checkitem_code"

                placeholder="请选择"

                @change="val=>selectChange(val,row)"

              >

                <el-option

                  v-for="item in checkItemSelectArr"

                  :key="item.name"

                  :label="item.code"

                  :value="item.name"

                />

              </el-select>

            </template>

          </el-table-column>

          <el-table-column

            prop="checkitem_name"

            label="点检部位名称"

            show-tooltip-when-overflow

          >

            <template slot-scope="{row}">

              <div v-if="row.isVisible===0">{{ row.checkitem_name }}</div>

              <el-select

                v-if="row.isVisible===1"

                v-model="row.checkitem_code"

                placeholder="请选择"

                @change="val=>selectChange(val,row)"

              >

                <el-option

                  v-for="item in checkItemSelectArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </template>

          </el-table-column>



          <el-table-column

            prop="checkitem_descr"

            label="点检要求"

            show-tooltip-when-overflow

          >

            <template slot-scope="{row}">

              <div v-if="row.isVisible===0">{{ row.checkitem_descr }}</div>

              <el-input v-else v-model="row.checkitem_descr" />

            </template>

          </el-table-column>

          <el-table-column

            prop="isscan"

            label="选择扫码"

            show-tooltip-when-overflow

          >

            <template slot-scope="{row}">

              <div v-if="row.isVisible===0">{{ row.isscan === 'Y' ? '是' : '否' }}</div>

              <el-select

                v-if="row.isVisible===1"

                v-model="row.isscan"

                placeholder="请选择"

              >

                <el-option

                  v-for="item in checkcontrArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </template>

          </el-table-column>

          <el-table-column

            prop="cycle"

            label="点检周期"

            show-tooltip-when-overflow

          >

            <template slot-scope="{row}">

              <div v-if="row.isVisible===0">{{ row.cycle === 'D' ? '日' : '' }}</div>

              <el-select

                v-if="row.isVisible===1"

                v-model="row.cycle"

                placeholder="请选择"

              >

                <el-option

                  v-for="item in cycleArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

            </template>

          </el-table-column>

          <el-table-column

            label="操作"

            width="120"

            fixed="right"

          >

            <template slot-scope="{row}">

              <div class="operationClass">

                <el-button v-if="row.isVisible===0" v-waves type="text" @click="editRow(row)">编辑</el-button>

                <el-button v-if="row.isVisible===0" v-waves type="text" @click="delRow(row)">删除</el-button>



                <el-button v-if="row.isVisible===1" v-waves type="text" @click="saveRow(row)">确认</el-button>

                <el-button v-if="row.isVisible===1" v-waves type="text" @click="cancelRow(row)">取消</el-button>

              </div>

            </template>

          </el-table-column>

        </el-table>

      </div>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="dialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



    <!--    关联设备-->

    <el-dialog

      v-el-drag-dialog

      title="关联设备"

      :visible.sync="dialogVisibleEqp"

      width="800px"

      top="10vh"

      :close-on-click-modal="false"

      class="dialogVisibleEqp"

      @closed="handleCloseEqp"

      @close="handleCloseEqp"

    >

      <!--      @opened="handleOpenedRoles"-->



      <div>

        <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" /> 标准名称：{{ dialogFormEqp.name }}

      </div>

      <el-divider />

      <div>

        <div style="margin-bottom:20px">

          <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 设备所属车间集合：

        </div>

        <div class="myCheckboxGroup">



          <div

            v-for="item in dialogFormEqp.eqpArr"

            :key="item.code"

            :style="{border:item.isSelected1?'1px solid '+$store.state.settings.theme:'1px solid #eee'}"

            class="myCheckbox"

            @click="myCheckboxClick(item)"

          >

            <!--            <input-->

            <!--              class="myCheckboxInput"-->

            <!--              type="checkbox"-->

            <!--              :value="item.code"-->

            <!--              :name="item.name"-->

            <!--              :style="{color:item.isSelected2?'#42b983':'#fff'}"-->

            <!--              @click="myCheckboxInputClick(item)"-->

            <!--            >{{ item.name }}-->

            <!--            父子点击事件不影响-->

            <!--            onClick="event.cancelBubble = true"-->



            <el-checkbox

              :key="item.code"

              v-model="item.isSelected2"

              class="myCheckboxInput"

              :value="item.code"

              :name="item.name"

              :checked="item.isSelected2"

              :label="item.name"

              @change="myCheckboxInputClick(item)"

            />

            <div class="myCheckboxInputLabel">{{ item.name }}</div>



          </div>

        </div>

      </div>

      <el-divider />

      <div>

        <div style="margin-bottom:20px">

          <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 设备信息：

        </div>

        <el-tree

          ref="epqTree"

          :data="dialogFormEqp.eqpTree"

          show-checkbox

          node-key="code"

          default-expand-all

          style="height: 320px;overflow: auto"

          :props="defaultPropsOfEqpTree"

          @check="checkBoxClick"

        />

        <!--        @check-change="checkChange"-->



      </div>

      <span slot="footer" class="dialog-footer">

        <div class="footerButton">

          <el-button v-waves @click="eqpDialogVisibleCancel">取 消</el-button>

          <el-button

            v-waves

            type="primary"

            :loading="$store.state.app.buttonIsDisabled"

            :disabled="$store.state.app.buttonIsDisabled"

            @click="eqpDialogVisibleConfirm"

          >确 定</el-button>

        </div>

      </span>

    </el-dialog>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

import {

  AddUpdateDeviceCheckStandArd, DeleteDeviceCheckStaned,

  DeviceCheckItemSelect,

  DeviceCheckStandArdSearch, DeviceCheckStanedAssociationEqp, SaveDeviceCheckStanedAssociationEqp,

  ViewDeviceCheckStanedSearch

} from '@/api/DeviceManager'

import $ from 'jquery'

import { validateCode } from '@/utils/global'

import elDragDialog from '@/directive/el-drag-dialog'

import waves from '@/directive/waves'

import TableColumnSettings from '@/components/TableColumnSettings'



export default {

  name: 'CheckStandard',

  components: {

    Pagination, TableColumnSettings

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,

      form: {

        checkstandcode: '', // 标准编码

        checkstandname: '', // 标准名称

        checkcontr: '', // 点检管控

        prop: 'lm_date', // 排序字段

        order: 'desc', // 排序字段

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      checkcontrArr: [

        { code: 'Y', name: '是' },

        { code: 'N', name: '否' }

      ],

      cycleArr: [

        { code: 'D', name: '日' }

      ],

      total: 10,

      tableData: [],

      tableColumnSettingsArray: [

        { minWidth: false, width: 55, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示

        { minWidth: false, width: 55, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom

        {

          minWidth: 110,

          width: false,

          prop: 'code',

          label: '标准编码',

          id: 3,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 110,

          width: false,

          prop: 'name',

          label: '标准名称',

          id: 4,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: 330,

          width: false,

          prop: 'description',

          label: '标准描述',

          id: 5,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 110,

          prop: 'iscontr',

          label: '点检管控',

          id: 6,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 110,

          prop: 'is_checkeqp',

          label: '关联设备',

          id: 7,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 110,

          prop: 'lm_user',

          label: '创建人员',

          id: 8,

          show: true,

          fixed: false,

          sortable: true

        },

        {

          minWidth: false,

          width: 160,

          prop: 'lm_date',

          label: '创建时间',

          id: 9,

          show: true,

          fixed: false,

          sortable: true

        }

      ],

      tableTimeStampKey: new Date().getTime(), // 表格key



      dialogVisible: false,

      dialogForm: {

        code: '',

        name: '',

        enable: 'Y',

        description: ''

      },

      operation: '',

      dialogFormRules: {



        code: [

          { required: true, validator: validateCode, trigger: ['blur', 'change'] }

        ],

        name: [

          { required: true, message: '请输入标准名称', trigger: ['blur', 'change'] }

        ],

        enable: [

          { required: true, message: '', trigger: ['blur', 'change'] }

        ]

      },

      tableDataDialog: [], // 表格数据

      // tableDataDialogSelected: [], // 已选code

      checkItemSelectArr: [],

      checkItemIsCancel: true,

      dialogVisibleEqp: false,



      dialogFormEqp: {

        name: '',

        code: '',

        eqpAll: [], // 车间及设备所有

        eqpArr: [], // 车间集合所有

        eqpTree: [], // 设备树形所有

        eqpCodeSelectedArr: []// 设备树形选中

      },

      defaultPropsOfEqpTree: {

        value: 'code',

        label: 'name',

        children: 'children'

      },



      title_value: '数据导入 / 点检部位',

      code: '22',

      shows: false



    }

  },

  watch: {

    shows() {

      if (!this.shows) {

        this.getDeviceCheckStandArdSearch()

      }

    }

  },

  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {

    this.handleRequest()

  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    tableColumnUpdate(val, isCopyTrue) {

      if (isCopyTrue) {

        this.tableColumnSettingsArray = val

      }

      this.tableTimeStampKey = new Date().getTime()



      this.$refs.tableDataRef.doLayout()

    },

    handleRequest() {

      this.getDeviceCheckStandArdSearch().then(res => {

        if (res.code === '200') {

          this.getDeviceCheckItemSelect()

        }

      })

    },

    async getDeviceCheckStandArdSearch() {

      const res = await DeviceCheckStandArdSearch(this.form)

      this.tableData = res.data

      this.total = res.count

      return { code: res.code }

    },

    // 排序改变时

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      this.getDeviceCheckStandArdSearch()

    },

    // 查询

    search() {

      this.getDeviceCheckStandArdSearch()

    },

    // 导入按钮

    upload() {

      this.shows = true

      this.$refs.importPickerFunc.newDataFunc()

    },

    colos() {

      this.shows = false

    },

    // 重置

    reset() {

      this.form.checkstandcode = ''

      this.form.checkstandname = ''

      this.form.checkcontr = ''

      this.getDeviceCheckStandArdSearch()

    },



    async getDeviceCheckItemSelect() {

      const { data: res } = await DeviceCheckItemSelect()

      this.checkItemSelectArr = res

    },



    // 新增按钮

    add(operation) {

      this.operation = operation

      this.dialogVisible = true

      // this.getDeviceCheckItemSelect()

      this.$nextTick(() => {

        this.$refs.tableDataDialogRef.doLayout()

      })

    },

    // 修改按钮

    edit(operation, row) {

      // this.getDeviceCheckItemSelect()

      this.operation = operation

      this.getViewDeviceCheckStanedSearch(row.code)

      this.dialogVisible = true



      this.$nextTick(() => {

        this.$refs.tableDataDialogRef.doLayout()

      })

      // this.$nextTick(() => {

      //   this.dialogForm.code = row.code

      //   this.dialogForm.name = row.name

      //   this.dialogForm.enable = row.enable

      //   this.dialogForm.description = row.description

      // })

    },

    // 修改前请求接口

    async getViewDeviceCheckStanedSearch(checkstand_code) {

      const { data: res } = await ViewDeviceCheckStanedSearch({ checkstand_code })

      this.tableDataDialog = res.Data



      this.dialogForm.code = res.code

      this.dialogForm.name = res.name

      this.dialogForm.enable = res.enable

      this.dialogForm.description = res.description



      this.tableDataDialog.forEach(item => {

        item.isVisible = 0

        item.checkitem_code = item.code

        item.checkitem_name = item.name

        item.checkitem_descr = item.chkdesc

      })



      this.checkItemSelectArr = [...this.checkItemSelectArr].filter(x => [...this.tableDataDialog].every(y => y.checkitem_code !== x.code))

    },

    // 删除按钮

    async del(row) {

      this.$confirm('是否确认删除?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        DeleteDeviceCheckStaned({ checkstand_code: row.code }).then(res => {

          if (res.code === '200') {

            this.$notify.success('删除成功!')

            if (this.form.page > 1 && this.tableData.length === 1) {

              this.form.page--

            }

            this.getDeviceCheckStandArdSearch()

          }

        })

      }).catch(() => {

        this.$notify.info('已取消删除')

      })

    },



    // 对话框关闭事件

    handleClose() {

      this.dialogForm.code = ''

      this.dialogForm.name = ''

      this.dialogForm.enable = 'Y'

      this.dialogForm.description = ''

      this.tableDataDialog = []

      this.getDeviceCheckItemSelect()

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

      if (this.tableDataDialog.length === 0) {

        return this.$message.info('设备关联点检项信息不能为空！')

      }



      this.$refs.dialogForm.validate(valid => {

        if (valid) {

          this.$store.state.app.buttonIsDisabled = true

          // this.tableDataDialog.forEach((item, index) => { // 去掉正在编辑且是空checkitem_code

          //   if (item.isVisible === 1 && item.checkitem_code === '') {

          //     this.tableDataDialog.splice(index, 1)

          //   }

          // })



          this.tableDataDialog.filter(item => item.checkitem_code !== '')



          let Data = []

          // 数组中对象相同的去重

          Data = this.tableDataDialog.filter((currentValue, currentIndex, selfArr) => {

            return selfArr.findIndex(item => item.checkitem_code === currentValue.checkitem_code) === currentIndex

          })

          Data.forEach((item, index) => {

            item.checkitem_seq = index + 1

          })



          const data = {

            'code': this.dialogForm.code,

            'name': this.dialogForm.name,

            'enable': this.dialogForm.enable,

            'description': this.dialogForm.description,

            'Data': Data

          }



          AddUpdateDeviceCheckStandArd(data, this.operation === 'add' ? 'Add' : 'Update').then(res => {

            if (res.code === '200') {

              this.dialogVisible = false

              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')

              this.getDeviceCheckStandArdSearch()

              this.$store.state.app.buttonIsDisabled = false

            } else {

              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')

            }

          })

        }

      })

    },



    selectChange(val, row) {

      const res = this.checkItemSelectArr.find(item => {

        return item.code === val || item.name === val

      })

      row.checkitem_descr = res.description

      row.checkitem_code = res.code

      row.checkitem_name = res.name

    },

    // 新增行

    addRow() {

      let flag = false

      this.tableDataDialog.forEach(item => {

        if (item.isVisible === 1) {

          // return this.$message.info('请先确认或取消上条记录！')

          flag = true

        }

      })

      if (flag) {

        return this.$message.info('请先确认或取消上条记录！')

      }

      this.tableDataDialog.push({

        checkitem_code: '',

        checkitem_name: '',

        checkitem_descr: '',

        isscan: 'Y',

        cycle: 'D',

        isVisible: 1

      })



      this.checkItemIsCancel = false

    },

    editRow(row) {

      let flag = false

      this.tableDataDialog.forEach((item, index) => {

        if (item.isVisible === 1) {

          flag = true

        }

      })

      if (flag) {

        return this.$message.info('请先确认或取消其它行！')

      }



      this.checkItemIsCancel = false

      this.checkItemSelectArr.splice(0, 0, {

        code: row.checkitem_code,

        name: row.checkitem_name,

        description: row.checkitem_descr

      })



      this.tableDataDialog.forEach((item, index) => {

        if (item.checkitem_code === row.checkitem_code) {

          this.tableDataDialog.splice(index, 1, {

            checkitem_code: row.checkitem_code,

            checkitem_name: row.checkitem_name,

            checkitem_descr: row.checkitem_descr,

            isscan: row.isscan,

            cycle: row.cycle,

            isVisible: 1

          })

        }

      })

    },

    delRow(row) {

      this.checkItemSelectArr.splice(0, 0, {

        code: row.checkitem_code,

        name: row.checkitem_name,

        description: row.checkitem_descr

      })

      this.tableDataDialog.forEach((item, index) => {

        if (item.checkitem_code === row.checkitem_code) {

          this.tableDataDialog.splice(index, 1)

        }

      })

    },

    saveRow(row) {

      if (row.checkitem_code === '' && row.checkitem_name === '') {

        return this.$message.info('点检部位不能为空！')

      }

      row.isVisible = 0

      this.checkItemSelectArr.forEach((item, index) => {

        if (item.code === row.checkitem_code) {

          this.checkItemSelectArr.splice(index, 1)

        }

      })

    },

    cancelRow(row) {

      // this.checkItemSelectArr.forEach((item, index) => {

      //   if (item.code === row.checkitem_code) {

      if (this.checkItemIsCancel) {

        this.checkItemSelectArr.splice(0, 0, {

          code: row.checkitem_code,

          name: row.checkitem_name,

          description: row.checkitem_descr

        })

      }

      this.JYIsCancel = true

      // }

      // })



      this.tableDataDialog.forEach((item, index) => {

        if (item.checkitem_code === row.checkitem_code && item.isVisible === 1) {

          row.isVisible = 0

          this.tableDataDialog.splice(index, 1)

        }

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 195

        this.$refs.tableDataRef.doLayout()

      })

    },

    tableRowClassName({ row, rowIndex }) {

      return 'custom-row'

    },

    // 关联设备

    checkeqpClick(row) {

      const loading = this.$loading({

        lock: true,

        text: '正在加载数据，请稍等...',

        spinner: 'el-icon-loading',

        customClass: 'osloading',

        background: 'rgba(0, 0, 0, 0.7)'

      })

      this.dialogFormEqp.name = row.name

      this.dialogFormEqp.code = row.code



      DeviceCheckStanedAssociationEqp({ checkstand_code: row.code }).then(res => {

        if (res.code === '200') {

          setTimeout(() => {

            loading.close()

            this.dialogFormEqp.eqpAll = res.data.filter(item => item.children.length > 0)



            if (this.dialogFormEqp.eqpAll.length > 0) {

              this.dialogFormEqp.eqpAll.forEach((item, index) => {

                this.dialogFormEqp.eqpArr.push({

                  code: item.code,

                  name: item.name,

                  type: item.type,

                  isSelected1: index === 0,

                  isSelected2: item.flag === 'Y'

                })

                if (item.flag === 'Y') {

                  this.$nextTick(() => {

                    $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显

                  })

                }

                if (item.children && item.children.length > 0) {

                  item.children.forEach(it => {

                    if (it.flag === 'Y') {

                      this.dialogFormEqp.eqpCodeSelectedArr.push(it.code)

                    }

                  })

                }

              })

              this.dialogFormEqp.eqpAll[0].name = '全部'

              this.dialogFormEqp.eqpTree = [this.dialogFormEqp.eqpAll[0]]

            }



            this.dialogVisibleEqp = true



            this.$nextTick(() => { // 树形回显

              this.$refs.epqTree.setCheckedKeys(this.dialogFormEqp.eqpCodeSelectedArr)

            })

          }, 1000)

        } else {

          loading.close()

        }

      })

    },

    // 关联设备对话框关闭

    handleCloseEqp() {

      this.$refs.epqTree.setCheckedKeys([])

      this.dialogFormEqp.code = ''

      this.dialogFormEqp.name = ''

      this.dialogFormEqp.eqpAll = []

      this.dialogFormEqp.eqpArr = []

      this.dialogFormEqp.eqpTree = []

      this.dialogFormEqp.eqpCodeSelectedArr = []

    },

    // 大盒子点击

    myCheckboxClick(val) {

      this.dialogFormEqp.eqpArr.forEach((item, index) => {

        item.isSelected1 = item.code === val.code

        if (item.code === val.code) {

          this.dialogFormEqp.eqpAll[index].name = '全部'

          this.dialogFormEqp.eqpTree = [this.dialogFormEqp.eqpAll[index]]

        }

      })

      this.$nextTick(() => { // 树形回显

        this.$refs.epqTree.setCheckedKeys(this.dialogFormEqp.eqpCodeSelectedArr)

      })

    },

    // 小盒子点击

    myCheckboxInputClick(val) {

      console.log(val)

      val.isSelected2 = !!val.isSelected2

      if (val.isSelected2) { // 从没选中到选中

        console.log('从没选中到选中')

        this.dialogFormEqp.eqpAll.forEach((item, index) => {

          if (item.code === val.code) {

            if (item.children && item.children.length > 0) {

              item.children.forEach(it => {

                this.dialogFormEqp.eqpCodeSelectedArr.push(it.code)

              })

            }

          }

        })

        console.log(this.dialogFormEqp.eqpCodeSelectedArr, 1)

        this.$nextTick(() => { // 树形回显

          this.$refs.epqTree.setCheckedKeys(this.dialogFormEqp.eqpCodeSelectedArr)

        })

      } else { // 从选中到没选中

        console.log('从选中到没选中')

        const temp = []

        this.dialogFormEqp.eqpAll.forEach((item, index) => {

          if (item.code === val.code) {

            if (item.children && item.children.length > 0) {

              item.children.forEach(it => {

                temp.push(it.code)

              })

            }

          }

        })

        this.dialogFormEqp.eqpCodeSelectedArr = [...this.dialogFormEqp.eqpCodeSelectedArr].filter(x => [...temp].every(y => y !== x))

        this.$nextTick(() => { // 树形回显

          this.$refs.epqTree.setCheckedKeys(this.dialogFormEqp.eqpCodeSelectedArr)

        })

      }

      console.log(this.dialogFormEqp.eqpCodeSelectedArr, 999)

    },

    // 树形复选框点击事件

    checkBoxClick(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {

      let checkedFatherCode = '' // 找到 checkedFatherCode  父code值

      console.log(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys })

      this.dialogFormEqp.eqpAll.forEach((item, index) => {

        if (item.code === obj.code) {

          checkedFatherCode = item.code

        }

        if (item.children && item.children.length > 0) {

          item.children.forEach((it, ind) => {

            if (it.code === obj.code) {

              checkedFatherCode = item.code

            }

          })

        }

      })

      console.log(checkedFatherCode, 1)



      // 1.第一种情况当树形   半叶 不为零   全叶 不为零

      if (halfCheckedKeys.length !== 0 && checkedKeys.length !== 0) {

        console.log('// 1.第一种情况当树形   半叶 不为零   全叶 不为零')

        this.dialogFormEqp.eqpArr.forEach((item, index) => {

          if (item.code === checkedFatherCode) {

            console.log(item.code, 777)

            this.dialogFormEqp.eqpArr[index].isSelected2 = true

            this.$nextTick(() => {

              $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显

            })

          }

        })

        this.dialogFormEqp.eqpCodeSelectedArr.forEach((item, index) => {

          if (item === obj.code) {

            this.dialogFormEqp.eqpCodeSelectedArr.splice(index, 1)

          }

        })

        checkedKeys.forEach(item => {

          this.dialogFormEqp.eqpCodeSelectedArr.push(item)

        })

        this.dialogFormEqp.eqpCodeSelectedArr = [...new Set(this.dialogFormEqp.eqpCodeSelectedArr)]

      }

      console.log(this.dialogFormEqp.eqpCodeSelectedArr, 666)

      // 2.第二种情况当树形   半叶 为零   全叶 为零

      if (halfCheckedKeys.length === 0 && checkedKeys.length === 0) {

        console.log('// 2.第二种情况当树形   半叶 为零   全叶 为零')

        const temp = []

        this.dialogFormEqp.eqpArr.forEach((item, index) => {

          if (item.code === checkedFatherCode) {

            this.dialogFormEqp.eqpArr[index].isSelected2 = false

            this.$nextTick(() => {

              $('input:checkbox').eq(index).prop('checked', false)// 自定义单选框回显

            })

          }

        })

        this.dialogFormEqp.eqpAll.forEach((item, index) => {

          if (item.code === checkedFatherCode) {

            if (item.children && item.children.length > 0) {

              item.children.forEach(it => {

                temp.push(it.code)

              })

            }

          }

        })

        this.dialogFormEqp.eqpCodeSelectedArr = [...this.dialogFormEqp.eqpCodeSelectedArr].filter(x => [...temp].every(y => y !== x))

      }



      // 3.第三种种情况当树形   半叶 为零   全叶 不为零

      if (halfCheckedKeys.length === 0 && checkedKeys.length !== 0) {

        console.log('// 3.第三种种情况当树形   半叶 为零   全叶 不为零')

        this.dialogFormEqp.eqpArr.forEach((item, index) => {

          if (item.code === checkedFatherCode) {

            this.dialogFormEqp.eqpArr[index].isSelected2 = true

            this.$nextTick(() => {

              $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显

            })

          }

        })



        this.dialogFormEqp.eqpAll.forEach((item, index) => {

          if (item.code === checkedFatherCode) {

            if (item.children && item.children.length > 0) {

              item.children.forEach(it => {

                this.dialogFormEqp.eqpCodeSelectedArr.push(it.code)

              })

            }

          }

        })

      }

    },

    // 取消事件

    eqpDialogVisibleCancel() {

      this.dialogVisibleEqp = false

    },

    // 确认事件

    eqpDialogVisibleConfirm() {

      // console.log(this.dialogFormEqp.eqpCodeSelectedArr, 888)

      // this.dialogVisibleEqp = false

      this.$store.state.app.buttonIsDisabled = true

      const data = []

      this.dialogFormEqp.eqpAll.forEach((item, index) => {

        if (item.children && item.children.length > 0) {

          item.children.forEach(it => {

            if (this.dialogFormEqp.eqpCodeSelectedArr.includes(it.code)) {

              data.push({

                name: it.name,

                code: it.code

              })

            }

          })

        }

      })



      SaveDeviceCheckStanedAssociationEqp(data, this.dialogFormEqp.code).then(res => {

        if (res.code === '200') {

          this.dialogVisibleEqp = false

          this.$notify.success('关联成功！')

          this.getDeviceCheckStandArdSearch()

          this.$store.state.app.buttonIsDisabled = false

        }

      })

    }

  }

}

</script>

<!--公共页面样式-->

<style lang="scss" scoped>

$main_color: #42b983;



.dialogVisibleEqp {

  .myCheckboxGroup {

    display: flex;

    flex-wrap: wrap;



    .myCheckbox {

      //border: 1px solid $main_color;

      border: 1px solid #eee;

      display: flex;

      min-width: 100px;

      padding: 10px;

      margin: 10px 30px 0 0;

      border-radius: 5px;

      cursor: default;

      position: relative;



      .myCheckboxInput {

        margin: 1px 5px 0 0;

        cursor: pointer;

      }



      .myCheckboxInputLabel {

        position: absolute;

        left: 29px;

        padding: 5px;

        top: 6px;

        color: transparent;



      }



    }



    //.myCheckbox{

    //  border: 1px solid $main_color;

    //}



    input[type=checkbox] {

      cursor: pointer;

      position: relative;

      width: 14px;

      height: 14px;

      font-size: 14px;

    }



    input[type=checkbox]::after {

      position: absolute;

      top: 0;

      //color: rgb(130, 35, 35);

      color: $main_color;

      width: 14px;

      height: 14px;

      display: inline-block;

      visibility: visible;

      padding-left: 0px;

      text-align: center;

      content: ' ';

      border-radius: 3px

    }



    input[type=checkbox]:checked::after {

      //content: "✓";

      content: "√";

      color: #fff;

      font-size: 12px;

      font-weight: bold;

      background-color: $main_color;

    }

  }

}



::v-deep .el-button--text {

  font-size: 14px;

  cursor: pointer;

}



.el-icon-share, .el-icon-delete, .el-icon-edit-outline {

  color: $main_color;

  cursor: pointer;

}



.el-icon-edit-outline {

  margin-right: 15px;

}



::v-deep .el-button--primary, .el-button--default, .el-button--info {

  height: 34px;

  display: flex;

  align-items: center;

  padding: 0 15px;

}



::v-deep .el-button--primary {

  //background-color: $main_color !important;

}



::v-deep .el-button--default {

  background-color: #f8f8fa;

  border: none;

}



::v-deep .el-input__inner {

  height: 34px;

  line-height: 34px;

  //color: #a7a7a7;

}



//::v-deep .el-dialog__body {

//  padding: 20px 100px !important;

//}

::v-deep .el-dialog__body {

  padding: 20px 20px !important;

}



::v-deep .dialogVisibleRoles .el-dialog__body {

  padding: 20px 20px !important;

}



::v-deep .importPickerClass .el-dialog__body {

  padding: 20px 20px !important;

}



::v-deep .el-dialog__footer {

  display: flex;

  justify-content: flex-end;

}



::v-deep .el-table .caret-wrapper {

  transform: scale(0.8);

}



::v-deep .cell {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



::v-deep .el-table::before {

  height: 0;

}



::v-deep .el-table__body-wrapper {

  background-color: #f8f8fa;

}



::v-deep .el-table__body .el-table__row.hover-row td {

  background-color: #eaecef;

}



::v-deep .el-form--inline .el-form-item__label {

  color: #a7a7a7;

}



.body ::v-deep .el-divider {

  border: 1px solid #eee;

  width: 99%;

  margin: 10px auto;

}



.body ::v-deep .el-form-item {

  margin-bottom: 0;

}



.userDialogVisible ::v-deep .el-form-item {

  margin-bottom: 0;

}



::v-deep .el-select__caret {

  display: flex;

  align-items: center;

  justify-content: center;

}



.tableFixed {

  ::v-deep .el-table__fixed-right {

    height: 100% !important;

  }



  ::v-deep .el-table__fixed {

    height: 100% !important;

  }

}

</style>

<style>

.osloading {

  font-size: 26px !important;

}



.el-loading-text {

  font-size: 26px !important;

}



.el-table .custom-row {

  background: #f8f8fa;

}

</style>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div class="bodyTopButtonGroup" style="justify-content: space-between">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button v-waves type="success" icon="el-icon-download" @click="$router.push('./../systemSetting/dataImport?fileCode=10_1')">导入</el-button>
      </div>

      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          inline
          style="display: flex;"
        >
          <div class="elForm">
            <el-form-item label="标准编码" style=" display: flex;">
              <el-input v-model="form.checkstandcode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="标准名称" style=" display: flex;">
              <el-input v-model="form.checkstandname" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="点检管控" style=" display: flex;">
              <el-select v-model="form.checkcontr" style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in checkcontrArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
          <div
            class="bodySearchReset"
            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
          >
            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
          </div>
        </el-form>

        <div
          class="bodyTopFormExpand"
        />
      </div>

      <div class="elTableDiv">
        <!--        <TableColumnSettings-->
        <!--          :list1="tableColumnSettingsArray"-->
        <!--          @tableColumnUpdate="tableColumnUpdate"-->
        <!--        />-->
        <el-table
          ref="tableDataRef"
          :key="tableTimeStampKey"
          :data="tableData"
          :height="tableHeight+'px'"
          border
          class="tableFixed"
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:tableHeight+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
          @sort-change="sortChange"
        >

          <el-table-column
            v-for="item in tableColumnSettingsArray"
            v-if="item.show"
            :key="item.id"
            :sortable="item.sortable"
            :prop="item.prop"
            :min-width="item.minWidth"
            :label="item.label"
            :width="item.width"
            show-tooltip-when-overflow
            :fixed="item.fixed?(item.fixed==='left'?'left':'right'):false"
          >
            <template slot-scope="{row}">
              <div v-if="!row[item.prop]">/</div>
              <div v-else-if="item.prop==='is_checkeqp'">
                <i
                  v-if="row[item.prop]==='Y'"
                  :style="{color:$store.state.settings.theme}"
                  class="el-icon-share"
                  @click="checkeqpClick(row)"
                />
                <i
                  v-if="row[item.prop]==='N'"
                  class="el-icon-share"
                  style="color: rgb(180 ,181, 185)"
                  @click="checkeqpClick(row)"
                />
              </div>
              <div v-else-if="item.prop==='iscontr'">
                <div v-if="row[item.prop]==='Y'">
                  <i class="el-icon-success" :style="{color:$store.state.settings.theme}" style="margin-right: 2px" />
                  是
                </div>
                <div v-if="row[item.prop]==='N'">
                  <i class="el-icon-info" style="margin-right: 2px" />
                  否
                </div>
              </div>
              <div v-else>{{ row[item.prop] }}</div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            fixed="right"
            width="120"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <i
                    :style="{color:$store.state.settings.theme}"
                    class="el-icon-edit-outline"
                    @click="edit('edit',row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i :style="{color:$store.state.settings.theme}" class="el-icon-delete" @click="del(row)" />
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <pagination
        :total="total"
        :page.sync="form.page"
        :limit.sync="form.rows"
        align="right"
        layout="total,prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getDeviceCheckStandArdSearch"
      />
    </div>

    <el-dialog
      v-el-drag-dialog
      :title="operation==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      top="8vh"
      @closed="handleClose"
    >
      <!--      @close="handleClose"-->
      <div>
        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" style="margin: -20px 10px 20px 0" />设备点检标准信息：
      </div>
      <div style="margin: 0 30px;">
        <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">
          <el-form-item label="标准编码" prop="code">
            <el-input v-model="dialogForm.code" :disabled="operation!=='add'" style="width: 200px" />
          </el-form-item>
          <el-form-item label="标准名称" prop="name">
            <el-input v-model="dialogForm.name" style="width: 200px" />
          </el-form-item>
          <el-form-item required label="点检管控">
            <el-select
              v-model="dialogForm.enable"
              style="width: 200px"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in checkcontrArr"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="标准描述" prop="description">
            <el-input v-model="dialogForm.description" type="textarea" style="width: 200px" />
          </el-form-item>
        </el-form>
      </div>
      <div>
        <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" style="margin: -20px 10px 20px 0" />设备关联点检项信息：
      </div>
      <div style="margin-bottom:10px">
        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="addRow">新增</el-button>
      </div>
      <div class="elTableDiv">
        <el-table
          ref="tableDataDialogRef"
          :data="tableDataDialog"
          :height="(tableHeight-300)+'px'"
          border
          :row-class-name="tableRowClassName"
          :style="{width: 100+'%',height:(tableHeight-300)+'px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
          />
          <el-table-column
            prop="checkitem_code"
            label="点检部位编码"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
              <div v-if="row.isVisible===0">{{ row.checkitem_code }}</div>
              <el-select
                v-if="row.isVisible===1"
                v-model="row.checkitem_code"
                placeholder="请选择"
                @change="val=>selectChange(val,row)"
              >
                <el-option
                  v-for="item in checkItemSelectArr"
                  :key="item.name"
                  :label="item.code"
                  :value="item.name"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="checkitem_name"
            label="点检部位名称"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
              <div v-if="row.isVisible===0">{{ row.checkitem_name }}</div>
              <el-select
                v-if="row.isVisible===1"
                v-model="row.checkitem_code"
                placeholder="请选择"
                @change="val=>selectChange(val,row)"
              >
                <el-option
                  v-for="item in checkItemSelectArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            prop="checkitem_descr"
            label="点检要求"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
              <div v-if="row.isVisible===0">{{ row.checkitem_descr }}</div>
              <el-input v-else v-model="row.checkitem_descr" />
            </template>
          </el-table-column>
          <el-table-column
            prop="isscan"
            label="选择扫码"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
              <div v-if="row.isVisible===0">{{ row.isscan === 'Y' ? '是' : '否' }}</div>
              <el-select
                v-if="row.isVisible===1"
                v-model="row.isscan"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in checkcontrArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="cycle"
            label="点检周期"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
              <div v-if="row.isVisible===0">{{ row.cycle === 'D' ? '日' : '' }}</div>
              <el-select
                v-if="row.isVisible===1"
                v-model="row.cycle"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in cycleArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <div class="operationClass">
                <el-button v-if="row.isVisible===0" v-waves type="text" @click="editRow(row)">编辑</el-button>
                <el-button v-if="row.isVisible===0" v-waves type="text" @click="delRow(row)">删除</el-button>

                <el-button v-if="row.isVisible===1" v-waves type="text" @click="saveRow(row)">确认</el-button>
                <el-button v-if="row.isVisible===1" v-waves type="text" @click="cancelRow(row)">取消</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="dialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <!--    关联设备-->
    <el-dialog
      v-el-drag-dialog
      title="关联设备"
      :visible.sync="dialogVisibleEqp"
      width="800px"
      top="10vh"
      :close-on-click-modal="false"
      class="dialogVisibleEqp"
      @closed="handleCloseEqp"
      @close="handleCloseEqp"
    >
      <!--      @opened="handleOpenedRoles"-->

      <div>
        <i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" /> 标准名称：{{ dialogFormEqp.name }}
      </div>
      <el-divider />
      <div>
        <div style="margin-bottom:20px">
          <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 设备所属车间集合：
        </div>
        <div class="myCheckboxGroup">

          <div
            v-for="item in dialogFormEqp.eqpArr"
            :key="item.code"
            :style="{border:item.isSelected1?'1px solid '+$store.state.settings.theme:'1px solid #eee'}"
            class="myCheckbox"
            @click="myCheckboxClick(item)"
          >
            <!--            <input-->
            <!--              class="myCheckboxInput"-->
            <!--              type="checkbox"-->
            <!--              :value="item.code"-->
            <!--              :name="item.name"-->
            <!--              :style="{color:item.isSelected2?'#42b983':'#fff'}"-->
            <!--              @click="myCheckboxInputClick(item)"-->
            <!--            >{{ item.name }}-->
            <!--            父子点击事件不影响-->
            <!--            onClick="event.cancelBubble = true"-->

            <el-checkbox
              :key="item.code"
              v-model="item.isSelected2"
              class="myCheckboxInput"
              :value="item.code"
              :name="item.name"
              :checked="item.isSelected2"
              :label="item.name"
              @change="myCheckboxInputClick(item)"
            />
            <div class="myCheckboxInputLabel">{{ item.name }}</div>

          </div>
        </div>
      </div>
      <el-divider />
      <div>
        <div style="margin-bottom:20px">
          <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 设备信息：
        </div>
        <el-tree
          ref="epqTree"
          :data="dialogFormEqp.eqpTree"
          show-checkbox
          node-key="code"
          default-expand-all
          style="height: 320px;overflow: auto"
          :props="defaultPropsOfEqpTree"
          @check="checkBoxClick"
        />
        <!--        @check-change="checkChange"-->

      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="eqpDialogVisibleCancel">取 消</el-button>
          <el-button
            v-waves
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="eqpDialogVisibleConfirm"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  AddUpdateDeviceCheckStandArd, DeleteDeviceCheckStaned,
  DeviceCheckItemSelect,
  DeviceCheckStandArdSearch, DeviceCheckStanedAssociationEqp, SaveDeviceCheckStanedAssociationEqp,
  ViewDeviceCheckStanedSearch
} from '@/api/DeviceManager'
import $ from 'jquery'
import { validateCode } from '@/utils/global'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import TableColumnSettings from '@/components/TableColumnSettings'

export default {
  name: 'CheckStandard',
  components: {
    Pagination, TableColumnSettings
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        checkstandcode: '', // 标准编码
        checkstandname: '', // 标准名称
        checkcontr: '', // 点检管控
        prop: 'lm_date', // 排序字段
        order: 'desc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      checkcontrArr: [
        { code: 'Y', name: '是' },
        { code: 'N', name: '否' }
      ],
      cycleArr: [
        { code: 'D', name: '日' }
      ],
      total: 10,
      tableData: [],
      tableColumnSettingsArray: [
        { minWidth: false, width: 55, prop: 'id', label: 'id', id: 1, show: false, fixed: false, sortable: false }, // 隐藏列  show: false隐藏，true显示
        { minWidth: false, width: 55, prop: 'rowNum', label: '序号', id: 2, show: true, fixed: 'left', sortable: false }, // custom
        {
          minWidth: 110,
          width: false,
          prop: 'code',
          label: '标准编码',
          id: 3,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 110,
          width: false,
          prop: 'name',
          label: '标准名称',
          id: 4,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: 330,
          width: false,
          prop: 'description',
          label: '标准描述',
          id: 5,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 110,
          prop: 'iscontr',
          label: '点检管控',
          id: 6,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 110,
          prop: 'is_checkeqp',
          label: '关联设备',
          id: 7,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 110,
          prop: 'lm_user',
          label: '创建人员',
          id: 8,
          show: true,
          fixed: false,
          sortable: true
        },
        {
          minWidth: false,
          width: 160,
          prop: 'lm_date',
          label: '创建时间',
          id: 9,
          show: true,
          fixed: false,
          sortable: true
        }
      ],
      tableTimeStampKey: new Date().getTime(), // 表格key

      dialogVisible: false,
      dialogForm: {
        code: '',
        name: '',
        enable: 'Y',
        description: ''
      },
      operation: '',
      dialogFormRules: {

        code: [
          { required: true, validator: validateCode, trigger: ['blur', 'change'] }
        ],
        name: [
          { required: true, message: '请输入标准名称', trigger: ['blur', 'change'] }
        ],
        enable: [
          { required: true, message: '', trigger: ['blur', 'change'] }
        ]
      },
      tableDataDialog: [], // 表格数据
      // tableDataDialogSelected: [], // 已选code
      checkItemSelectArr: [],
      checkItemIsCancel: true,
      dialogVisibleEqp: false,

      dialogFormEqp: {
        name: '',
        code: '',
        eqpAll: [], // 车间及设备所有
        eqpArr: [], // 车间集合所有
        eqpTree: [], // 设备树形所有
        eqpCodeSelectedArr: []// 设备树形选中
      },
      defaultPropsOfEqpTree: {
        value: 'code',
        label: 'name',
        children: 'children'
      },

      title_value: '数据导入 / 点检部位',
      code: '22',
      shows: false

    }
  },
  watch: {
    shows() {
      if (!this.shows) {
        this.getDeviceCheckStandArdSearch()
      }
    }
  },
  activated() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.handleRequest()
  },
  created() {
    this.handleRequest()
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    tableColumnUpdate(val, isCopyTrue) {
      if (isCopyTrue) {
        this.tableColumnSettingsArray = val
      }
      this.tableTimeStampKey = new Date().getTime()

      this.$refs.tableDataRef.doLayout()
    },
    handleRequest() {
      this.getDeviceCheckStandArdSearch().then(res => {
        if (res.code === '200') {
          this.getDeviceCheckItemSelect()
        }
      })
    },
    async getDeviceCheckStandArdSearch() {
      const res = await DeviceCheckStandArdSearch(this.form)
      this.tableData = res.data
      this.total = res.count
      return { code: res.code }
    },
    // 排序改变时
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      this.getDeviceCheckStandArdSearch()
    },
    // 查询
    search() {
      this.getDeviceCheckStandArdSearch()
    },
    // 导入按钮
    upload() {
      this.shows = true
      this.$refs.importPickerFunc.newDataFunc()
    },
    colos() {
      this.shows = false
    },
    // 重置
    reset() {
      this.form.checkstandcode = ''
      this.form.checkstandname = ''
      this.form.checkcontr = ''
      this.getDeviceCheckStandArdSearch()
    },

    async getDeviceCheckItemSelect() {
      const { data: res } = await DeviceCheckItemSelect()
      this.checkItemSelectArr = res
    },

    // 新增按钮
    add(operation) {
      this.operation = operation
      this.dialogVisible = true
      // this.getDeviceCheckItemSelect()
      this.$nextTick(() => {
        this.$refs.tableDataDialogRef.doLayout()
      })
    },
    // 修改按钮
    edit(operation, row) {
      // this.getDeviceCheckItemSelect()
      this.operation = operation
      this.getViewDeviceCheckStanedSearch(row.code)
      this.dialogVisible = true

      this.$nextTick(() => {
        this.$refs.tableDataDialogRef.doLayout()
      })
      // this.$nextTick(() => {
      //   this.dialogForm.code = row.code
      //   this.dialogForm.name = row.name
      //   this.dialogForm.enable = row.enable
      //   this.dialogForm.description = row.description
      // })
    },
    // 修改前请求接口
    async getViewDeviceCheckStanedSearch(checkstand_code) {
      const { data: res } = await ViewDeviceCheckStanedSearch({ checkstand_code })
      this.tableDataDialog = res.Data

      this.dialogForm.code = res.code
      this.dialogForm.name = res.name
      this.dialogForm.enable = res.enable
      this.dialogForm.description = res.description

      this.tableDataDialog.forEach(item => {
        item.isVisible = 0
        item.checkitem_code = item.code
        item.checkitem_name = item.name
        item.checkitem_descr = item.chkdesc
      })

      this.checkItemSelectArr = [...this.checkItemSelectArr].filter(x => [...this.tableDataDialog].every(y => y.checkitem_code !== x.code))
    },
    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteDeviceCheckStaned({ checkstand_code: row.code }).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }
            this.getDeviceCheckStandArdSearch()
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },

    // 对话框关闭事件
    handleClose() {
      this.dialogForm.code = ''
      this.dialogForm.name = ''
      this.dialogForm.enable = 'Y'
      this.dialogForm.description = ''
      this.tableDataDialog = []
      this.getDeviceCheckItemSelect()
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      if (this.tableDataDialog.length === 0) {
        return this.$message.info('设备关联点检项信息不能为空！')
      }

      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.$store.state.app.buttonIsDisabled = true
          // this.tableDataDialog.forEach((item, index) => { // 去掉正在编辑且是空checkitem_code
          //   if (item.isVisible === 1 && item.checkitem_code === '') {
          //     this.tableDataDialog.splice(index, 1)
          //   }
          // })

          this.tableDataDialog.filter(item => item.checkitem_code !== '')

          let Data = []
          // 数组中对象相同的去重
          Data = this.tableDataDialog.filter((currentValue, currentIndex, selfArr) => {
            return selfArr.findIndex(item => item.checkitem_code === currentValue.checkitem_code) === currentIndex
          })
          Data.forEach((item, index) => {
            item.checkitem_seq = index + 1
          })

          const data = {
            'code': this.dialogForm.code,
            'name': this.dialogForm.name,
            'enable': this.dialogForm.enable,
            'description': this.dialogForm.description,
            'Data': Data
          }

          AddUpdateDeviceCheckStandArd(data, this.operation === 'add' ? 'Add' : 'Update').then(res => {
            if (res.code === '200') {
              this.dialogVisible = false
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.getDeviceCheckStandArdSearch()
              this.$store.state.app.buttonIsDisabled = false
            } else {
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },

    selectChange(val, row) {
      const res = this.checkItemSelectArr.find(item => {
        return item.code === val || item.name === val
      })
      row.checkitem_descr = res.description
      row.checkitem_code = res.code
      row.checkitem_name = res.name
    },
    // 新增行
    addRow() {
      let flag = false
      this.tableDataDialog.forEach(item => {
        if (item.isVisible === 1) {
          // return this.$message.info('请先确认或取消上条记录！')
          flag = true
        }
      })
      if (flag) {
        return this.$message.info('请先确认或取消上条记录！')
      }
      this.tableDataDialog.push({
        checkitem_code: '',
        checkitem_name: '',
        checkitem_descr: '',
        isscan: 'Y',
        cycle: 'D',
        isVisible: 1
      })

      this.checkItemIsCancel = false
    },
    editRow(row) {
      let flag = false
      this.tableDataDialog.forEach((item, index) => {
        if (item.isVisible === 1) {
          flag = true
        }
      })
      if (flag) {
        return this.$message.info('请先确认或取消其它行！')
      }

      this.checkItemIsCancel = false
      this.checkItemSelectArr.splice(0, 0, {
        code: row.checkitem_code,
        name: row.checkitem_name,
        description: row.checkitem_descr
      })

      this.tableDataDialog.forEach((item, index) => {
        if (item.checkitem_code === row.checkitem_code) {
          this.tableDataDialog.splice(index, 1, {
            checkitem_code: row.checkitem_code,
            checkitem_name: row.checkitem_name,
            checkitem_descr: row.checkitem_descr,
            isscan: row.isscan,
            cycle: row.cycle,
            isVisible: 1
          })
        }
      })
    },
    delRow(row) {
      this.checkItemSelectArr.splice(0, 0, {
        code: row.checkitem_code,
        name: row.checkitem_name,
        description: row.checkitem_descr
      })
      this.tableDataDialog.forEach((item, index) => {
        if (item.checkitem_code === row.checkitem_code) {
          this.tableDataDialog.splice(index, 1)
        }
      })
    },
    saveRow(row) {
      if (row.checkitem_code === '' && row.checkitem_name === '') {
        return this.$message.info('点检部位不能为空！')
      }
      row.isVisible = 0
      this.checkItemSelectArr.forEach((item, index) => {
        if (item.code === row.checkitem_code) {
          this.checkItemSelectArr.splice(index, 1)
        }
      })
    },
    cancelRow(row) {
      // this.checkItemSelectArr.forEach((item, index) => {
      //   if (item.code === row.checkitem_code) {
      if (this.checkItemIsCancel) {
        this.checkItemSelectArr.splice(0, 0, {
          code: row.checkitem_code,
          name: row.checkitem_name,
          description: row.checkitem_descr
        })
      }
      this.JYIsCancel = true
      // }
      // })

      this.tableDataDialog.forEach((item, index) => {
        if (item.checkitem_code === row.checkitem_code && item.isVisible === 1) {
          row.isVisible = 0
          this.tableDataDialog.splice(index, 1)
        }
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 195
        this.$refs.tableDataRef.doLayout()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      return 'custom-row'
    },
    // 关联设备
    checkeqpClick(row) {
      const loading = this.$loading({
        lock: true,
        text: '正在加载数据，请稍等...',
        spinner: 'el-icon-loading',
        customClass: 'osloading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.dialogFormEqp.name = row.name
      this.dialogFormEqp.code = row.code

      DeviceCheckStanedAssociationEqp({ checkstand_code: row.code }).then(res => {
        if (res.code === '200') {
          setTimeout(() => {
            loading.close()
            this.dialogFormEqp.eqpAll = res.data.filter(item => item.children.length > 0)

            if (this.dialogFormEqp.eqpAll.length > 0) {
              this.dialogFormEqp.eqpAll.forEach((item, index) => {
                this.dialogFormEqp.eqpArr.push({
                  code: item.code,
                  name: item.name,
                  type: item.type,
                  isSelected1: index === 0,
                  isSelected2: item.flag === 'Y'
                })
                if (item.flag === 'Y') {
                  this.$nextTick(() => {
                    $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显
                  })
                }
                if (item.children && item.children.length > 0) {
                  item.children.forEach(it => {
                    if (it.flag === 'Y') {
                      this.dialogFormEqp.eqpCodeSelectedArr.push(it.code)
                    }
                  })
                }
              })
              this.dialogFormEqp.eqpAll[0].name = '全部'
              this.dialogFormEqp.eqpTree = [this.dialogFormEqp.eqpAll[0]]
            }

            this.dialogVisibleEqp = true

            this.$nextTick(() => { // 树形回显
              this.$refs.epqTree.setCheckedKeys(this.dialogFormEqp.eqpCodeSelectedArr)
            })
          }, 1000)
        } else {
          loading.close()
        }
      })
    },
    // 关联设备对话框关闭
    handleCloseEqp() {
      this.$refs.epqTree.setCheckedKeys([])
      this.dialogFormEqp.code = ''
      this.dialogFormEqp.name = ''
      this.dialogFormEqp.eqpAll = []
      this.dialogFormEqp.eqpArr = []
      this.dialogFormEqp.eqpTree = []
      this.dialogFormEqp.eqpCodeSelectedArr = []
    },
    // 大盒子点击
    myCheckboxClick(val) {
      this.dialogFormEqp.eqpArr.forEach((item, index) => {
        item.isSelected1 = item.code === val.code
        if (item.code === val.code) {
          this.dialogFormEqp.eqpAll[index].name = '全部'
          this.dialogFormEqp.eqpTree = [this.dialogFormEqp.eqpAll[index]]
        }
      })
      this.$nextTick(() => { // 树形回显
        this.$refs.epqTree.setCheckedKeys(this.dialogFormEqp.eqpCodeSelectedArr)
      })
    },
    // 小盒子点击
    myCheckboxInputClick(val) {
      console.log(val)
      val.isSelected2 = !!val.isSelected2
      if (val.isSelected2) { // 从没选中到选中
        console.log('从没选中到选中')
        this.dialogFormEqp.eqpAll.forEach((item, index) => {
          if (item.code === val.code) {
            if (item.children && item.children.length > 0) {
              item.children.forEach(it => {
                this.dialogFormEqp.eqpCodeSelectedArr.push(it.code)
              })
            }
          }
        })
        console.log(this.dialogFormEqp.eqpCodeSelectedArr, 1)
        this.$nextTick(() => { // 树形回显
          this.$refs.epqTree.setCheckedKeys(this.dialogFormEqp.eqpCodeSelectedArr)
        })
      } else { // 从选中到没选中
        console.log('从选中到没选中')
        const temp = []
        this.dialogFormEqp.eqpAll.forEach((item, index) => {
          if (item.code === val.code) {
            if (item.children && item.children.length > 0) {
              item.children.forEach(it => {
                temp.push(it.code)
              })
            }
          }
        })
        this.dialogFormEqp.eqpCodeSelectedArr = [...this.dialogFormEqp.eqpCodeSelectedArr].filter(x => [...temp].every(y => y !== x))
        this.$nextTick(() => { // 树形回显
          this.$refs.epqTree.setCheckedKeys(this.dialogFormEqp.eqpCodeSelectedArr)
        })
      }
      console.log(this.dialogFormEqp.eqpCodeSelectedArr, 999)
    },
    // 树形复选框点击事件
    checkBoxClick(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
      let checkedFatherCode = '' // 找到 checkedFatherCode  父code值
      console.log(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys })
      this.dialogFormEqp.eqpAll.forEach((item, index) => {
        if (item.code === obj.code) {
          checkedFatherCode = item.code
        }
        if (item.children && item.children.length > 0) {
          item.children.forEach((it, ind) => {
            if (it.code === obj.code) {
              checkedFatherCode = item.code
            }
          })
        }
      })
      console.log(checkedFatherCode, 1)

      // 1.第一种情况当树形   半叶 不为零   全叶 不为零
      if (halfCheckedKeys.length !== 0 && checkedKeys.length !== 0) {
        console.log('// 1.第一种情况当树形   半叶 不为零   全叶 不为零')
        this.dialogFormEqp.eqpArr.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            console.log(item.code, 777)
            this.dialogFormEqp.eqpArr[index].isSelected2 = true
            this.$nextTick(() => {
              $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显
            })
          }
        })
        this.dialogFormEqp.eqpCodeSelectedArr.forEach((item, index) => {
          if (item === obj.code) {
            this.dialogFormEqp.eqpCodeSelectedArr.splice(index, 1)
          }
        })
        checkedKeys.forEach(item => {
          this.dialogFormEqp.eqpCodeSelectedArr.push(item)
        })
        this.dialogFormEqp.eqpCodeSelectedArr = [...new Set(this.dialogFormEqp.eqpCodeSelectedArr)]
      }
      console.log(this.dialogFormEqp.eqpCodeSelectedArr, 666)
      // 2.第二种情况当树形   半叶 为零   全叶 为零
      if (halfCheckedKeys.length === 0 && checkedKeys.length === 0) {
        console.log('// 2.第二种情况当树形   半叶 为零   全叶 为零')
        const temp = []
        this.dialogFormEqp.eqpArr.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            this.dialogFormEqp.eqpArr[index].isSelected2 = false
            this.$nextTick(() => {
              $('input:checkbox').eq(index).prop('checked', false)// 自定义单选框回显
            })
          }
        })
        this.dialogFormEqp.eqpAll.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            if (item.children && item.children.length > 0) {
              item.children.forEach(it => {
                temp.push(it.code)
              })
            }
          }
        })
        this.dialogFormEqp.eqpCodeSelectedArr = [...this.dialogFormEqp.eqpCodeSelectedArr].filter(x => [...temp].every(y => y !== x))
      }

      // 3.第三种种情况当树形   半叶 为零   全叶 不为零
      if (halfCheckedKeys.length === 0 && checkedKeys.length !== 0) {
        console.log('// 3.第三种种情况当树形   半叶 为零   全叶 不为零')
        this.dialogFormEqp.eqpArr.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            this.dialogFormEqp.eqpArr[index].isSelected2 = true
            this.$nextTick(() => {
              $('input:checkbox').eq(index).prop('checked', true)// 自定义单选框回显
            })
          }
        })

        this.dialogFormEqp.eqpAll.forEach((item, index) => {
          if (item.code === checkedFatherCode) {
            if (item.children && item.children.length > 0) {
              item.children.forEach(it => {
                this.dialogFormEqp.eqpCodeSelectedArr.push(it.code)
              })
            }
          }
        })
      }
    },
    // 取消事件
    eqpDialogVisibleCancel() {
      this.dialogVisibleEqp = false
    },
    // 确认事件
    eqpDialogVisibleConfirm() {
      // console.log(this.dialogFormEqp.eqpCodeSelectedArr, 888)
      // this.dialogVisibleEqp = false
      this.$store.state.app.buttonIsDisabled = true
      const data = []
      this.dialogFormEqp.eqpAll.forEach((item, index) => {
        if (item.children && item.children.length > 0) {
          item.children.forEach(it => {
            if (this.dialogFormEqp.eqpCodeSelectedArr.includes(it.code)) {
              data.push({
                name: it.name,
                code: it.code
              })
            }
          })
        }
      })

      SaveDeviceCheckStanedAssociationEqp(data, this.dialogFormEqp.code).then(res => {
        if (res.code === '200') {
          this.dialogVisibleEqp = false
          this.$notify.success('关联成功！')
          this.getDeviceCheckStandArdSearch()
          this.$store.state.app.buttonIsDisabled = false
        }
      })
    }
  }
}
</script>
<!--公共页面样式-->
<style lang="scss" scoped>
$main_color: #42b983;

.dialogVisibleEqp {
  .myCheckboxGroup {
    display: flex;
    flex-wrap: wrap;

    .myCheckbox {
      //border: 1px solid $main_color;
      border: 1px solid #eee;
      display: flex;
      min-width: 100px;
      padding: 10px;
      margin: 10px 30px 0 0;
      border-radius: 5px;
      cursor: default;
      position: relative;

      .myCheckboxInput {
        margin: 1px 5px 0 0;
        cursor: pointer;
      }

      .myCheckboxInputLabel {
        position: absolute;
        left: 29px;
        padding: 5px;
        top: 6px;
        color: transparent;

      }

    }

    //.myCheckbox{
    //  border: 1px solid $main_color;
    //}

    input[type=checkbox] {
      cursor: pointer;
      position: relative;
      width: 14px;
      height: 14px;
      font-size: 14px;
    }

    input[type=checkbox]::after {
      position: absolute;
      top: 0;
      //color: rgb(130, 35, 35);
      color: $main_color;
      width: 14px;
      height: 14px;
      display: inline-block;
      visibility: visible;
      padding-left: 0px;
      text-align: center;
      content: ' ';
      border-radius: 3px
    }

    input[type=checkbox]:checked::after {
      //content: "✓";
      content: "√";
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      background-color: $main_color;
    }
  }
}

::v-deep .el-button--text {
  font-size: 14px;
  cursor: pointer;
}

.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
  color: $main_color;
  cursor: pointer;
}

.el-icon-edit-outline {
  margin-right: 15px;
}

::v-deep .el-button--primary, .el-button--default, .el-button--info {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

::v-deep .el-button--primary {
  //background-color: $main_color !important;
}

::v-deep .el-button--default {
  background-color: #f8f8fa;
  border: none;
}

::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
  //color: #a7a7a7;
}

//::v-deep .el-dialog__body {
//  padding: 20px 100px !important;
//}
::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .dialogVisibleRoles .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .importPickerClass .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-table .caret-wrapper {
  transform: scale(0.8);
}

::v-deep .cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-table::before {
  height: 0;
}

::v-deep .el-table__body-wrapper {
  background-color: #f8f8fa;
}

::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #eaecef;
}

::v-deep .el-form--inline .el-form-item__label {
  color: #a7a7a7;
}

.body ::v-deep .el-divider {
  border: 1px solid #eee;
  width: 99%;
  margin: 10px auto;
}

.body ::v-deep .el-form-item {
  margin-bottom: 0;
}

.userDialogVisible ::v-deep .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-select__caret {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tableFixed {
  ::v-deep .el-table__fixed-right {
    height: 100% !important;
  }

  ::v-deep .el-table__fixed {
    height: 100% !important;
  }
}
</style>
<style>
.osloading {
  font-size: 26px !important;
}

.el-loading-text {
  font-size: 26px !important;
}

.el-table .custom-row {
  background: #f8f8fa;
}
</style>

在上述文件截断后对比
src/views/deviceManager/deviceList.vue
src/views/deviceManager/maintainPosition.vue
src/views/deviceManager/maintainRecord.vue
src/views/deviceManager/maintainStandard.vue
src/views/deviceManager/repairRecord.vue
src/views/materialManager/inventoryList.vue
src/views/materialManager/unitList.vue
src/views/mouldManager/mouldCheck.vue
src/views/mouldManager/mouldCheckRecord.vue
src/views/mouldManager/mouldCheckStand.vue
src/views/mouldManager/mouldCirculateRecord.vue
src/views/mouldManager/mouldList.vue
src/views/mouldManager/mouldMaintain.vue
src/views/mouldManager/mouldMaintainRecord.vue
src/views/mouldManager/mouldMaintainStand.vue
src/views/mouldManager/mouldOutInRecord.vue
src/views/mouldManager/mouldRepairRecord.vue
src/views/mouldManager/mouldUpDownRecord.vue
src/views/produce/reportCorrect.vue
src/views/produce/reportVerify.vue
src/views/produce/stepReport.vue
src/views/qualityManager/defectDefine.vue
src/views/qualityManager/processCheck.vue
src/views/qualityManager/processCheckItem.vue
src/views/qualityManager/processCheckRecord.vue
src/views/qualityManager/qualityPlaning.vue
src/views/sopManager/sopDevice.vue
src/views/sopManager/sopRoute.vue
src/views/sopManager/sopWorkOrder.vue
src/views/statistic/defectDetailList.vue
src/views/statistic/groupSalaryList.vue
src/views/statistic/installationLampList.vue
src/views/statistic/personSalaryList.vue
src/views/statistic/repairDetailList.vue
src/views/statistic/subcontractingOperation.vue
src/views/statistic/workOrderProcess.vue
src/views/systemSetting/encodingRules.vue
src/views/systemSetting/processSetting.vue
src/views/workOrder/produceOrderList.vue
src/views/workOrder/workOrderClose.vue
src/views/workOrder/workOrderList.vue
src/views/workOrder/workOrderSend.vue
vue.config.js