1.计量单位完成80%

loulijun2021

2023-08-29 eab984ba7deca1b653195b10627d5289e0503b3b

 src/views/materialManager/unitList.vue

@@ -1,11 +1,641 @@
<template />
<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.idunitgroup ? '' : row.code }}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="计量单位名称"
                sortable="custom"
              />
              <!--              <el-table-column-->
              <!--                prop="isGroup"-->
              <!--                label="是否多计量"-->
              <!--                sortable="custom"-->
              <!--              >-->
              <!--                <template slot-scope="{row}">-->
              <!--                  <el-tag v-if="row.isGroup==='1'" size="small" type="success">是</el-tag>-->
              <!--                  <el-tag v-if="row.isGroup==='0'" size="small" type="info">否</el-tag>-->
              <!--                </template>-->
              <!--              </el-table-column>-->

              <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="getTUnitGroup"
          />
        </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, TUnitData, TUnitGroup, TUnitGroupProject } from '@/api/ProductModel'

export default {
  name: 'UnitList'
  name: 'Zzjg',
  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: '是' }
      ]

    }
  },
  created() {

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

    this.getTUnitGroup('')
    this.getTUnitData()
  },
  methods: {
    async getSaveSearchUnit() {
      const res = await SaveSearchUnit()
      if (res.code === '200') {
        await this.getTUnitGroup('')
        await this.getTUnitData()
        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)
      this.tableData = 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.getTUnitGroup()
    },
    nodeClick(obj, Node, VueComponent) {
      if (obj.code === 'S' || obj.code === 'M' || obj.code === '') {
        this.form.tunittype = obj.code
        this.form.tunitgroupcode = ''
        this.getTUnitData(obj.code)
      } else {
        this.form.tunittype = 'M'
        this.form.tunitgroupcode = obj.code
        this.getTUnitData(obj.code)
      }
    },
    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(() => {
        this.dialogForm.tunittype = row.isGroup === '0' ? 'S' : 'M'
        this.dialogForm.tunitgroupcode = row.isGroup === '0' ? '' : row.code
        this.dialogForm.unitcode = row.code
        this.dialogForm.unitname = row.name
        this.dialogForm.data_sources = row.data_sources
      })
    },

    // 删除按钮
    async del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // DeleteUserSave({ usercode: row.usercode }).then(res => {
        //   if (res.code === '200') {
        //     this.$notify.success('删除成功!')
        //     if (this.form.page > 1 && this.tableData.length === 1) {
        //       this.form.page--
        //     }
        //     this.getTUnitGroup()
        //   }
        // })
      }).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) {
          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 = index + 1
              i.isMainUnit = '1'
              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(JSON.parse(JSON.stringify(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.getTUnitData()
              if (this.dialogForm.tunittype === 'M') {
                this.getTUnitGroup('M')
              }
            } else {
              this.$store.state.app.buttonIsDisabled = false
              this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
            }
          })
        }
      })
    },

    tableDataDialogAdd() {
      // 'unitcode': this.dialogForm.unitcode,
      //   'unitname': this.dialogForm.unitname,
      //   'isMainUnit': '0',
      //   'changeRate': '1',
      //   'isSingleUnit': '1',
      //   'disabled': '0',
      //   'isGroup': '0',
      //   'rateDescription': '',
      //   'idunitgroup': ''

      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
      })
      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>

<style scoped>

</style>