lanan-system-vue/src/views/repair/tickets/form/UpdateRepair.vue

<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-table v-loading="loading" :data="workerList" :stripe="true" :show-overflow-tooltip="true"
                    @row-click="handleClick">
            <el-table-column width="55">
              <template slot-scope="scope">
                <el-radio
                  class="radio"
                  :label="scope.row"
                  v-model="selectedRows"
                >&emsp;&emsp;&emsp;
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="userName"/>
            <el-table-column label="工种" align="center" prop="workType">
              <template v-slot="scope">
                <dict-tag :type="DICT_TYPE.REPAIR_WORK_TYPE" :value="scope.row.workType"/>
              </template>
            </el-table-column>
            <el-table-column label="角色" align="center" prop="isLeads">
              <template v-slot="scope">
                <el-tag v-if="scope.row.isLeads == '1'" type="success">班组长</el-tag>
                <el-tag v-if="scope.row.isLeads == '0'" type="warning">维修工</el-tag>
              </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>
  </div>
</template>

<script>
import {listByTicketId, listByLeads} from "@/api/repair/repairworker";
import {updateRepair} from "@/api/repair/tickets/Tickets";

export default {
  name: "UpdateRepair",
  data() {
    return {
      dialogVisible: false,
      formLoading: false,
      info: {},
      workerList: [],
      loading: false,
      selectedRows: null,
      formData: {
        id: null,
        nowRepairId: null,
        nowRepairName: null,
      }
    }
  },
  methods: {
    async open(row) {
      this.dialogVisible = true
      if (row) {
        try {
          this.info = row
          this.loading = true
          if (!row.isLeads) {
            const res = await listByTicketId(row.id)
            this.workerList = res.data
          } else {
            const res = await listByLeads()
            this.workerList = res.data
          }
        } finally {
          this.loading = false
        }
      }
    },
    async submitForm() {
      try {
        if (!this.selectedRows) {
          this.$modal.msgError("没有指派员工")
          return
        }
        this.initFormData()
        await updateRepair(this.formData)
        this.$modal.msgSuccess("指派成功")
        this.dialogVisible = false
        this.$emit("success")
      } catch {

      }
    },
    initFormData() {
      this.formData.id = this.info.id
      this.formData.nowRepairId = this.selectedRows.userId
      this.formData.nowRepairName = this.selectedRows.userName
    },
    handleClick(row) {
      this.selectedRows = row
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
}
</style>