lanan-system-vue/src/views/repair/tickets/Components/TicketTable.vue

<template>
  <div>
    <!-- 已结 -->
    <!--    <el-table v-if="TicketType === 'tp'" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">-->
    <!--      <el-table-column label="序号" align="center">-->
    <!--        <template scope="scope">-->
    <!--          <span>{{ scope.$index + 1 }}</span>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column label="服务顾问" align="center" prop="adviserName" width="180" />-->
    <!--      <el-table-column label="单号" align="center" prop="ticketNo" width="200" />-->
    <!--      <el-table-column label="车牌号" align="center" prop="carNo" width="180" />-->
    <!--      <el-table-column label="姓名" align="center" prop="userName" width="180" />-->
    <!--      <el-table-column label="车系" align="center" prop="carBrandName" width="180" />-->
    <!--      <el-table-column label="手机号" align="center" prop="userMobile" width="180" />-->
    <!--      <el-table-column label="消费项目" align="center" prop="repairType" width="180">-->
    <!--        <template slot-scope="scope">-->
    <!--          <dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="scope.row.repairType" />-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column label="规格" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="类型" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="数量" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="金额" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="合计" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="成本" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="毛利" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="支付金额" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="优惠" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="本次里程" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="销售人员" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="施工人员" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="备注" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="结算时间" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="创建时间" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="业务来源" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="门店" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="结算人" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="操作" fixed="right" align="center" width="180">-->
    <!--        <template v-slot="scope">-->
    <!--          <el-button size="mini" type="text" icon="el-icon-delete"-->
    <!--          >查看-->
    <!--          </el-button>-->
    <!--          <el-button size="mini" type="text" icon="el-icon-delete"-->
    <!--          >返结-->
    <!--          </el-button>-->
    <!--          <el-button size="mini" type="text" icon="el-icon-delete"-->
    <!--          >作废-->
    <!--          </el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->
    <!-- TODO 未结(先共用) -->
    <!--    <el-table v-if="TicketType === 'tu'" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">-->
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="序号" align="center">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" align="center" prop="ticketNo" width="200"/>
      <el-table-column label="维修类别" align="center" prop="repairType" width="180">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="scope.row.repairType"/>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="ticketsWorkStatus" width="180">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS" v-model="scope.row.ticketsWorkStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="客户名称" align="center" prop="userName" width="180"/>
      <el-table-column label="车牌号" align="center" prop="carNo" width="180"/>
      <el-table-column label="车系" align="center" prop="carBrandName" width="180"/>
      <el-table-column label="手机号" align="center" prop="userMobile" width="180"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column label="预计完工" align="center" prop="outTime" width="180">
        <template slot-scope="scope">
          {{ parseTime(scope.row.outTime, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column label="合计金额" align="center" prop="totalPrice" width="180"/>
      <el-table-column label="参考成本" align="center" prop="cost" width="180"/>
      <el-table-column label="参考毛利" align="center" prop="profit" width="180"/>
      <el-table-column label="领料状态" align="center" prop="partStatus" width="180">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.REPAIR_PART_STATUS" v-model="scope.row.partStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="服务顾问" align="center" prop="adviserName" width="180"/>
      <el-table-column label="备注" align="center" prop="remark" width="180"/>
      <el-table-column label="所属门店" align="center" prop="corpId" width="180"/>
      <el-table-column label="工单状态" align="center" prop="ticketsStatus" width="180">
        <template slot-scope="scope">
          <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_STATUS" v-model="scope.row.ticketsStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="230">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)"
          >查看
          </el-button>
          <el-button v-if="TicketType === 'tu' && isWXCW && !scope.row.payType" size="mini" type="text" icon="el-icon-finished"
                     @click="handlePaid(scope.row)"
          >结算
          </el-button>
          <!--          <el-button v-if="TicketType === 'tp'" size="mini" type="text" icon="el-icon-refresh-right"-->
          <!--          >返结-->
          <!--          </el-button>-->
          <el-button v-if="TicketType !== 'tv'" size="mini" type="text" icon="el-icon-delete"
                     @click="handleVoid(scope.row)"
          >作废
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-printer"
                     @click="handlePrint(scope.row)"
          >打印
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 作废 -->
    <!--    <el-table v-if="TicketType === 'tv'" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">-->
    <!--      <el-table-column label="序号" align="center">-->
    <!--        <template scope="scope">-->
    <!--          <span>{{ scope.$index + 1 }}</span>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column label="单号" align="center" prop="ticketNo" width="200" />-->
    <!--      <el-table-column label="车牌" align="center" prop="carNo" width="180" />-->
    <!--      <el-table-column label="客户" align="center" prop="userName" width="180" />-->
    <!--      <el-table-column label="数量" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="应收" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="现金" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="刷银行卡" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="挂账金额" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="优惠" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="折扣" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="实收" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="作废时间" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="作废人" align="center" prop="soNo" width="180" />-->
    <!--      <el-table-column label="作废备注" align="center" prop="remark" width="180" />-->
    <!--    </el-table>-->
    <TicketsShow ref="ticketsShow"/>
    <el-dialog title="结算信息" :visible.sync="dialogVisible" width="40%" v-dialogDrag append-to-body>
      <el-form :model="formData" ref="formRef" :inline="true" label-width="10rem" :rules="formRules">
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="结算方法" prop="payType">
              <el-select v-model="formData.payType">
                <el-option v-for="item in this.getDictDataByCode(DICT_TYPE.REPAIR_PAY_TYPE)" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="1">
          <el-col :span="24">
            <el-form-item label="结算备注" prop="remark">
              <el-input style="width:30rem" type="textarea" v-model="formData.remark" :autosize="{ minRows: 4, maxRows: 8}"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doPaid">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {setTicketsVoid, setTicketsPaid, setTicketsPrint} from '@/api/repair/tickets/Tickets'
import TicketsShow from "@/views/repair/tickets/Components/TicketsShow.vue";
import {getByNameAndMobile} from "@/api/base/customer";

export default {
  name: "TicketTable",
  components: {TicketsShow},
  props: {
    TicketType: {
      type: String,
      defaultValue: 'tp',
      required: true
    },
    list: {
      type: Array,
      default: []
    },
    isWXCW:{
      type:Boolean
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        id: null,
        ticketsStatus: null,
        remark: null,
        payType: null
      },
      formRules:{
        payType: [{required: true, message: '支付方式不能为空', trigger: 'blur'}]
      },
      dialogVisible: false,
      isHangAccount: false
    }
  },
  methods: {
    handleShow(row) {
      this.$refs.ticketsShow.open(row)
    },
    async handleVoid(row) {
      this.$prompt('作废备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.formData.id = row.id
        this.formData.remark = value
        this.formData.ticketsStatus = "03"
        this.doVoid()
      }).catch(() => {
      })
    },
    async doVoid() {
      try {
        await setTicketsVoid(this.formData)
        this.$modal.msgSuccess("作废成功")
        this.$emit("setVoid")
      } catch {
      }
    },
    /**
     * 打印
     */
    async handlePrint(row) {
      window.open(process.env.VUE_APP_BASE_API + '/admin-api/repair/tickets/print/'+row.id)
    },

    async doPrint(data) {
      try {
        await setTicketsPrint(data)
        this.$modal.msgSuccess("导出打印成功")
        this.$emit("setPrint")
      } catch {
      }
    },

    handlePaid(row) {
      this.formData = {
        id: null,
        ticketsStatus: null,
        remark: null,
        payType: null
      }
      this.formData['id'] = row.id
      this.formData['ticketsStatus'] = '02'
      this.dialogVisible = true
      this.checkIsHangAccount(row)
    },
    async checkIsHangAccount(row){
      const data = {
        cusName: row.userName, phoneNumber: row.userMobile
      }
      const res = await getByNameAndMobile(data)
      this.isHangAccount = res.data.isHangAccount === '1'
    },
    async doPaid() {
      try {
        await this.$refs['formRef'].validate()
        await setTicketsPaid(this.formData)
        this.$modal.msgSuccess("结算成功")
        this.dialogVisible = false
        this.$emit("setVoid")
      }catch{}
    },
    getDictDataByCode(code){
      const data = this.getDictDatas(code);
      if (this.isHangAccount){
        return data
      }else {
        return data.filter(item => !item.label.includes("挂账"))
      }
    },
  }
}
</script>

<style scoped lang="scss">

</style>