lanan-system-vue/src/views/repair/tickets/Components/TicketItemShow.vue

<template>
  <div>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
    >
      <el-table-column label="序号" align="center">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="getLabelName" width="200" prop="name">
        <template slot-scope="scope">
          {{ scope.row[listType]?.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="规格" width="180" prop="model">
        <template slot-scope="scope">
          {{ scope.row[listType]?.model }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="编码" width="180" prop="code">
        <template slot-scope="scope">
          {{ scope.row[listType]?.code }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="数量" width="180" prop="itemCount"/>
      <el-table-column align="center" label="单位" width="180" prop="unit">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.REPAIR_UNIT" v-model="scope.row[listType].unit"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单价" width="180" prop="itemPrice"/>
      <el-table-column align="center" label="折扣" width="180" prop="itemDiscount">
        <template slot-scope="scope">
          {{scope.row.itemDiscount === 1 ? "无折扣" : scope.row.itemDiscount}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="金额" width="180" prop="itemMoney"/>
      <el-table-column align="center" label="施工人员" width="180" prop="repairNames"/>
      <el-table-column align="center" label="销售人员" width="180" prop="saleName"/>
      <el-table-column align="center" label="备注" width="180" prop="remark"/>
      <el-table-column align="center" label="操作" width="180" fixed="right" v-if="isEdit && list.length > 0">
        <template slot-scope="scope">
          <el-button type="text" @click="$emit('remove', scope.row.id)">
            删除
          </el-button>
          <el-button type="text" @click="editItem(scope.row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改" :visible.sync="dialogVisible" v-dialogDrag append-to-body ref="dialog" width="60%">
      <el-form :model="item" ref="formRef" :rules="formRules" :inline="true" label-width="10rem">
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="名称" prop="itemName">
              <el-input disabled v-model="item.itemName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工人员" prop="repairNames">
              <el-input v-model="item.repairNames" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="销售人员" prop="saleName">
              <el-input v-model="item.saleName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="itemCount">
              <el-input-number :step="1" :min="0" v-model="item.itemCount" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="2">
          <el-col :span="12">
            <el-form-item label="单价" prop="itemPrice">
              <el-input-number :min="0" v-model="item.itemPrice" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="折扣" prop="itemDiscount">
              <DiscountInput v-model="item.itemDiscount" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getItemById, updateById} from "@/api/repair/tickets/TicketsItem";
import DiscountInput from "@/views/repair/tickets/Components/DiscountInput.vue";
import WorkerChoose from "@/views/repair/Components/WorkerChoose.vue";
import StaffChoose from "@/views/repair/Components/StaffChoose.vue";

export default {
  name: "TicketItemShow",
  components: {StaffChoose, WorkerChoose, DiscountInput},
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    listType: {
      type: String,
      default: null
    },
    isEdit:{
      type: Boolean,
    }
  },
  data() {
    return {
      loading: !(this.list && this.list.length) && !this.isEdit,
      dialogVisible: false,
      item: {},
      formRules:{
        itemPrice: [{required: true, message: '单价不能为空', trigger: 'blur'}],
        itemCount: [{required: true, message: '数量不能为空', trigger: 'blur'}],
        itemDiscount: [{required: true, message: "折扣不能为空", trigger: 'blur'}]
      },
      formLoading: false
    }
  },
  computed: {
    getLabelName() {
      switch (this.listType) {
        case "project":
          return "维修项目";
        case "ware":
          return "维修配件";
        case "other":
          return "附加费用";
        default:
          return '';
      }
    }
  },
  methods: {
    async editItem(row){
      this.resetForm('formRef')
      try {
        const res = await getItemById(row.id)
        this.item = res.data
        this.dialogVisible = true
        this.item['repair'] = null
        this.item['adviser'] = null
      }catch{}
    },
    async submitForm(){
      try {
        await this.$refs.formRef.validate()
        await updateById(this.item)
        this.dialogVisible = false
        this.$modal.msgSuccess("修改成功")
        this.$emit('success', this.item.ticketId)
      }catch{}
    }
  }
}
</script>

<style scoped lang="scss">

</style>