更新代码

2024-09-19 19:46:32 +08:00 · 2024-09-19 19:46:32 +08:00 · 4ee9a84b56
commit 4ee9a84b56
parent 6ab9561cef
8 changed files with 293 additions and 79 deletions
--- a/src/api/base/customer/index.js
+++ b/src/api/base/customer/index.js
@ -67,11 +67,3 @@ export function exportCustomerMainExcel(params) {
    responseType: 'blob'
  })
 }
-
-// 用户列表
-export function getCustomerList(){
-  return request({
-    url: "/base/custom/list",
-    method: "get"
-  })
-}
--- a/src/views/repair/Components/CarChoose.vue
+++ b/src/views/repair/Components/CarChoose.vue
@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-select v-model="carSelected" clearable>
+      <el-option v-for="car in carList" :key="car.id" :label="car.licenseNumber" :value="car.id"/>
+    </el-select>
+  </div>
+</template>
+
+<script>
+
+import {remindCarMainPage} from "@/api/base/carmain";
+
+export default {
+  name: "CarChoose",
+  props: {
+    value: {
+      type: Object
+    },
+    cusName: {
+      type: String,
+    }
+  },
+  watch: {
+    carSelected(val) {
+      const car = this.carList.find(item => item.id === val);
+      this.$emit('input', car);
+    },
+    value(val) {
+      this.carSelected = val ? val.id : null;
+    },
+    cusName(val, old) {
+      if (val !== old){
+        this.carSelected = null
+        this.getCarList()
+      }
+    }
+  },
+  data() {
+    return {
+      carSelected: null,
+      carList: [],
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        cusName: null
+      },
+      total: 0
+    }
+  },
+  methods: {
+    async getCarList() {
+      try {
+        if (this.cusName) {
+          this.queryParams["cusName"] = this.cusName
+          const res = await remindCarMainPage(this.queryParams)
+          this.carList = res.data.records
+          this.total = res.data.total
+        }
+      } catch {
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/src/views/repair/Components/PartChoose.vue
+++ b/src/views/repair/Components/PartChoose.vue
@ -1,5 +1,5 @@
 <template>
-  <el-select v-model="partSelected" ref="selectTable" clearable style="width: 45rem">
+  <el-select v-model="partSelected" ref="selectTable" clearable :style="'width: ' + selectWidth" @blur="$emit('input-blur', $event)">
    <el-option style="display: none" v-for="part in partList" :key="part.id" :label="part.name" :value="part.id"/>
    <el-table :data="partList" style="width: 100%" @row-click="handleSelectionChange">
      <el-table-column label="序号" align="center" width="80">
@ -22,6 +22,12 @@
 <script>
 export default {
  name: "PartChoose",
+  props: {
+    selectWidth: {
+      type: String,
+      default: "45rem"
+    }
+  },
  data() {
    return {
      partSelected: null,
@ -35,7 +41,7 @@ export default {
          model: "12321",
          price: "100",
          type: "不知道",
-          unit: "个",
+          unit: "双",
          warehouse: "6335b519fde3cabf298e763bc1c38df1",
          miniStock: 100,
          maxStock: 100,
@ -85,6 +91,7 @@ export default {

    },
    handleSelectionChange(data) {
+      this.$emit("input", data)
      this.$emit("selected", data)
      this.$refs.selectTable.blur()
    }
--- a/src/views/repair/Components/StaffChoose.vue
+++ b/src/views/repair/Components/StaffChoose.vue
@ -13,7 +13,6 @@ export default {
  props:{
    value: {
      type: Object,
-      defaultValue: null
    }
  },
  data() {
--- a/src/views/repair/Components/UserChoose.vue
+++ b/src/views/repair/Components/UserChoose.vue
@ -6,20 +6,33 @@

 <script>

-import {getCustomerList} from "@/api/base/customer";
+import {getCustomerMainPage} from "@/api/base/customer";

 export default {
  name: "UserChoose",
+  props:{
+    value:{
+      type: Object,
+    }
+  },
  data() {
    return {
      userList: [],
      userSelected: undefined,
+      queryParams:{
+        pageNo: 1,
+        pageSize: 10
+      },
+      total: 0
    }
  },
  watch:{
    userSelected(val){
      const user = this.userList.find(item => item.id === val)
-      this.$emit("selected", user)
+      this.$emit("input", user)
+    },
+    value(val){
+      this.userSelected = val ? val.id : null
    }
  },
  mounted() {
@ -27,8 +40,9 @@ export default {
  },
  methods: {
    async listCustomer(){
-      const res = await getCustomerList()
-      this.userList = res.data
+      const res = await getCustomerMainPage(this.queryParams)
+      this.userList = res.data.records
+      this.total = res.data.total
    }
  }
 }
--- a/src/views/repair/tickets/Components/TicketItem.vue
+++ b/src/views/repair/tickets/Components/TicketItem.vue
@ -1,26 +1,33 @@
 <template>
  <div>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table v-loading="loading" :data="list" :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="getLabelName">
-        <PartChoose />
+      <el-table-column align="center" :label="getLabelName" width="200" prop="goods">
+        <div class="item" slot-scope="scope">
+          <PartChoose @input-blur="save(scope.row)" class="item__input" @selected="getPart" :select-width="'15rem'"/>
+          <span class="item__txt">{{ scope.row.name ? scope.row.name : scope.row.goods }}</span>
+        </div>
      </el-table-column>
-      <el-table-column label="规格" />
-      <el-table-column label="编码" />
-      <el-table-column label="数量" />
-      <el-table-column label="单位" />
-      <el-table-column label="折扣" />
-      <el-table-column label="金额" />
-      <el-table-column label="施工人员" />
-      <el-table-column label="销售人员" />
-      <el-table-column label="类型" />
-      <el-table-column label="账类" />
-      <el-table-column label="状态" />
-      <el-table-column label="备注" />
+      <el-table-column align="center" label="规格" width="180" prop="model"/>
+      <el-table-column align="center" label="编码" width="180" prop="code"/>
+      <el-table-column align="center" label="数量" width="180" prop="count"/>
+      <el-table-column align="center" label="单位" width="180" prop="unit"/>
+      <el-table-column align="center" label="折扣" width="180"/>
+      <el-table-column align="center" label="金额" width="180"/>
+      <el-table-column align="center" label="施工人员" width="180"/>
+      <el-table-column align="center" label="销售人员" width="180"/>
+      <el-table-column align="center" label="类型" width="180"/>
+      <el-table-column align="center" label="账类" width="180"/>
+      <el-table-column align="center" label="状态" width="180"/>
+      <el-table-column align="center" label="备注" width="180"/>
      <el-table-column label="操作" fixed="right" align="center" width="150">
        <template v-slot="scope">
          <el-button size="mini" type="text" icon="el-icon-delete"
@ -44,14 +51,18 @@ export default {
  props:{
    itemType:{
      type: String,
-      defaultValue: 'project',
+      default: 'project',
      required: true
    }
  },
  data() {
    return {
      loading: false,
-      list: []
+      list: [{}],
+      // 需要编辑的属性
+      editProp: ["goods"],
+      // 保存进入编辑的cell
+      clickCellMap: {}
    }
  },
  computed:{
@ -68,10 +79,95 @@ export default {
      }
    }
  },
-  methods: {}
+  methods: {
+    /** 鼠标移入cell */
+    handleCellEnter(row, column, cell, event) {
+      const property = column.property
+      if (this.editProp.includes(property)) {
+        cell.querySelector('.item__txt').classList.add('item__txt--hover')
+      }
+    },
+    /** 鼠标移出cell */
+    handleCellLeave(row, column, cell, event) {
+      const property = column.property
+      if (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)) {
+        // 保存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] = []
+    },
+    getPart(data){
+      this.list.splice(this.list.length - 1, 0, data)
+    }
+  }
 }
 </script>

 <style scoped lang="scss">
+.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>
--- a/src/views/repair/tickets/Components/UserInfo.vue
+++ b/src/views/repair/tickets/Components/UserInfo.vue
@ -10,85 +10,99 @@
        <template slot="label">
          用户选择
        </template>
-        <UserChoose @selected="getUser"/>
+        <UserChoose v-model="selectUser"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
-          姓名
+          车辆选择
        </template>
-        <el-input disabled />
+        <CarChoose v-model="selectCar" :cus-name="selectUser.cusName"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          手机
        </template>
-        <el-input disabled />
+        <el-input disabled v-model="selectUser.phoneNumber"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          车架号
        </template>
-        <el-input disabled />
+        <el-input disabled v-model="selectCar.vin"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          车牌
        </template>
-        <el-input disabled />
+        <el-input disabled v-model="selectCar.licenseNumber"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          品牌车系
        </template>
-        <el-input disabled />
+        <el-input disabled v-model="selectCar.modelStr"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          保险到期
        </template>
-        <el-input disabled />
+        <el-date-picker disabled
+                        v-model="selectCar.insuranceExpiryDate"
+                        type="date">
+        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          年检到期
        </template>
-        <el-input disabled />
+        <el-date-picker disabled
+                        v-model="selectCar.nextInspectionDate"
+                        type="date">
+        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          进厂时间
        </template>
-        <el-input disabled />
+        <el-date-picker
+          v-model="formData.inTime"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          预计完工
        </template>
-        <el-input disabled />
+        <el-date-picker
+          v-model="formData.outTime"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          上次里程
        </template>
-        <el-input disabled />
+        <el-input v-model="selectCar.maintenanceMileage"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          本次里程
        </template>
-        <el-input disabled />
+        <el-input v-model="selectCar.newMaintenanceMileage"/>
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template slot="label">
          备注
        </template>
-        <el-input disabled />
+        <el-input v-model="formData.remark"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          服务顾问
        </template>
-        <StaffChoose />
+        <StaffChoose v-model="selectStaff"/>
      </el-descriptions-item>
    </el-descriptions>
    <el-row v-if="createTicketType" :gutter="5" style="margin-bottom: 1rem">
@ -104,12 +118,14 @@
      </el-col>
      <el-col :span="4.8">
        <el-select v-model="formData.partDisposal" size="small">
-          <el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_PART_DISPOSAL)" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_PART_DISPOSAL)" :key="item.value"
+                     :label="item.label" :value="item.value"/>
        </el-select>
      </el-col>
      <el-col :span="4.8">
        <el-select v-model="formData.repairType" size="small">
-          <el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label"
+                     :value="item.value"/>
        </el-select>
      </el-col>
    </el-row>
@ -118,19 +134,24 @@
    <TicketItem v-if="createTicketType" item-type="other"/>
    <el-row :gutter="createTicketType ? 2 : 3" style="margin-top: 1rem">
      <el-col :span="createTicketType ? 12 : 16">
-        <el-descriptions class="margin-top" :column="createTicketType ? 2 : 3" border :size="'medium'" style="margin-bottom: 1rem">
+        <el-descriptions class="margin-top" :column="createTicketType ? 2 : 3" border :size="'medium'"
+                         style="margin-bottom: 1rem">
          <el-descriptions-item>
            <template slot="label">
              工单号
            </template>
-            <el-select size="small" >
+            <el-select v-model="formData.ticketNo" size="small">
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              时间
            </template>
-            <el-input size="small" />
+            <el-date-picker
+              v-model="formData.ticketTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>
          </el-descriptions-item>
          <el-descriptions-item v-if="!createTicketType">
            <template slot="label">
@ -181,31 +202,49 @@
 import UserChoose from "@/views/repair/Components/UserChoose.vue";
 import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
 import TicketItem from "@/views/repair/tickets/Components/TicketItem.vue";
+import CarChoose from "@/views/repair/Components/CarChoose.vue";
+import {parseTime} from "../../../../utils/ruoyi";

 export default {
  name: "UserInfo",
-  components: {TicketItem, StaffChoose, UserChoose},
+  components: {CarChoose, TicketItem, StaffChoose, UserChoose},
  props: {
    createTicketType: {
      type: Boolean,
-      defaultValue: true,
      required: true,
    }
  },
+  watch: {
+    selectUser(val) {
+      if (!val) {
+        this.selectUser = {}
+      }
+    },
+    selectCar(val) {
+      if (!val) {
+        this.selectCar = {}
+      }
+    }
+  },
  data() {
    return {
      formData: {
        endCheck: 1,
        partDisposal: '01',
        repairType: '01',
-      }
+        ticketNo: null,
+        remark: null,
+        inTime: Date.now(),
+        outTime: null,
+        ticketTime: Date.now()
+      },
+      selectUser: {},
+      selectCar: {},
+      selectStaff: {},
    }
  },
  methods: {
-    // 选择用户
-    getUser(data){
-      console.log(data)
-    }
+    parseTime
  }
 }
 </script>
--- a/src/views/repair/tickets/CreateTicket.vue
+++ b/src/views/repair/tickets/CreateTicket.vue
@ -6,11 +6,10 @@

 <script>
 import UserInfo from "@/views/repair/tickets/Components/UserInfo.vue";
-import TicketItem from "@/views/repair/tickets/Components/TicketItem.vue";

 export default {
  name: "CreateTicket",
-  components: {TicketItem, UserInfo},
+  components: {UserInfo},
  data() {
    return {}
  },