Jeff.RFID.UI/src/components/DialogTagApplyDetail.vue

<template>
    <el-dialog
      :visible.sync="visible"
      :title="`订单详情 ${oData && oData.orderNo ? oData.orderNo : ''}`"
      append-to-body
      width="1200px"
    >
      <div class="flex column" style="padding-bottom:20px;height:580px">
        <div class="flex valign-center">
        <el-button
          plain
          icon="el-icon-delete"
          type="primary"
          size="small"
          class="custom-plain-button"
          @click="onBatchDeleteBtnClick"
          :disabled="selectedList.length === 0 || (oData.tagApplyStateId !='0' && oData.tagApplyStateId != '1')"
        >批量删除</el-button>
      </div>
        <div class="flex-1 fit-size" style="padding-top:20px;">
          <el-table
            ref="table"
            :data="list"
            stripe
            border
            height="100%"
            size="small"
            class="custom-el-table-style"
            @selection-change="onSelectionChange"
            @row-click="onRowClick"
          >
          <el-table-column
            type="selection"
            width="55"
            align="center"
             :selectable="tagSelectAble"
            fixed
          ></el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
              fixed
            ></el-table-column>
            <el-table-column
              label="商品编码"
              prop="goodsCode"
              header-align="center"
              min-width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              label="商品名称"
              min-width="200"
              prop="goodsName"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              label="物料编码"
              min-width="100"
              prop="materielCode"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              label="最小包装数量"
              min-width="80"
              prop="minimumPackingNumber"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              label="最小包装单位"
              min-width="80"
              prop="minimumPackingUnit"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              label="数量"
              min-width="80"
              prop="number"
              header-align="center"
              align="center"
            >
                <template slot-scope="scope">
                    <el-input v-model="scope.row.number" :class="{ 'input-error': scope.row.number === '' }" @input="handleInput" :disabled="oData.tagApplyStateId !='0' && oData.tagApplyStateId != '1'"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                label="单价（元）"
                prop="unitPrice"
                align="right"
                min-width="70"
                header-align="center"
              ></el-table-column>
            <el-table-column
                label="费用（元）"
                prop="amount"
                align="right"
                min-width="70"
                header-align="center"
              ></el-table-column>
              <el-table-column
                label="标签类型"
                prop="tagTypeName"
                align="left"
                min-width="120"
                header-align="center"
              ></el-table-column>
              <el-table-column
                label="操作栏"
                min-width="80"
                header-align="center"
                align="center"
              >
                <template v-slot="{ row }">
                  <div class="flex center layout-gap">
                    <edit-button :data="row" :on-click="onDeleteBtnClick" icon="el-icon-delete" :disabled="oData.tagApplyStateId !='0' && oData.tagApplyStateId != '1'">删除</edit-button>
                  </div>
                </template>
              </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer v-if="oData && (oData.tagApplyStateId === '0'||oData.tagApplyStateId === '1')">
        <div class="flex center dialog-footer">
          <el-button
            @click="onCloseBtnClick"
          >取消</el-button>

          <el-button
            type="primary"
            @click="onOkBtnClick"
          >确定</el-button>
        </div>
      </template>
    </el-dialog>
  </template>

<script>
import BaseCurdList from '@@/utils/BaseCurdList'
import TagApply from '@@/entries/TagApply'

export default {
  name: 'DialogTagApplyDetail',
  extends: BaseCurdList(TagApply),
  props: {
    api: {
      required: true,
      type: Function
    }
  },
  data: () => ({
    visible: false,
    oData: null
  }),
  methods: {
    open (data) {
      this.oData = data
      this.visible = true
      this.list = data.details
    },
    close () {
      this.oData = null
      this.visible = false
      this.list = Object.freeze([])
    },
    tagSelectAble () {
      return this.oData.tagApplyStateId === '0' || this.oData.tagApplyStateId === '1'
    },
    onBatchDeleteBtnClick () {
      const { selectedList } = this
      this.$confirm(`此操作将删除选中的记录, 是否继续？`, '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirm-dialog-confirm-btn',
        cancelButtonClass: 'confirm-dialog-cancel-btn',
        type: 'warning'
      }).then(() => {
        const ids = new Set(selectedList.map(data => data.id))
        this.list = this.list.filter(item => !ids.has(item.id))
        this.oData.details = this.list
      }).catch(() => {})
    },
    onDeleteBtnClick (data) {
      this.$confirm(`此操作将删除该记录, 是否继续？`, '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirm-dialog-confirm-btn',
        cancelButtonClass: 'confirm-dialog-cancel-btn',
        type: 'warning'
      }).then(() => {
        this.list = this.list.filter(item => item.id !== data.id)
        this.oData.details = this.list
      }).catch(() => {})
    },
    onCloseBtnClick () {
      this.close()
    },
    onOkBtnClick () {
      this.$$request(this.api, this.oData).then(() => {
        this.close()
        this.$emit('saved')
      }).catch(console.error).finally(() => {})
    },
    handleInput (value) {
      let sanitizedValue = value.replace(/[^0-9]/g, '')
      sanitizedValue = sanitizedValue.replace(/^0+/, '')
      this.selectedData.number = sanitizedValue === '' ? '' : sanitizedValue
      this.selectedData.amount = sanitizedValue === '' ? 0 : (sanitizedValue * this.selectedData.unitPrice).toFixed(2)
    }
  }
}
</script>

<style lang="scss">
.input-error .el-input__inner {
  border-color: red;
}
</style>