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

小小儁爺

2024-12-30 ff2f7d7bad0132c130c305364a863ff446e926b2

 src/views/materialManager/unitList.vue

@@ -1,689 +1,694 @@
<template>

  <div>

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

      <div style="display: flex">

        <!--        background:rgba(248,248,250,1);-->

        <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">-->

            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" />-->

            <!--            </div>-->



          </div>



          <el-tree

            ref="treeLeftRef"

            key="treeLeftKey"

            style="padding: 10px;overflow: auto;"

            :style="{height:(tableHeight+150)+'px'}"

            :data="treeLeft"

            node-key="code"

            highlight-current

            :props="defaultPropsLeft"

            :default-expand-all="true"

            :expand-on-click-node="false"

            @node-click="nodeClick"

          />



        </div>



        <div style="width: calc(100% - 300px)">

          <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="info" icon="el-icon-refresh" @click="getSaveSearchUnit">同步计量单位</el-button>

          </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-column

                prop="rowNum"

                width="50"

                fixed

                label="序号"

              />

              <el-table-column

                prop="code"

                label="计量单位编码"

                sortable="custom"

              >

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

                  {{ row.isGroup === '0' ? row.code :(!isMainUnitHidden?row.code:'') }}

                </template>

              </el-table-column>

              <el-table-column

                prop="name"

                label="计量单位名称"

                sortable="custom"

              />

              <el-table-column

                v-if="!isMainUnitHidden"

                prop="isMainUnit"

                label="主计量"

                sortable="custom"

              >

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

                  {{ row.isMainUnit === '1' ? '是' : '否' }}

                </template>

              </el-table-column>

              <el-table-column

                v-if="!isMainUnitHidden"

                prop="changeRate"

                label="换算率"

                sortable="custom"

              />



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

              <!--                prop="data_sources"-->

              <!--                label="数据来源"-->

              <!--                sortable="custom"-->

              <!--              />-->

              <el-table-column

                prop="lm_user"

                label="创建人员"

                sortable="custom"

              />

              <el-table-column

                prop="lm_date"

                label="创建时间"

                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="getTUnitData"

          />

        </div>



      </div>



    </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="120px"

        style="display: flex;justify-content: space-between;align-content: flex-end"

      >



        <el-form-item :label="dialogForm.tunittype==='S'? '计量单位名称':'计量单位组名称'" prop="unitname">

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

        </el-form-item>



        <el-form-item v-if="dialogForm.tunittype==='M'">

          <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="tableDataDialogAdd">新增行

          </el-button>

        </el-form-item>



      </el-form>



      <div v-if="dialogForm.tunittype==='M'">

        <el-table

          ref="tableDataDialogRef"

          class="tableFixed"

          :data="tableDataDialog"

          row-class-name="custom-row"

          height="400"

          border

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

          highlight-current-row

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

          :cell-style="this.$cellStyle"

        >



          <el-table-column

            type="index"

            width="50"

            fixed

            label="序号"

          />

          <el-table-column

            prop="unitname"

            label="计量单位名称"

          >

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

              <el-input

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

                v-model="row.unitname"

                placeholder="请输入"

              />

              <div v-else> {{ row.unitname }}</div>

            </template>



          </el-table-column>

          <el-table-column



            label="主计量"

            prop="checkboxSelected"

          >

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



              <el-select

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

                v-model="row.checkboxSelected"

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

                :disabled="row.checkboxSelected==='1'"

                placeholder="请选择"

                filterable

                @change="val=>checkboxSelectedChange(val,row)"

              >

                <el-option

                  v-for="item in checkboxSelectedArr"

                  :key="item.code"

                  :label="item.name"

                  :value="item.code"

                />

              </el-select>

              <div v-else> {{ row.checkboxSelected === '1' ? '是' : '否' }}</div>

            </template>

          </el-table-column>



          <el-table-column

            prop="changeRate"

            label="换算率"

          >

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

              <el-input

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

                v-model="row.changeRate"

                :disabled="row.checkboxSelected==='1'"

                placeholder="请输入"

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

              />

              <div v-else> {{ row.changeRate }}</div>

            </template>

          </el-table-column>

          <el-table-column

            prop="rateDescription"

            label="换算说明"

          />

          <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.isVisible===0&&tableDataDialog.filter(i=>i.isVisible===1).length===0"

                    class="el-icon-edit-outline"

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

                    @click="tableDataDialogEdit(row)"

                  />

                </el-tooltip>

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

                  <i

                    v-if="row.isVisible===0&&tableDataDialog.filter(i=>i.isVisible===1).length===0"

                    class="el-icon-delete"

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

                    @click="tableDataDialogDel(row)"

                  />

                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="保存" placement="top">

                  <i

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

                    class="el-icon-circle-check"

                    style="cursor:pointer;"

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

                    @click="tableDataDialogSave(row)"

                  />

                </el-tooltip>

              </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>



  </div>

</template>



<script>

import Pagination from '@/components/Pagination'

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

import waves from '@/directive/waves'

import { SaveSearchUnit } from '@/api/ErpSyncMes'

import { AddUpdateTUnit, DeleteTUnit, TUnitData, TUnitGroup, TUnitGroupProject } from '@/api/ProductModel'



export default {

  name: 'UnitList',

  components: {

    Pagination

  },

  directives: { elDragDialog, waves },

  data() {

    return {

      // mouseHoverType: 'mouseout',

      isExpandForm: false,

      mainHeight: 0,

      tableHeight: 0,

      form: {

        tunittype: '', // 单计量(S) 多计量(M)

        tunitgroupcode: '', // 计量单位组编码

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

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

        page: 1, // 第几页

        rows: 20 // 每页多少条

      },

      total: 10,

      tableData: [],

      dialogVisible: false,

      dialogForm: {

        tunittype: '', // 单计量(S) 多计量(M)

        tunitgroupcode: '', // 计量单位组编码

        unitcode: '',

        unitname: '',

        data_sources: 'MES'

      },

      operation: '',

      dialogFormRules: {

        unitname: [

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

        ]

      },



      defaultPropsLeft: {

        children: 'children',

        label: 'name'

      },

      treeLeft: [],



      tableDataDialog: [],



      checkboxSelectedArr: [

        { code: '0', name: '否' },

        { code: '1', name: '是' }

      ],



      isMainUnitHidden: true



    }

  },

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



  },

  mounted() {

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

    this.getHeight()

    this.handleGetApi('')

  },

  methods: {

    async handleGetApi(code) {

      await this.getTUnitGroup(code)

      await this.getTUnitData()

    },

    async getSaveSearchUnit() {

      const res = await SaveSearchUnit()

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

        await this.handleGetApi(this.$refs.treeLeftRef.getCurrentKey())

        this.$notify.success('计量单位同步成功！')

      }

    },

    async getTUnitGroup(code) {

      const { data: res } = await TUnitGroup()



      this.treeLeft = [

        {

          code: '', name: '全部', children: [

            { code: 'S', name: '单计量' },

            { code: 'M', name: '多计量', children: res }

          ]

        }

      ]

      this.$nextTick(() => {

        this.$refs.treeLeftRef.setCurrentKey(code)

      })

    },

    async getTUnitData() {

      const res = await TUnitData(this.form)



      this.tableData = res.data

      this.total = res.count

    },



    async getTUnitGroupProject(unitcode) {

      const data = {

        unitcode, isgroup: '1'

      }

      const res = await TUnitGroupProject(data)

      res.data.forEach((i, index) => {

        i.unitname = i.name

        i.unitcode = i.code

        i.uuid = new Date().getTime() + index

        i.isVisible = 0

        // i.idunitgroup = unitcode

        i.checkboxSelected = i.isMainUnit === '1' ? '1' : '0'

      })

      this.tableDataDialog = res.data

    },



    // 排序改变时

    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.getTUnitData()

    },

    async nodeClick(obj, Node, VueComponent) {

      if (obj.code === 'S' || obj.code === 'M' || obj.code === '') {

        this.form.tunittype = obj.code

        this.form.tunitgroupcode = ''

        await this.getTUnitData(obj.code)

        this.isMainUnitHidden = true

        this.$nextTick(() => {

          this.$refs.tableDataRef.doLayout()

        })

      } else {

        this.form.tunittype = 'M'

        this.form.tunitgroupcode = obj.code

        await this.getTUnitData(obj.code)

        this.isMainUnitHidden = false

        this.$nextTick(() => {

          this.$refs.tableDataRef.doLayout()

        })

      }

    },

    add(operation) {

      if (this.$refs.treeLeftRef.getCurrentKey() === 'S' || this.$refs.treeLeftRef.getCurrentKey() === 'M') {

        this.dialogForm.tunittype = this.$refs.treeLeftRef.getCurrentKey()

      } else {

        return this.$message.error('请先选择树上的单计量或多计量！')

      }

      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(() => {

        if (this.$refs.treeLeftRef.getCurrentKey() === 'S' || this.$refs.treeLeftRef.getCurrentKey() === 'M' || this.$refs.treeLeftRef.getCurrentKey() === '') {

          this.dialogForm.tunittype = row.isGroup === '0' ? 'S' : 'M'

          this.dialogForm.tunitgroupcode = row.isGroup === '0' ? row.code : row.idunitgroup

          this.dialogForm.unitcode = row.code

          this.dialogForm.unitname = row.name

          this.dialogForm.data_sources = row.data_sources

        } else {

          this.dialogForm.tunittype = 'M'

          this.dialogForm.tunitgroupcode = row.idunitgroup

          this.dialogForm.unitcode = row.idunitgroup

          this.dialogForm.unitname = this.treeLeft[0].children[1].children.find(i => i.code === this.$refs.treeLeftRef.getCurrentKey()).name

          this.dialogForm.data_sources = row.data_sources

        }



        if (this.dialogForm.tunittype === 'M') {

          this.getTUnitGroupProject(row.idunitgroup)

        }

      })

    },



    // 删除按钮

    async del(row) {

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

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        if (this.$refs.treeLeftRef.getCurrentKey() === 'S' || this.$refs.treeLeftRef.getCurrentKey() === 'M' || this.$refs.treeLeftRef.getCurrentKey() === '') {

          // this.dialogForm.tunittype = this.$refs.treeLeftRef.getCurrentKey()

        } else {

          if (row.isMainUnit === '1' || this.tableData.length === 2) {

            return this.$message.info('计量单位组下，必须有一个主计量和至少一个辅计量！')

          }

        }



        const data = {

          data_sources: row.data_sources,

          tunittype: row.isGroup === '0' ? 'S' : 'M',



          tunitgroupcode: row.isGroup === '0' ? '' : row.idunitgroup,

          tunitcode: row.isGroup === '0' ? row.code : (this.$refs.treeLeftRef.getCurrentKey() === 'M' ? '' : row.code)

        }

        DeleteTUnit(data).then(res => {

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

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

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

              this.form.page--

            }



            this.handleGetApi(this.$refs.treeLeftRef.getCurrentKey())

          }

        })

      }).catch(() => {

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

      })

    },

    // 对话框关闭事件

    handleClose() {

      this.dialogForm.tunittype = ''

      this.dialogForm.tunitgroupcode = ''

      this.dialogForm.unitcode = ''

      this.dialogForm.unitname = ''

      this.dialogForm.data_sources = 'MES'

      this.tableDataDialog = []

      this.$refs.dialogForm.clearValidate()

    },

    // 对话框取消

    dialogVisibleCancel() {

      this.dialogVisible = false

    },

    // 对话框确认

    dialogVisibleConfirm() {

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

        if (valid) {

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

            return this.$message.info('请先保存当前行！')

          }



          let data

          if (this.dialogForm.tunittype === 'S') { // 单计量新增，修改

            data = [{

              unitcode: this.dialogForm.unitcode,

              unitname: this.dialogForm.unitname,

              children: [

                {

                  'unitcode': this.dialogForm.unitcode,

                  'unitname': this.dialogForm.unitname,

                  'isMainUnit': '0',

                  'changeRate': '1',

                  'isSingleUnit': '1',

                  'disabled': '0',

                  'isGroup': '0',

                  'rateDescription': '',

                  'idunitgroup': ''

                }

              ]

            }]

          }

          if (this.dialogForm.tunittype === 'M') { // 多计量新增，修改

            if (this.tableDataDialog.length === 0) {

              return this.$message.info('计量单位组中至少包含一个计量单位！')

            }

            if (this.tableDataDialog.length === 1) {

              return this.$message.info('计量单位组下，必须有一个主计量和至少一个辅计量！')

            }



            this.tableDataDialog.forEach((i, index) => {

              i.unitcode = i.unitcode ? i.unitcode : 'U' + index.toString()

              i.isMainUnit = i.checkboxSelected === '1' ? '1' : '0'

              i.isSingleUnit = '0'

              i.disabled = '0'

              i.isGroup = '1'

              i.idunitgroup = this.dialogForm.tunitgroupcode

            })

            data = [{

              unitcode: this.dialogForm.unitcode,

              unitname: this.dialogForm.unitname,

              children: this.tableDataDialog

            }]

          }

          console.log(data)

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

          AddUpdateTUnit(data, this.dialogForm.data_sources, this.dialogForm.tunittype, this.dialogForm.tunitgroupcode, this.dialogForm.OperType).then(res => {

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

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

              this.dialogVisible = false

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

              this.handleGetApi(this.$refs.treeLeftRef.getCurrentKey())

            } else {

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

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

            }

          })

        }

      })

    },



    tableDataDialogAdd() {

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

        return this.$message.info('请先保存上一条数据！')

      }



      this.tableDataDialog.push({

        unitname: '',

        changeRate: 1,

        uuid: new Date().getTime(),

        checkboxSelected: this.tableDataDialog.length === 0 ? '1' : '0',

        isVisible: 1,

        data_sources: 'MES'

      })

      console.log(this.tableDataDialog)

    },

    tableDataDialogEdit(row) {

      row.isVisible = 1

    },

    tableDataDialogDel(row) {

      if (row.checkboxSelected === '1') {

        return this.$message.info('主计量单位不能删除！')

      }

      this.tableDataDialog = this.tableDataDialog.filter(i => i.uuid !== row.uuid)

    },

    tableDataDialogSave(row) {

      if (!row.unitname) {

        return this.$message.info('计量单位名称不能为空！')

      }

      if (!row.changeRate) {

        return this.$message.info('换算率不能为空！')

      }

      if (this.tableDataDialog.filter(i => i.unitname === row.unitname).length > 1) {

        return this.$message.info('多计量组内计量单位名称不能重复！')

      }

      // console.log(row, 234)

      row.isVisible = 0

      if (this.tableDataDialog.length > 1) {

        const unitname = this.tableDataDialog.find(i => i.checkboxSelected === '1').unitname

        this.tableDataDialog.forEach(i => {

          if (i.checkboxSelected === '0') {

            i.rateDescription = '1' + i.unitname + '=' + i.changeRate + unitname

          } else {

            i.rateDescription = ''

          }

        })

      }

    },

    checkboxSelectedChange(val, row) {

      row.changeRate = 1

      this.tableDataDialog.forEach(item => {

        item.checkboxSelected = item.uuid === row.uuid ? '1' : '0'

      })

    },

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 85

        this.tableHeight = this.mainHeight - 220

        this.$refs.tableDataRef.doLayout()

      })

    }

  }

}

</script>

<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="display: flex">
        <!--        background:rgba(248,248,250,1);-->
        <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">-->
            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" />-->
            <!--            </div>-->

          </div>

          <el-tree
            ref="treeLeftRef"
            key="treeLeftKey"
            style="padding: 10px;overflow: auto;"
            :style="{height:(tableHeight+150)+'px'}"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="nodeClick"
          />

        </div>

        <div style="width: calc(100% - 300px)">
          <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="info" icon="el-icon-refresh" @click="getSaveSearchUnit">同步计量单位</el-button>
          </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-column
                prop="rowNum"
                width="50"
                fixed
                label="序号"
              />
              <el-table-column
                prop="code"
                label="计量单位编码"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.isGroup === '0' ? row.code :(!isMainUnitHidden?row.code:'') }}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="计量单位名称"
                sortable="custom"
              />
              <el-table-column
                v-if="!isMainUnitHidden"
                prop="isMainUnit"
                label="主计量"
                sortable="custom"
              >
                <template slot-scope="{row}">
                  {{ row.isMainUnit === '1' ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column
                v-if="!isMainUnitHidden"
                prop="changeRate"
                label="换算率"
                sortable="custom"
              />

              <!--              <el-table-column-->
              <!--                prop="data_sources"-->
              <!--                label="数据来源"-->
              <!--                sortable="custom"-->
              <!--              />-->
              <el-table-column
                prop="lm_user"
                label="创建人员"
                sortable="custom"
              />
              <el-table-column
                prop="lm_date"
                label="创建时间"
                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="getTUnitData"
          />
        </div>

      </div>

    </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="120px"
        style="display: flex;justify-content: space-between;align-content: flex-end"
      >

        <el-form-item :label="dialogForm.tunittype==='S'? '计量单位名称':'计量单位组名称'" prop="unitname">
          <el-input v-model="dialogForm.unitname" style="width: 200px" />
        </el-form-item>

        <el-form-item v-if="dialogForm.tunittype==='M'">
          <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="tableDataDialogAdd">新增行
          </el-button>
        </el-form-item>

      </el-form>

      <div v-if="dialogForm.tunittype==='M'">
        <el-table
          ref="tableDataDialogRef"
          class="tableFixed"
          :data="tableDataDialog"
          row-class-name="custom-row"
          height="400"
          border
          :style="{width: 100+'%',height:'400px',}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >

          <el-table-column
            type="index"
            width="50"
            fixed
            label="序号"
          />
          <el-table-column
            prop="unitname"
            label="计量单位名称"
          >
            <template slot-scope="{row}">
              <el-input
                v-if="row.isVisible===1"
                v-model="row.unitname"
                placeholder="请输入"
              />
              <div v-else> {{ row.unitname }}</div>
            </template>

          </el-table-column>
          <el-table-column

            label="主计量"
            prop="checkboxSelected"
          >
            <template slot-scope="{row}">

              <el-select
                v-if="row.isVisible===1"
                v-model="row.checkboxSelected"
                :popper-append-to-body="false"
                :disabled="row.checkboxSelected==='1'"
                placeholder="请选择"
                filterable
                @change="val=>checkboxSelectedChange(val,row)"
              >
                <el-option
                  v-for="item in checkboxSelectedArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
              <div v-else> {{ row.checkboxSelected === '1' ? '是' : '否' }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="changeRate"
            label="换算率"
          >
            <template slot-scope="{row}">
              <el-input
                v-if="row.isVisible===1"
                v-model="row.changeRate"
                :disabled="row.checkboxSelected==='1'"
                placeholder="请输入"
                oninput="value=value.replace(/[^0-9.]/g,'')"
              />
              <div v-else> {{ row.changeRate }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="rateDescription"
            label="换算说明"
          />
          <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.isVisible===0&&tableDataDialog.filter(i=>i.isVisible===1).length===0"
                    class="el-icon-edit-outline"
                    :style="{color:$store.state.settings.theme}"
                    @click="tableDataDialogEdit(row)"
                  />
                </el-tooltip>
                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
                  <i
                    v-if="row.isVisible===0&&tableDataDialog.filter(i=>i.isVisible===1).length===0"
                    class="el-icon-delete"
                    :style="{color:$store.state.settings.theme}"
                    @click="tableDataDialogDel(row)"
                  />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="保存" placement="top">
                  <i
                    v-if="row.isVisible===1"
                    class="el-icon-circle-check"
                    style="cursor:pointer;"
                    :style="{color:$store.state.settings.theme}"
                    @click="tableDataDialogSave(row)"
                  />
                </el-tooltip>
              </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>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import { SaveSearchUnit } from '@/api/ErpSyncMes'
import { AddUpdateTUnit, DeleteTUnit, TUnitData, TUnitGroup, TUnitGroupProject } from '@/api/ProductModel'

export default {
  name: 'UnitList',
  components: {
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
    return {
      // mouseHoverType: 'mouseout',
      isExpandForm: false,
      mainHeight: 0,
      tableHeight: 0,
      form: {
        tunittype: '', // 单计量(S) 多计量(M)
        tunitgroupcode: '', // 计量单位组编码
        prop: 'isGroup', // 排序字段
        order: 'asc', // 排序字段
        page: 1, // 第几页
        rows: 20 // 每页多少条
      },
      total: 10,
      tableData: [],
      dialogVisible: false,
      dialogForm: {
        tunittype: '', // 单计量(S) 多计量(M)
        tunitgroupcode: '', // 计量单位组编码
        unitcode: '',
        unitname: '',
        data_sources: 'MES'
      },
      operation: '',
      dialogFormRules: {
        unitname: [
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }
        ]
      },

      defaultPropsLeft: {
        children: 'children',
        label: 'name'
      },
      treeLeft: [],

      tableDataDialog: [],

      checkboxSelectedArr: [
        { code: '0', name: '否' },
        { code: '1', name: '是' }
      ],

      isMainUnitHidden: true

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

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    this.handleGetApi('')
  },
  methods: {
    async handleGetApi(code) {
      await this.getTUnitGroup(code)
      await this.getTUnitData()
    },
    async getSaveSearchUnit() {
      const res = await SaveSearchUnit()
      if (res.code === '200') {
        await this.handleGetApi(this.$refs.treeLeftRef.getCurrentKey())
        this.$notify.success('计量单位同步成功！')
      }
    },
    async getTUnitGroup(code) {
      const { data: res } = await TUnitGroup()

      this.treeLeft = [
        {
          code: '', name: '全部', children: [
            { code: 'S', name: '单计量' },
            { code: 'M', name: '多计量', children: res }
          ]
        }
      ]
      this.$nextTick(() => {
        this.$refs.treeLeftRef.setCurrentKey(code)
      })
    },
    async getTUnitData() {
      const res = await TUnitData(this.form)

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

    async getTUnitGroupProject(unitcode) {
      const data = {
        unitcode, isgroup: '1'
      }
      const res = await TUnitGroupProject(data)
      res.data.forEach((i, index) => {
        i.unitname = i.name
        i.unitcode = i.code
        i.uuid = new Date().getTime() + index
        i.isVisible = 0
        // i.idunitgroup = unitcode
        i.checkboxSelected = i.isMainUnit === '1' ? '1' : '0'
      })
      this.tableDataDialog = res.data
    },

    // 排序改变时
    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.getTUnitData()
    },
    async nodeClick(obj, Node, VueComponent) {
      if (obj.code === 'S' || obj.code === 'M' || obj.code === '') {
        this.form.tunittype = obj.code
        this.form.tunitgroupcode = ''
        await this.getTUnitData(obj.code)
        this.isMainUnitHidden = true
        this.$nextTick(() => {
          this.$refs.tableDataRef.doLayout()
        })
      } else {
        this.form.tunittype = 'M'
        this.form.tunitgroupcode = obj.code
        await this.getTUnitData(obj.code)
        this.isMainUnitHidden = false
        this.$nextTick(() => {
          this.$refs.tableDataRef.doLayout()
        })
      }
    },
    add(operation) {
      if (this.$refs.treeLeftRef.getCurrentKey() === 'S' || this.$refs.treeLeftRef.getCurrentKey() === 'M') {
        this.dialogForm.tunittype = this.$refs.treeLeftRef.getCurrentKey()
      } else {
        return this.$message.error('请先选择树上的单计量或多计量！')
      }
      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(() => {
        if (this.$refs.treeLeftRef.getCurrentKey() === 'S' || this.$refs.treeLeftRef.getCurrentKey() === 'M' || this.$refs.treeLeftRef.getCurrentKey() === '') {
          this.dialogForm.tunittype = row.isGroup === '0' ? 'S' : 'M'
          this.dialogForm.tunitgroupcode = row.isGroup === '0' ? row.code : row.idunitgroup
          this.dialogForm.unitcode = row.code
          this.dialogForm.unitname = row.name
          this.dialogForm.data_sources = row.data_sources
        } else {
          this.dialogForm.tunittype = 'M'
          this.dialogForm.tunitgroupcode = row.idunitgroup
          this.dialogForm.unitcode = row.idunitgroup
          this.dialogForm.unitname = this.treeLeft[0].children[1].children.find(i => i.code === this.$refs.treeLeftRef.getCurrentKey()).name
          this.dialogForm.data_sources = row.data_sources
        }

        if (this.dialogForm.tunittype === 'M') {
          this.getTUnitGroupProject(row.idunitgroup)
        }
      })
    },

    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.$refs.treeLeftRef.getCurrentKey() === 'S' || this.$refs.treeLeftRef.getCurrentKey() === 'M' || this.$refs.treeLeftRef.getCurrentKey() === '') {
          // this.dialogForm.tunittype = this.$refs.treeLeftRef.getCurrentKey()
        } else {
          if (row.isMainUnit === '1' || this.tableData.length === 2) {
            return this.$message.info('计量单位组下，必须有一个主计量和至少一个辅计量！')
          }
        }

        const data = {
          data_sources: row.data_sources,
          tunittype: row.isGroup === '0' ? 'S' : 'M',

          tunitgroupcode: row.isGroup === '0' ? '' : row.idunitgroup,
          tunitcode: row.isGroup === '0' ? row.code : (this.$refs.treeLeftRef.getCurrentKey() === 'M' ? '' : row.code)
        }
        DeleteTUnit(data).then(res => {
          if (res.code === '200') {
            this.$notify.success('删除成功!')
            if (this.form.page > 1 && this.tableData.length === 1) {
              this.form.page--
            }

            this.handleGetApi(this.$refs.treeLeftRef.getCurrentKey())
          }
        })
      }).catch(() => {
        this.$notify.info('已取消删除')
      })
    },
    // 对话框关闭事件
    handleClose() {
      this.dialogForm.tunittype = ''
      this.dialogForm.tunitgroupcode = ''
      this.dialogForm.unitcode = ''
      this.dialogForm.unitname = ''
      this.dialogForm.data_sources = 'MES'
      this.tableDataDialog = []
      this.$refs.dialogForm.clearValidate()
    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.tableDataDialog.find(i => i.isVisible === 1)) {
            return this.$message.info('请先保存当前行！')
          }

          let data
          if (this.dialogForm.tunittype === 'S') { // 单计量新增，修改
            data = [{
              unitcode: this.dialogForm.unitcode,
              unitname: this.dialogForm.unitname,
              children: [
                {
                  'unitcode': this.dialogForm.unitcode,
                  'unitname': this.dialogForm.unitname,
                  'isMainUnit': '0',
                  'changeRate': '1',
                  'isSingleUnit': '1',
                  'disabled': '0',
                  'isGroup': '0',
                  'rateDescription': '',
                  'idunitgroup': ''
                }
              ]
            }]
          }
          if (this.dialogForm.tunittype === 'M') { // 多计量新增，修改
            if (this.tableDataDialog.length === 0) {
              return this.$message.info('计量单位组中至少包含一个计量单位！')
            }
            if (this.tableDataDialog.length === 1) {
              return this.$message.info('计量单位组下，必须有一个主计量和至少一个辅计量！')
            }

            this.tableDataDialog.forEach((i, index) => {
              i.unitcode = i.unitcode ? i.unitcode : 'U' + index.toString()
              i.isMainUnit = i.checkboxSelected === '1' ? '1' : '0'
              i.isSingleUnit = '0'
              i.disabled = '0'
              i.isGroup = '1'
              i.idunitgroup = this.dialogForm.tunitgroupcode
            })
            data = [{
              unitcode: this.dialogForm.unitcode,
              unitname: this.dialogForm.unitname,
              children: this.tableDataDialog
            }]
          }
          console.log(data)
          this.$store.state.app.buttonIsDisabled = true
          AddUpdateTUnit(data, this.dialogForm.data_sources, this.dialogForm.tunittype, this.dialogForm.tunitgroupcode, this.dialogForm.OperType).then(res => {
            if (res.code === '200') {
              this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
              this.dialogVisible = false
              this.$store.state.app.buttonIsDisabled = false
              this.handleGetApi(this.$refs.treeLeftRef.getCurrentKey())
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },

    tableDataDialogAdd() {
      if (this.tableDataDialog.find(i => i.isVisible === 1)) {
        return this.$message.info('请先保存上一条数据！')
      }

      this.tableDataDialog.push({
        unitname: '',
        changeRate: 1,
        uuid: new Date().getTime(),
        checkboxSelected: this.tableDataDialog.length === 0 ? '1' : '0',
        isVisible: 1,
        data_sources: 'MES'
      })
      console.log(this.tableDataDialog)
    },
    tableDataDialogEdit(row) {
      row.isVisible = 1
    },
    tableDataDialogDel(row) {
      if (row.checkboxSelected === '1') {
        return this.$message.info('主计量单位不能删除！')
      }
      this.tableDataDialog = this.tableDataDialog.filter(i => i.uuid !== row.uuid)
    },
    tableDataDialogSave(row) {
      if (!row.unitname) {
        return this.$message.info('计量单位名称不能为空！')
      }
      if (!row.changeRate) {
        return this.$message.info('换算率不能为空！')
      }
      if (this.tableDataDialog.filter(i => i.unitname === row.unitname).length > 1) {
        return this.$message.info('多计量组内计量单位名称不能重复！')
      }
      // console.log(row, 234)
      row.isVisible = 0
      if (this.tableDataDialog.length > 1) {
        const unitname = this.tableDataDialog.find(i => i.checkboxSelected === '1').unitname
        this.tableDataDialog.forEach(i => {
          if (i.checkboxSelected === '0') {
            i.rateDescription = '1' + i.unitname + '=' + i.changeRate + unitname
          } else {
            i.rateDescription = ''
          }
        })
      }
    },
    checkboxSelectedChange(val, row) {
      row.changeRate = 1
      this.tableDataDialog.forEach(item => {
        item.checkboxSelected = item.uuid === row.uuid ? '1' : '0'
      })
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 220
        this.$refs.tableDataRef.doLayout()
      })
    }
  }
}
</script>