211 lines
7.1 KiB
Vue
211 lines
7.1 KiB
Vue
<template>
|
|
<div>
|
|
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
|
|
:summary-method="getSummaries"
|
|
show-summary
|
|
>
|
|
<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="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="itemCount"/>
|
|
<el-table-column align="center" label="单价" width="180" prop="itemPrice"/>
|
|
<el-table-column align="center" label="折扣" width="180" prop="itemDiscount" />
|
|
<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-row :gutter="1">
|
|
<el-col :span="12">
|
|
<el-form-item label="状态" prop="itemStatus">
|
|
<el-select v-model="item.itemStatus">
|
|
<el-option v-for="x in getDictDatas(DICT_TYPE.REPAIR_ITEM_STATUS)" :key="x.value" :label="x.label"
|
|
:value="x.value"/>
|
|
</el-select>
|
|
</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,
|
|
// 需要计算的列
|
|
includeColumn: ['itemMoney', 'itemCount']
|
|
}
|
|
},
|
|
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{}
|
|
},
|
|
getSummaries(param){
|
|
const { columns, data } = param;
|
|
const sums = [];
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = '合计';
|
|
return;
|
|
}
|
|
const values = data.map(item => Number(item[column.property]));
|
|
if (this.includeColumn.includes(column.property)) {
|
|
sums[index] = values.reduce((prev, curr) => {
|
|
const value = Number(curr);
|
|
if (!isNaN(value)) {
|
|
return prev + curr;
|
|
} else {
|
|
return prev;
|
|
}
|
|
}, 0);
|
|
sums[index];
|
|
}
|
|
});
|
|
return sums;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|