dianliang/lanan-system-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

维修工填写配件申请单、配件是否可见

Browse Source
This commit is contained in:
xiaofajia 2024-10-15 18:00:35 +08:00
parent 458cb418b8
commit 2dcc5e02ca
9 changed files with 915 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/api/repair/tickets/TWItem.js Normal file
View File

@ -0,0 +1,21 @@
import request from '@/utils/request'
const preUrl = '/repair/twi'
// 根据主表ID查看全部
export function listTwItem(params){
return request({
url: preUrl + '/list',
method: 'get',
params
})
}
// 配件客户是否可见
export function updateIsShow(params){
return request({
url: preUrl + '/isShow',
method: 'get',
params
})
}

29
src/api/repair/tickets/TicketWares.js Normal file
View File

@ -0,0 +1,29 @@
import request from '@/utils/request'
const preUrl = '/repair/tw'
// 分页查询
export function getPage(params){
return request({
url: preUrl + "/page",
method: 'get',
params
})
}
// 新增、修改
export function updateTicketWares(data){
return request({
url: preUrl + "/update",
method: 'post',
data
})
}
// 删除
export function removeTicketWares(id){
return request({
url: preUrl + "/remove?id=" + id,
method: 'delete'
})
}

6
src/utils/dict.js
View File

@ -214,6 +214,12 @@ export const DICT_TYPE = {
REPAIR_WORK_TYPE: 'repair_work_type',
// 维修工单进行状态
REPAIR_TICKETS_WORK_STATUS: 'repair_tickets_work_status',
// 领料、退料类型
TICKET_WARES_TYPE: 'ticket_wares_type',
// 领料、退料状态
TICKET_WARES_STATUS: 'ticket_wares_status',
// 领料、退料配件状态
TW_ITEM_STATUS: 'tw_item_status',
// ---------会员相关---------member_coupon_type，member_coupon_out_rule，member_car，member_active
//卡券类型

40
src/views/repair/tickets/Components/TicketItem.vue
View File

@ -42,45 +42,45 @@
<dict-tag :type="DICT_TYPE.REPAIR_UNIT" v-model="scope.row.unit"/>
</template>
</el-table-column>
<el-table-column align="center" label="单价" width="180" prop="price">
<el-table-column v-if="!exportColumn.includes('price')" align="center" label="单价" width="180" prop="price">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.price"/>
<span class="item__txt">{{ scope.row.price }}</span>
</div>
</el-table-column>
<el-table-column align="center" label="折扣" width="180" prop="discount">
<el-table-column v-if="!exportColumn.includes('discount')" align="center" label="折扣" width="180" prop="discount">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.discount"/>
<span class="item__txt">{{ scope.row.discount }}</span>
</div>
</el-table-column>
<el-table-column align="center" label="金额" width="180" prop="totalPrice">
<el-table-column v-if="!exportColumn.includes('totalPrice')" align="center" label="金额" width="180" prop="totalPrice">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.totalPrice"/>
<span class="item__txt">{{ scope.row.totalPrice }}</span>
</div>
</el-table-column>
<el-table-column align="center" label="施工人员" width="180" prop="repair">
<el-table-column v-if="!exportColumn.includes('repair')" align="center" label="施工人员" width="180" prop="repair">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<WorkerChoose @input-blur="save(scope.row)" class="item__input" v-model="scope.row.repair"
:select-width="'15rem'"/>
<span class="item__txt">{{ scope.row.repair ? getRepairName(scope.row.repair) : scope.row.repair }}</span>
</div>
</el-table-column>
<el-table-column align="center" label="销售人员" width="180" prop="sale">
<el-table-column v-if="!exportColumn.includes('sale')" align="center" label="销售人员" width="180" prop="sale">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<StaffChoose @input-blur="save(scope.row)" class="item__input" v-model="scope.row.sale"
:select-width="'15rem'" :is-get="scope.row.id"/>
<span class="item__txt">{{ scope.row.sale ? scope.row.sale.name : scope.row.sale }}</span>
</div>
</el-table-column>
<el-table-column align="center" label="类型" width="180" prop="type">
<el-table-column v-if="!exportColumn.includes('type')" align="center" label="类型" width="180" prop="type">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<ServerChoose @input-blur="save(scope.row)" class="item__input" v-model="scope.row.type"/>
<span class="item__txt">{{ scope.row.type }}</span>
</div>
</el-table-column>
<el-table-column align="center" label="账类" width="180" prop="accountType">
<el-table-column v-if="!exportColumn.includes('accountType')" align="center" label="账类" width="180" prop="accountType">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<el-select v-model="scope.row.accountType" class="item__input" @blur="save(scope.row)">
<el-option v-for="item in getDict(DICT_TYPE.REPAIR_PAY_TYPE)" :key="item.value" :label="item.label"
@ -89,7 +89,7 @@
<dict-tag class="item__txt" :type="DICT_TYPE.REPAIR_PAY_TYPE" v-model="scope.row.accountType"/>
</div>
</el-table-column>
<el-table-column align="center" label="状态" width="180" prop="itemStatus">
<el-table-column v-if="!exportColumn.includes('itemStatus')" align="center" label="状态" width="180" prop="itemStatus">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.REPAIR_ITEM_STATUS" v-model="scope.row.itemStatus"/>
</template>
@ -102,7 +102,7 @@
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="150">
<template v-slot="scope">
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleCreateItem"
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleCreateItem" v-if="!exportColumn.includes('addBtn')"
>新增
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteItem(scope.$index)"
@ -160,6 +160,12 @@ export default {
return []
},
required: false
},
// 排除的字段
exportColumn:{
type: Array,
default: () => {return []},
required: false
}
},
data() {
@ -185,10 +191,12 @@ export default {
watch: {
list: {
handler(val) {
this.$emit("tableData", val)
const coupons = val.filter(item => item.coupon).map(item => item.coupon)
if (coupons && coupons.length > 0) {
this.$emit("changeCoupon", coupons)
if (val && val.length > 1){
this.$emit("tableData", val)
const coupons = val.filter(item => item.coupon).map(item => item.coupon)
if (coupons && coupons.length > 0) {
this.$emit("changeCoupon", coupons)
}
}
},
deep: true
@ -202,6 +210,12 @@ export default {
totalPrice: item.itemMoney,
}
})
}else {
this.list = [{
coupon: {
id: null
}
}]
}
}
},

15
src/views/repair/tickets/Components/TicketManagerItem.vue
View File

@ -53,7 +53,7 @@
<el-dropdown @command="(command) => handleCommand(command, scope.$index, scope.row)">
<el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="!isFinish && scope.row.ticketsWorkStatus === '02'" @click="handleGet(scope.row)" size="mini" type="text" icon="el-icon-document-add"
<el-dropdown-item v-if="!isFinish && scope.row.ticketsWorkStatus === '02'" command="handleGet" size="mini" type="text" icon="el-icon-document-add"
>申请领料
</el-dropdown-item>
<el-dropdown-item v-if="isFinish" @click="handleBack(scope.row)" size="mini" type="text" icon="el-icon-document-delete"
@ -73,6 +73,7 @@
/>
<TicketsShow ref="ticketsShow"/>
<UpdateRepair ref="updateRepair" @success="listTickets"/>
<TWOperate ref="twOperate" @success="listTickets"/>
</div>
</template>
@ -80,10 +81,11 @@
import {getPageType, updateTake} from "@/api/repair/tickets/Tickets";
import TicketsShow from "@/views/repair/tickets/Components/TicketsShow.vue";
import UpdateRepair from "@/views/repair/tickets/form/UpdateRepair.vue";
import TWOperate from "@/views/repair/tickets/form/TWOperate.vue";
export default {
name: "TicketManagerItem",
components: {UpdateRepair, TicketsShow},
components: {TWOperate, UpdateRepair, TicketsShow},
props: {
isFinish: {
type: Boolean,
@ -141,7 +143,11 @@ export default {
},
// 配件申请
handleGet(row) {
row = {
...row,
type: true
}
this.$refs.twOperate.open(row)
},
// 接单
async handleTake(row) {
@ -177,6 +183,9 @@ export default {
case 'handleReTake':
this.handleReTake(row)
break
case 'handleGet':
this.handleGet(row)
break
default:
break
}

118
src/views/repair/tickets/Components/TicketWares.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div>
<!-- 搜索 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
<el-form-item label="关键字" prop="query">
<el-input style="width: 20rem" type="text" placeholder="工单号、车牌号、联系电话" v-model="queryParams.query"/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status">
<el-option v-for="item in this.getDictDatas(DICT_TYPE.TICKET_WARES_STATUS)" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 操作 -->
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="序号" align="center" width="80">
<template scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="单据号" align="center" prop="no" />
<el-table-column label="服务顾问" align="center" prop="adviserName" />
<el-table-column label="申请人" align="center" prop="repairName" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.TICKET_WARES_STATUS" v-model="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" icon="el-icon-view" @click="handleShow(scope.row)">
查看
</el-button>
<el-button v-if="userRole === 1 || userRole === 2 && scope.row.status === '01'" type="text" size="mini" icon="el-icon-s-check">
审核
</el-button>
<el-button v-if="userRole === 3 || userRole === 4 && scope.row.status !== '01'" type="text" size="mini" icon="el-icon-finished">
完成
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<TicketWaresShow ref="ticketWaresShow" :user-role="userRole"/>
</div>
</template>
<script>
import {getPage} from "@/api/repair/tickets/TicketWares";
import TicketWaresShow from "@/views/repair/tickets/Components/TicketWaresShow.vue";
export default {
name: "TicketWares",
components: {TicketWaresShow},
props:{
type: Boolean,
userRole: Number,
},
data(){
return{
queryParams:{
pageNo: 1,
pageSize: 10,
query: null,
type: this.type ? "01" : "02",
status: null
},
showSearch: true,
loading: false,
list: [],
total: 0
}
},
mounted() {
this.getList()
},
methods:{
async getList(){
try {
this.loading = true
const res = await getPage(this.queryParams)
if (res.data){
this.list = res.data.records
this.total = res.data.total
}
}finally {
this.loading = false
}
},
handleQuery(){
this.queryParams.pageNo = 1
this.getList()
},
resetQuery(){
this.resetForm('queryForm')
this.handleQuery()
},
handleShow(row){
this.$refs.ticketWaresShow.open(row)
}
}
}
</script>
<style scoped lang="scss">
</style>

245
src/views/repair/tickets/Components/TicketWaresShow.vue Normal file
View File

@ -0,0 +1,245 @@
<template>
<div class="app-container">
<el-dialog title="申请单查看" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
<el-card class="box-card">
<!-- 卡片头 -->
<div slot="header" class="clearfix">
<i class="el-icon-plus"/>
<span>工单信息</span>
</div>
<!-- 卡片内容 -->
<div>
<el-descriptions class="margin-top" :column="4" :size="'medium'" border style="margin-bottom: 1rem">
<el-descriptions-item>
<template slot="label">
订单编号
</template>
{{ info.ticketNo }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
维修类别
</template>
<dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="info.repairType"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
状态
</template>
<dict-tag :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS" v-model="info.ticketsWorkStatus"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
客户名称
</template>
{{ info.userName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
车牌号
</template>
{{ info.carNo }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
车系
</template>
{{ info.carBrandName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
手机号
</template>
{{ info.userMobile }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
创建时间
</template>
{{ parseTime(info.createTime, '{y}-{m}-{d}') }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
预计完工
</template>
{{ parseTime(info.outTime, '{y}-{m}-{d}') }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
合计金额
</template>
{{ info.totalPrice }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
参考成本
</template>
{{ info.cost }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
参考毛利
</template>
{{ info.profit }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
领料状态
</template>
<dict-tag :type="DICT_TYPE.REPAIR_PART_STATUS" v-model="info.partStatus"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
服务顾问
</template>
{{ info.adviserName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
所属门店
</template>
{{ info.corpId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
工单状态
</template>
<dict-tag :type="DICT_TYPE.REPAIR_TICKETS_STATUS" v-model="info.ticketsStatus"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
备注
</template>
{{ info.remark }}
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
<el-card class="box-card">
<!-- 卡片头 -->
<div slot="header" class="clearfix">
<i class="el-icon-plus"/>
<span>配件信息</span>
</div>
<!-- 卡片内容 -->
<div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
<el-form-item label="关键字" prop="query">
<el-input style="width: 20rem" type="text" placeholder="工单号、车牌号、联系电话" v-model="queryParams.query"/>
</el-form-item>
<el-form-item label="状态" prop="waresStatus">
<el-select v-model="queryParams.waresStatus">
<el-option v-for="item in this.getDictDatas(DICT_TYPE.TW_ITEM_STATUS)" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 操作 -->
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="items" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="序号" align="center" width="80">
<template scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="名称" align="center" prop="waresName"/>
<el-table-column label="规格" align="center" prop="wares.model" />
<el-table-column label="数量" align="center" prop="waresCount" />
<el-table-column label="状态" align="center" prop="waresStatus">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.TW_ITEM_STATUS" :value="scope.row.waresStatus" />
</template>
</el-table-column>
<el-table-column align="center" label="备注" prop="remark" />
<el-table-column align="center" label="客户可见" prop="isShow" v-if="userRole === 2">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isShow"
active-text="是"
inactive-text="否"
active-value="1"
inactive-value="0"
@change="changeIsShow(scope.row)"
>
</el-switch>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-dialog>
</div>
</template>
<script>
import {getTicketsById} from "@/api/repair/tickets/Tickets";
import {listTwItem, updateIsShow} from "@/api/repair/tickets/TWItem";
export default {
name: "TicketWaresShow",
props:{
userRole: Number
},
data(){
return{
info:{},
items:[],
dialogVisible: false,
queryParams: {
twId: null,
query: null,
waresStatus: null
},
showSearch: true,
loading: false
}
},
methods:{
async open(row){
if (row){
const res = await getTicketsById(row.ticketId)
this.info = res.data
this.queryParams.twId = row.id
await this.getTwItem()
}
this.dialogVisible = true
},
async getTwItem(){
try {
this.loading = true
const res = await listTwItem(this.queryParams)
this.items = res.data
}finally {
this.loading = false
}
},
handleQuery(){
this.getTwItem()
},
resetQuery(){
this.resetForm('queryForm')
this.handleQuery()
},
async changeIsShow(row){
try {
this.loading = true
await updateIsShow({id: row.id, isShow: row.isShow})
await this.getTwItem()
}finally {
this.loading = false
}
}
}
}
</script>
<style scoped lang="scss">
.box-card {
margin-bottom: 10px;
}
</style>

8
src/views/repair/tickets/TicketManager.vue
View File

@ -8,8 +8,10 @@
<TicketManagerItem :is-finish="true" :user-role="userRole"/>
</el-tab-pane>
<el-tab-pane label="领料申请单" name="getApply">
<TicketWares :type="true" :user-role="userRole"/>
</el-tab-pane>
<el-tab-pane label="退料申请单" name="backApply">
<TicketWares :type="false" :user-role="userRole"/>
</el-tab-pane>
</el-tabs>
</div>
@ -18,14 +20,16 @@
<script>
import TicketManagerItem from "@/views/repair/tickets/Components/TicketManagerItem.vue";
import {getUserRole} from "@/api/repair/tickets/Tickets";
import TicketWares from "@/views/repair/tickets/Components/TicketWares.vue";
export default {
name: "TicketManager",
components: {TicketManagerItem},
components: {TicketWares, TicketManagerItem},
data() {
return {
activeTab: 'unFinish',
userRole: -1
userRole: -1,
exportRole:[3, 4]
}
},
created() {

451
src/views/repair/tickets/form/TWOperate.vue Normal file
View File

@ -0,0 +1,451 @@
<template>
<div class="app-container">
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
<el-card class="box-card">
<!-- 卡片头 -->
<div slot="header" class="clearfix">
<i class="el-icon-plus"/>
<span>工单信息</span>
</div>
<!-- 卡片内容 -->
<div>
<el-descriptions class="margin-top" :column="4" :size="'medium'" border style="margin-bottom: 1rem">
<el-descriptions-item>
<template slot="label">
订单编号
</template>
{{ info.ticketNo }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
维修类别
</template>
<dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="info.repairType"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
状态
</template>
<dict-tag :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS" v-model="info.ticketsWorkStatus"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
客户名称
</template>
{{ info.userName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
车牌号
</template>
{{ info.carNo }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
车系
</template>
{{ info.carBrandName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
手机号
</template>
{{ info.userMobile }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
创建时间
</template>
{{ parseTime(info.createTime, '{y}-{m}-{d}') }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
预计完工
</template>
{{ parseTime(info.outTime, '{y}-{m}-{d}') }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
合计金额
</template>
{{ info.totalPrice }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
参考成本
</template>
{{ info.cost }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
参考毛利
</template>
{{ info.profit }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
领料状态
</template>
<dict-tag :type="DICT_TYPE.REPAIR_PART_STATUS" v-model="info.partStatus"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
服务顾问
</template>
{{ info.adviserName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
所属门店
</template>
{{ info.corpId }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
工单状态
</template>
<dict-tag :type="DICT_TYPE.REPAIR_TICKETS_STATUS" v-model="info.ticketsStatus"/>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
备注
</template>
{{ info.remark }}
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
<el-card class="box-card">
<!-- 卡片头 -->
<div slot="header" class="clearfix">
<el-row :gutter="2">
<el-col :span="12">
<el-button type="primary" size="mini" @click="openChooseWares">选择配件</el-button>
</el-col>
<el-col :span="12">
<el-form :model="formData" :inline="true">
<el-form-item label="备注" prop="remark">
<el-input style="width: 30rem" v-model="formData.remark" size="small"/>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<!-- 卡片内容 -->
<div>
<el-table :data="chooseList" :stripe="true" :show-overflow-tooltip="true"
@cell-mouse-enter="handleCellEnter"
@cell-mouse-leave="handleCellLeave"
@cell-click="handleCellClick"
>
<el-table-column label="序号" align="center">
<template scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="商品名称" prop="name" align="center"/>
<el-table-column label="规格" prop="model" align="center"/>
<el-table-column label="数量" prop="count" align="center">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.count"/>
<span class="item__txt">{{ scope.row.count }}</span>
</div>
</el-table-column>
<el-table-column label="备注" prop="remark" align="center">
<div v-if="scope.row.id" class="item" slot-scope="scope">
<el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.remark"/>
<span class="item__txt">{{ scope.row.remark }}</span>
</div>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="deleteItem(scope.$index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<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>
<!-- 配件选择弹窗 -->
<el-dialog title="配件选择" :visible.sync="chooseWaresVisible" width="60%" v-dialogDrag append-to-body>
<!-- 搜索工作栏 -->
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
<el-form-item label="名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery"/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getWaresList"></right-toolbar>
</el-row>
<el-table ref="multipleTable" @selection-change="handleSelectionChange" v-loading="loading" :data="partList" :stripe="true" :show-overflow-tooltip="true" @row-click="handleSelect">
<el-table-column type="selection" align="center" />
<el-table-column label="商品名称" prop="name" align="center"/>
<el-table-column label="规格" prop="model" align="center"/>
</el-table>
<pagination @pagination="getWaresList" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addWares" :disabled="formLoading">确 定</el-button>
<el-button @click="chooseWaresVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import TicketItem from "@/views/repair/tickets/Components/TicketItem.vue";
import {getWaresPage} from "@/api/repair/wares";
import {updateTicketWares} from "@/api/repair/tickets/TicketWares";
import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
export default {
// 工单配件操作
name: "TWOperate",
components: {TicketItem},
data(){
return{
dialogVisible: false,
dialogTitle: null,
info:{},
partList: [],
formLoading: false,
chooseWaresVisible: false,
queryParams:{
pageNo: 1,
pageSize: 10,
name:undefined
},
showSearch: true,
loading: false,
total: 0,
multipleSelection: [],
chooseList: [],
clickCellMap: {},
editProp: ['count', 'remark'],
formData: {
no: null,
ticketId: null,
type: null,
status: null,
items: [],
remark: null,
adviserId: null,
adviserName: null
}
}
},
methods:{
async open(row){
this.reset()
if (row){
this.info = row
}
// 退料需要查工单的配件信息回显
this.dialogTitle = row.type ? "领料申请单" : "退料申请单"
this.dialogVisible = true
},
async submitForm(){
try {
if (!this.chooseList || this.chooseList.length <= 0){
this.$modal.msgError("没有选择任何配件")
return
}
this.createInit()
await updateTicketWares(this.formData)
this.$modal.msgSuccess("申请成功");
this.dialogVisible = false
this.$emit('success')
}catch{}
},
createInit(){
this.formData = {
no: null,
ticketId: null,
type: null,
status: null,
items: [],
remark: this.formData.remark,
adviserId: null,
adviserName: null
}
this.formData.no = createUniqueCodeByHead(this.info.type ? 'LLSQ' : 'TLSQ')
this.formData.ticketId = this.info.id
this.formData.type = this.info.type ? '01' : '02'
this.formData.status = '01'
this.formData.adviserId = this.info.adviserId
this.formData.adviserName = this.info.adviserName
this.formData.items = [
...this.chooseList.map(item => {
return {
waresId: item.id,
waresName: item.name,
waresCount: item.count,
waresStatus: "02",
remark: item.remark,
isShow: '1'
}
})
]
},
reset(){
this.partList = []
this.chooseList = []
this.info = {}
this.formData = {
no: null,
ticketId: null,
type: null,
status: null,
items: [],
remark: null,
adviserId: null,
adviserName: null
}
},
addWares(){
this.chooseList.push(
...this.multipleSelection.map(item => {
return {
...item,
count: 1
}
})
)
this.chooseWaresVisible = false
},
handleQuery(){
this.queryParams.pageNo = 1
this.getWaresList()
},
resetQuery(){
this.resetForm('queryForm')
this.handleQuery()
},
async getWaresList(){
try{
this.loading = true
const res = await getWaresPage(this.queryParams)
this.partList = res.data.records
this.total = res.data.total
}finally {
this.loading = false
}
},
handleSelect(row){
this.$refs.multipleTable.toggleRowSelection(row);
},
handleSelectionChange(val){
this.multipleSelection = val;
},
openChooseWares() {
this.chooseWaresVisible = true
this.resetQuery()
},
deleteItem(index){
this.chooseList.splice(index, 1)
},
/** 鼠标移入cell */
handleCellEnter(row, column, cell, event) {
const property = column.property
if (row.id && this.editProp.includes(property)) {
cell.querySelector('.item__txt').classList.add('item__txt--hover')
}
},
/** 鼠标移出cell */
handleCellLeave(row, column, cell, event) {
const property = column.property
if (row.id && this.editProp.includes(property)) {
cell.querySelector('.item__txt').classList.remove('item__txt--hover')
}
},
/** 点击cell */
handleCellClick(row, column, cell, event) {
const property = column.property
if (this.editProp.includes(property)) {
if (!row.id || property !== 'goods') {
// 保存cell
this.saveCellClick(row, cell)
cell.querySelector('.item__txt').style.display = 'none'
cell.querySelector('.item__input').style.display = 'inline'
cell.querySelector('input').focus()
}
}
},
/** 取消编辑状态 */
cancelEditable(cell) {
cell.querySelector('.item__txt').style.display = 'inline'
cell.querySelector('.item__input').style.display = 'none'
},
/** 保存进入编辑的cell */
saveCellClick(row, cell) {
const id = row.id
if (this.clickCellMap[id] !== undefined) {
if (!this.clickCellMap[id].includes(cell)) {
this.clickCellMap[id].push(cell)
}
} else {
this.clickCellMap[id] = [cell]
}
},
/** 保存数据 */
save(row) {
const id = row.id
// 取消本行所有cell的编辑状态
this.clickCellMap[id].forEach(cell => {
this.cancelEditable(cell)
})
this.clickCellMap[id] = []
},
}
}
</script>
<style scoped lang="scss">
.box-card {
margin-bottom: 10px;
}
.item {
.item__input {
display: none;
width: 100px;
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__inner {
height: 24px !important;
}
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__suffix {
i {
font-size: 12px !important;
line-height: 26px !important;
}
}
}
.item__txt {
box-sizing: border-box;
border: 1px solid transparent;
width: 100px;
line-height: 24px;
padding: 0 8px;
}
.item__txt--hover {
border: 1px solid #dddddd;
border-radius: 4px;
cursor: text;
}
}
</style>