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_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="180">
        <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'" 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>
        </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"/>
  </div>
</template>

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

export default {
  name: "TicketTable",
  components: {TicketsShow},
  props: {
    TicketType: {
      type: String,
      defaultValue: 'tp',
      required: true
    },
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        id: null,
        ticketsStatus: null,
        remark: null
      }
    }
  },
  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 {
      }
    },
    handlePaid(row) {
      this.$prompt('结算备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        const data = {}
        data['id'] = row.id
        data['remark'] = value
        data['ticketsStatus'] = '02'
        this.doPaid(data)
      }).catch(() => {
      })
    },
    async doPaid(data) {
      try {
        await setTicketsPaid(data)
        this.$modal.msgSuccess("结算成功")
        this.$emit("setVoid")
      } catch {
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>