kd-aiot-frontend-eom/src/views/salesServiceManagement/accessory/components/spareInfo.vue

<template>
  <el-form ref="spareInfoRef">
    <headerTitle :title="title" style="margin-top: 15px"></headerTitle>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="tableList"
      row-key="id"
      height="30vh"
      :needPage="false"
    >
      <template v-slot:toolbar v-if="types != 'view'">
        <div class="add-product" @click="addEquipment">
          <i class="el-icon-circle-plus-outline"></i>
        </div>
      </template>

      <template v-slot:totalCount="{ row, $index }">
        <el-input
          type="number"
          placeholder="请输入"
          v-model="row.totalCount"
          @input="handleInput(row, $index)"
          min="0"
          :disabled="types == 'view'"
        />
      </template>
      <template v-slot:singlePrice="{ row, $index }">
        <el-input
          type="number"
          placeholder="请输入"
          v-model="row.singlePrice"
          @input="handleInput(row, $index)"
          min="0"
          :disabled="types == 'view'"
        />
      </template>
      <template v-slot:action="{ row,$index }">
        <el-popconfirm
          v-if="types != 'view'"
          class="ele-action"
          title="确定要删除吗？"
          @confirm="del(row.id,$index)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <AssetsDialog ref="selectStockLedgerDialogRef" :assetType="6" @choose="confirmChoose"></AssetsDialog>
  </el-form>
</template>

<script>
import AssetsDialog from '../../components/AssetsDialog.vue';
// import { parameterGetByCode } from '@/api/main/index.js';
export default {
  components: {
    AssetsDialog
  },
  props: {
    detailList: {
      type: Array,
      default: () => []
    },
    types: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '配件信息'
    }
  },
  watch: {
    detailList: {
      handler(newVal) {
        this.tableList = newVal;
      },
      immediate: true
    }
  },
  data() {
    return {
      tableList: [],
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'categoryCode',
          label: '物品编码',
          align: 'center'
        },
        {
          prop: 'categoryName',
          label: '物品名称',
          align: 'center'
        },

        {
          prop: 'categoryModel',
          label: '型号',
          align: 'center'
        },
        {
          prop: 'specification',
          label: '规格',
          align: 'center'
        },
        {
          prop: 'level',
          label: '级别',
          align: 'center'
        },
        {
          prop: 'totalCount',
          label: '数量',
          align: 'center',
          width: 100,
          slot: 'totalCount'
        },
        {
          prop: 'singlePrice',
          label: '单价',
          align: 'center',
          width: 100,
          slot: 'singlePrice'
        },
        {
          prop: 'totalPrice',
          label: '总价',
          align: 'center',
          width: 100
        },
        //   {
        //     prop: 'measureQuantity',
        //     label: '库存',
        //     align: 'center'
        //   },
        {
          prop: 'measureUnit',
          label: '计量单位',
          align: 'center'
        },
        {
          prop: 'warehouseName',
          label: '仓库',
          align: 'center'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 140,
          align: 'center',
          resizable: false,
          fixed: 'right',
          slot: 'action',
          showOverflowTooltip: true,
          show: this.types != 'view'
        }
      ]
    };
  },
  mounted() {
    this.tableList = this.detailList;
  },
  methods: {
    // 出库数量限制
    handleInput(row, index) {
      if (row.singlePrice == 0) {
        this.$set(this.tableList[index], 'totalPrice', 0);
      } else {
        this.$set(
          this.tableList[index],
          'totalPrice',
          Number(row.singlePrice) * Number(row.totalCount)
        );
      }
    },
    del(id, index) {
      console.log(index,'index')
      console.log(this.tableList, 'this.tableList');
      // this.tableList = this.tableList.filter((item) => item.id != id);
      this.tableList.splice(index, 1);
    },
    async addEquipment() {
      // const res = await parameterGetByCode({
      //   code: 'after_sales_accessory_source'
      // });
      // 配件回收清单进来的时候需要 查主数据
      if (this.title == '配件回收清单') {
        this.$refs.selectStockLedgerDialogRef.open(this.tableList, '1');
      } else {
        this.$refs.selectStockLedgerDialogRef.open(this.tableList, '0');
      }
    },
    confirmChoose(data) {
      data.map((item) => {
        item.singlePrice = item.unitPrice;
        delete item.id;
        return {
          ...item
        };
      });
      this.tableList = JSON.parse(JSON.stringify(data));
    },
    getSpareData() {
      return this.tableList;
    }
  }
};
</script>

<style lang="scss" scoped>
.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  // justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}
</style>