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

src/api/repair/tickets/TWItem.js

@@ -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
+  })
+}

src/api/repair/tickets/TicketWares.js

@@ -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'
+  })
+}

src/utils/dict.js

@@ -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
   //卡券类型

src/views/repair/tickets/Components/TicketItem.vue

@@ -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)
+        if (val && val.length > 1){
-        const coupons = val.filter(item => item.coupon).map(item => item.coupon)
+          this.$emit("tableData", val)
-        if (coupons && coupons.length > 0) {
+          const coupons = val.filter(item => item.coupon).map(item => item.coupon)
-          this.$emit("changeCoupon", coupons)
+          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
+          }
+        }]
       }
     }
   },

src/views/repair/tickets/Components/TicketManagerItem.vue

@@ -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
       }

src/views/repair/tickets/Components/TicketWares.vue

@@ -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>

src/views/repair/tickets/Components/TicketWaresShow.vue

@@ -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>

src/views/repair/tickets/TicketManager.vue

@@ -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() {

src/views/repair/tickets/form/TWOperate.vue

@@ -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>