lanan-system-vue/src/views/partner/workOrder.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="车牌号" prop="carNum">
        <el-input
          v-model="queryParams.carNum"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="检测类型" prop="goodsTitle">
        <el-input
          v-model="queryParams.goodsTitle"
          placeholder="请输入检测类型"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户来源" prop="customerSource">
        <el-select v-model="queryParams.customerSource" placeholder="请选择客户来源">
          <el-option
            v-for="dict in customerData"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
        <template slot-scope="scope">
          <el-select
            v-model="queryParams.payType"
            placeholder="支付方式"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.pay_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="检测时间" prop="startTime">
        <el-date-picker
          v-model="queryParams.jcTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="角色" prop="status">
        <el-select
          v-model="queryParams.roleId"
          placeholder="角色"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.inspection_use_role.slice(0,3)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >录入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出
        </el-button>
      </el-col>
      <div style="margin-left: 72%;font-weight: bold">
      <span>
         公示应收价格汇总：{{ moneyData.goodsPriceSum / 100 }} 元
      </span>
        <span style="margin-left: 3%">
      实付金额汇总：{{ moneyData.payMoneySum / 100 }} 元
      </span>

      </div>
    </el-row>


    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="车牌号" align="center" prop="carNum"/>
      <el-table-column label="客户来源" align="center" prop="customerSource">
      </el-table-column>
      <el-table-column label="检测结果" align="center" prop="isPass">
        <template slot-scope="scope">
          <span v-if="scope.row.isPass =='0'">不合格</span>
          <span v-else-if="scope.row.isPass =='1'">合格</span>
          <span v-else>进行中</span>
        </template>
      </el-table-column>
      <el-table-column label="车辆类型" align="center" prop="goodsTitle"/>
      <el-table-column label="检测项目" align="center" prop="skuName"/>
      <el-table-column label="公示应收价格" align="center" prop="realPayMoney" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.goodsPrice / 100 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实收金额" align="center" prop="realPayMoney">
        <template slot-scope="scope">
          <span>{{ scope.row.realPayMoney / 100 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收款时间" align="center" prop="payTime"/>
      <!--      <el-table-column label="客户" align="center" prop="buyName" />-->
      <el-table-column label="客户手机号" align="center" prop="buyPhone"/>
      <!--      <el-table-column label="接待员" align="center" prop="workerName"/>-->
      <el-table-column label="接待员手机号" align="center" prop="workerPhone"/>
      <el-table-column label="支付方式" align="center" prop="payType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pay_type" :value="scope.row.payType"/>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center" prop="startTime"/>
      <el-table-column label="结束时间" align="center" prop="endTime"/>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="watchWork(scope.row)"
          >打印
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="xinWork(scope.row)"
          >结算
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status&&scope.row.status == 1&&scope.row.isPass&&scope.row.isPass ==1&&scope.row.makeCert!=1"

            @click="zhizheng(scope.row)"
          >制证
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"

            @click="detail(scope.row)"
          >详情
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.status&&scope.row.status == 0"
            @click="jieshu(scope.row)"
          >完工
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改道路救援模块对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>

      <div v-html="htmlStr" id="printMe"></div>

      <el-button type="primary" style="margin-left: 90%;margin-top:20px " v-print="'#printMe'" size="small">打印
      </el-button>

    </el-dialog>
    <!--  弹窗  -->
    <el-dialog :title="title" :visible.sync="openhe" width="600px" append-to-body>
      <el-form ref="form" :model="offline" :rules="rules" label-width="120px">

        <div style="box-sizing: border-box;padding-left: 120px;margin: 10px auto">
          <el-select v-model="isPass" placeholder="是否合格">
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-if="isPass == 0" style="box-sizing: border-box;padding-left: 120px;margin: 10px auto">
          <el-select v-model="isRetrial" placeholder="重审/退办">
            <el-option
              v-for="item in optionsss"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>


        <div style="margin-top: 10px">
          <el-form-item label="说明">
            <el-input type="text" v-model="remark"></el-input>
          </el-form-item>
        </div>
        <el-button type="primary" @click="jieshutij()">确定</el-button>
      </el-form>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openxin" width="800px" append-to-body>
      <el-form ref="form" :model="offline" :rules="rules" label-width="120px">
        <el-form-item label="商品价格">
          <span>{{ goodsPrice / 100 }}</span>
        </el-form-item>
        <el-form-item label="优惠金额">
          <el-input-number :min="0" @input="jisuan" :max="goodsPrice/100" type="text"
                           v-model="reduceMoney"></el-input-number>
        </el-form-item>
        <el-form-item label="实付金额">
          <el-input-number type="text" v-model="payMoney"></el-input-number>
        </el-form-item>
        <el-form-item label="付款方式">
          <!--        <el-input type="text" v-model="receivablesAccount"></el-input>-->
          <el-select v-model="payType" placeholder="请选择付款方式">
            <el-option
              v-for="dict in dict.type.pay_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收款账号">
          <el-select v-model="receivablesAccount" placeholder="请选择收款账号">
            <el-option
              v-for="item in BankAccountList"
              :key="item.key"
              :label="item.key"

            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="text" v-model="payRemark"></el-input>
        </el-form-item>
        <el-button type="primary" @click="tijiao()">确 定</el-button>
      </el-form>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="opendetail" width="800px" append-to-body class="custom-dialog">
      <div v-for="(item, index) in detailForm" :key="index" class="dialog-item">
        <div class="item-header">
          <span class="item-title">{{ item.title }}</span>
          <span class="item-create-time">{{ item.createTime }}</span>
        </div>
        <div class="item-content">
          <span>{{ item.content }}</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="addOpen" width="600px" append-to-body @close="cancel">

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="客户姓名">
          <el-input type="text" v-model="form.buyName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input type="text" v-model="form.buyPhone"></el-input>
        </el-form-item>
        <el-form-item label="车牌号码">
          <el-input type="text" v-model="form.carNum"></el-input>
        </el-form-item>
        <el-form-item label="品牌型号">
          <el-input type="text" v-model="form.carModel"></el-input>
        </el-form-item>
        <el-form-item label="车辆识别代号">
          <el-input type="text" v-model="form.carIdNo"></el-input>
        </el-form-item>
        <el-form-item label="住址">
          <el-input type="text" v-model="form.userAddress"></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input type="text" v-model="form.unitName"></el-input>
        </el-form-item>
        <el-form-item label="使用性质">

          <el-select v-model="form.carNature" placeholder="请选择使用性质">
            <el-option
              v-for="dict in dict.type.car_use_nature"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择客户来源">
          <el-select v-model="form.customerSource" placeholder="请选择客户来源">
            <el-option
              v-for="dict in customerData"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代办人手机号">
          <el-input v-model="form.otherPhone" placeholder="请选择代办人手机号"/>
        </el-form-item>

        <el-form-item label="选择商品">
          <el-cascader
            v-model="form.skuId"
            :options="options"
            @change="handleChange" :disabled="!isInsert"></el-cascader>
        </el-form-item>
        <el-form-item label="新旧车">
          <el-select v-model="form.carStatus" placeholder="请选择新旧车">
            <el-option
              v-for="dict in dict.type.car_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="引车员">
          <el-select v-model="form.leadManId" placeholder="请选择引车员">
            <el-option
              v-for="dict in leadManList"
              :key="dict.id"
              :label="dict.nickname"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="请选择检测项目">-->
          <!-- 可选检测项目 -->
        <div v-if="isInsert">
        <div class="available-projects-title">可选检测项目：</div>
        <div class="available-projects-container">
          <div
            class="project-button"
            :class="{ 'selected' : selectInspectionProjectIds.includes(item.id) }"
            v-for="item in projectList"
            :key="item.id"
            @click="clickProject(item)"
          >
            {{ item.projectName }}
          </div>
        </div>

        <!-- 已选检测项目标题 -->
        <div class="selected-projects-title">已选检测项目：</div>


        <!-- 已选项目列表 -->
        <div class="inspection-project-list">
          <div class="project-item" v-for="(item, index) in selectInspectionProject" :key="index">
            <div class="steps_">
              <div class="index_2">{{ index + 1 }}</div>
              <div class="project-name">{{ item.projectName }}</div>
            </div>
            <div class="arrow" v-if="index !== selectInspectionProject.length - 1">
              <span>↓</span>
            </div>
          </div>
        </div>
        </div>


        <!--        </el-form-item>-->




      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listWorkOrder,
  workOrderData,
  listGoods,
  addWorkInfo,
  getWorker,
  shopInfo,
  settleAccounts,
  workOrderView,
  inspectionDetail,
  offlineCharging,
  getBankAccountList,
  makeCertOk,
  stopInspection,
  updateWorkInfo,
  delWorkInfo,
  detail,
  getINspectionProject,
  getWeorkNodesById
} from "./api/workOrder";
import {getCustomerSource} from "./api/index";
import print from 'vue-print-nb'
import moment from 'moment';
import request from "@/utils/request";
import DictTag from "@/components/DictTagOld/index.vue";

export default {
  name: "Info",
  dicts: ['customer_source', 'pay_type', 'car_status', 'car_use_nature', 'inspection_use_role'],
  directives: {
    print
  },
  components: {DictTag},
  data() {
    return {
      moneyData: {
        payMoneySum: 0,
        goodsPriceSum: 0
      },
      projectList:[],
      isPass: 1,
      isRetrial: '',
      remark: '',
      optionss: [{
        value: '1',
        label: '合格'
      }, {
        value: '0',
        label: '不合格'
      }],
      optionsss: [{
        value: '1',
        label: '重审'
      }, {
        value: '0',
        label: '退办理'
      }],

      goodsPrice: 0,
      reduceMoney: '',
      payMoney: '',
      payType: '',
      receivablesAccount: '',
      payRemark: '',
      inspectionId: '',
      size: '',
      workId: '',
      // workerList:[],
      value: '',
      options: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      customerData: [],
      BankAccountList: [],
      // 总条数
      total: 0,
      // 道路救援模块表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      addOpen: false,
      // 是否显示弹出层
      open: false,
      openxin: false,
      opendetail: false,
      openhe: false,
      htmlStr: null,
      detailForm: [],
      selectInspectionProject:[],
      inspectionWorkNodeStr:[],
      selectInspectionProjectIds:[],
      isInsert: false,
      leadManList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        connectionName: null,
        isAppointment: null,
        rescueType: null,
        feeType: null,
        carBrand: null,
        destinationInfo: null,
        rescueStatus: null,
        rescueAmount: null,
      },
      // 表单参数
      form: {},
      offline: {},
      // 表单校验
      rules: {
        connectionName: [
          {required: true, message: "联系人名称不能为空", trigger: "blur"}
        ],
        connectionPhone: [
          {required: true, message: "联系人手机号不能为空", trigger: "blur"}
        ],
        licenseNum: [
          {required: true, message: "车牌号不能为空", trigger: "blur"}
        ],
        isAppointment: [
          {required: true, message: "是否为预约单不能为空", trigger: "change"}
        ],
        rescueType: [
          {required: true, message: "救援类型 1拖车2送油3搭电4换台5扣车不能为空", trigger: "change"}
        ],
        carType: [
          {required: true, message: "车辆类型  大中小不能为空", trigger: "change"}
        ],
        rescuePosition: [
          {required: true, message: "救援地点 详细描述不能为空", trigger: "blur"}
        ],
        feeType: [
          {required: true, message: "收费类型不能为空", trigger: "change"}
        ],
      }
    };
  },
  created() {
    this.dict = {type: {}}
    for (let i = 0; i < this.$options.dicts.length; i++) {
      request({
        url: '/rescue/dict/data/type/' + this.$options.dicts[i],
        method: 'get'
      }).then(res => {
        this.$set(this.dict.type, this.$options.dicts[i], res.data)
      })
    }
    this.getpid()
    this.customerSource();
  },
  methods: {
    jieshutij() {
      let data = {
        id: this.inspectionId,
        isPass: this.isPass,
        isRetrial: this.isRetrial,
        remark: this.remark
      }
      stopInspection(data).then(res => {
        console.log(res)
        this.$message.success("操作成功")
        this.openhe = false
        this.getList()
      })
    },
    clickProject(data) {
      let idx = this.selectInspectionProjectIds.indexOf(data.id)
      if (idx > -1) {
        // 如果元素存在于数组中，则使用splice方法来删除它
        this.selectInspectionProject.splice(idx, 1);
        this.selectInspectionProjectIds.splice(idx, 1)
      } else {
        this.selectInspectionProject.push(data)
        this.selectInspectionProjectIds.push(data.id)
      }
      console.log('已选择的检测项目', this.selectInspectionProject)

    },
    jieshu(row) {

      this.inspectionId = row.id
      this.isPass = "",
        this.isRetrial = "",
        this.remark = "",
        this.openhe = true
    },
    /*获取检测项目*/
    getINspectionProject() {
      this.selectInspectionProject = []
      getINspectionProject().then(res => {
        console.log('检测项目', res)
        this.projectList = res.data.records
      })
    },
    zhizheng(row) {
      console.log(row)
      let data = {
        inspectionId: row.id
      }
      makeCertOk(data).then(res => {

        this.$message.success("操作成功")
        this.getList()
      })
    },
    jisuan() {
      if (this.reduceMoney > (this.goodsPrice / 100)) {
        this.reduceMoney = this.goodsPrice / 100
      }
      this.payMoney = (this.goodsPrice / 100) - this.reduceMoney
    },
    tijiao() {
      let data = {
        reduceMoney: this.reduceMoney ? this.reduceMoney * 100 : 0,
        payMoney: this.payMoney * 100,
        payType: this.payType,
        receivablesAccount: this.receivablesAccount,
        payRemark: this.payRemark,
        inspectionId: this.inspectionId,
      }
      offlineCharging(data).then(res => {
        this.openxin = false
        this.$message.success("结算成功")
        this.getList()
      })

    },

    settleAccounts(id) {
      settleAccounts(id).then(res => {
        if (res.code == 0) {
          this.$message.success("清算成功")
          this.getList()
        }
      })
    },
    customerSource() {
      getCustomerSource().then(res => {
        this.customerData = res.data
      })
    },
    watchWork(row) {
      workOrderView(row.id).then(res => {
        this.htmlStr = res.data
      })
      this.open = true
      this.form = row
      this.open = true
    },
    xinWork(row) {
      this.inspectionId = row.id
      this.reduceMoney = 0,
        this.payMoney = null,
        this.payType = null,
        this.receivablesAccount = null,
        this.payRemark = null,
        inspectionDetail(row.id).then(res => {
          this.offline = res.data
          this.goodsPrice = res.data.goodsPrice
          console.log(res)
        })
      this.openxin = true
    },
    detail(row) {
      console.log('点击详情', row)
      //根据id查询详情
      let params = {
        inspectionInfoId: row.id
      }
      detail(params).then(res => {
        this.detailForm = res.data.stepInfos
        console.log('详情', this.detailForm)
      })
      this.opendetail = true
    },

    //获取pid
    getpid() {
      shopInfo().then(res => {
        this.partnerId = res.data.partnerId
        this.getList();

      })
    },
    handleChanges(e) {

      console.log('执行了查询', e)
    },
    handleChange(e) {
      console.log(e)
    },
    /** 查询道路救援模块列表 */
    getList() {
      this.loading = true;
      console.log(this.queryParams.jcTime)
      if (this.queryParams.jcTime) {
        this.queryParams.startTime = this.queryParams.jcTime[0]
        this.queryParams.endTime = this.queryParams.jcTime[1]
      }
      listWorkOrder(this.queryParams).then(response => {
        this.infoList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
      workOrderData(this.queryParams).then(response => {
        this.moneyData = response.data
      });
      let data = {
        partnerId: this.partnerId,
        workName: this.value,
        pageNum: 1,
        pageSize: 100,
      }
      // getWorker(data).then(res =>{
      //   console.log(res)
      //   this.workerList =  res.rows
      // })
      getBankAccountList().then(res => {
        res.data.forEach(it => {
          let temp = {}
          temp.key = it.remark + it.dictLabel
          this.BankAccountList.push(temp)
        })
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.addOpen = false;
      this.reset();
      this.selectInspectionProjectIds = []
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        connectionName: null,
        connectionPhone: null,
        licenseNum: null,
        isAppointment: null,
        rescueTime: null,
        rescueType: null,
        carType: null,
        rescuePosition: null,
        rescueLongitude: null,
        rescueLatitude: null,
        feeType: null,
        carBrand: null,
        destinationInfo: null,
        destinationLongitude: null,
        destinationLatitude: null,
        rescueStatus: null,
        driverId: null,
        rescueAmount: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        otherPhone: null,
      };
      this.selectInspectionProject = []
      this.resetForm("form");
    },


    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.jcTime = null
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.getINspectionProject()
      this.isInsert = true
      this.getLeadeMan();
      listGoods().then(res => {
        res.data.forEach(it => {
          let temp = {}
          temp.value = it.id;
          temp.label = it.title;
          let temp1 = []
          it.skuList.forEach(item => {
            let temp2 = {}
            temp2.value = item.id;
            temp2.label = item.skuName;
            temp1.push(temp2)
          })
          temp.children = temp1
          this.options.push(temp)
        })
        console.log(this.options)
      })
      this.reset();
      this.addOpen = true;
      this.title = "工单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.isInsert = false
      this.reset();
      this.getLeadeMan();
      this.form = row
      let skuId = parseInt(row.skuId)
      this.form.skuId = [row.goodsId, skuId]
      console.log(this.form)
      listGoods().then(res => {
        res.data.forEach(it => {
          let temp = {}
          temp.value = it.id;
          temp.label = it.title;
          let temp1 = []
          it.skuList.forEach(item => {
            let temp2 = {}
            temp2.value = item.id;
            temp2.label = item.skuName;
            temp1.push(temp2)
          })
          temp.children = temp1
          this.options.push(temp)
        })
        console.log(this.options)
      })
      this.addOpen = true;
      this.title = "工单";
    },
    /** 获取引车员信息*/
    getLeadeMan() {
      request({
        url: '/system/role/getUsersByRoleCode',
        method: 'get',
        params: {
          code: "jcycy"
        }
      }).then(res => {
        this.leadManList = res.data
      })
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.id) {
        this.updateForm()
      } else {
        if (this.selectInspectionProject.length == 0) {
          this.$modal.msgError("请选择项目")
        }
        for (var i = 0; i < this.selectInspectionProject.length; i++) {
          this.selectInspectionProject[i].orderNum = i+1
          this.selectInspectionProject[i].projectId = this.selectInspectionProject[i].id
          this.selectInspectionProject[i].id = undefined
        }
        console.log('项目', this.selectInspectionProject)
        this.form.inspectionWorkNodes = this.selectInspectionProject
        console.log('最终提交的项目', this.form)

        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log(this.form.skuId[1])
            this.form.skuId = this.form.skuId[1]
            addWorkInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.addOpen = false;
              this.getList();
            });
          }
        });
      }

    },
    getWeorkNodesById(id){
      const params = {
        inspectionId: id
      }
      getWeorkNodesById(params).then(res => {
        console.log('根据工单id获取流程', res)
        this.selectInspectionProject = res.data
        this.selectInspectionProjectIds = this.selectInspectionProject.map(it => it.projectId)
      })
    },
    updateForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(this.form.skuId[1])
          this.form.skuId = this.form.skuId[1]
          updateWorkInfo(this.form).then(response => {
            this.$modal.msgSuccess("成功");
            this.addOpen = false;
            this.getList();
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除？').then(function () {
        return delWorkInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/system/inspectionMallPartners/exportWorkOrder', {
        ...this.queryParams
      }, `info_${new Date().getTime()}.xls`)
    }
  }
};
</script>
<style media="print">
@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}

.w-box {
  width: 750px;
  margin: 10px auto;
  border: 2px solid #8799a3;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 22px;
  font-weight: bold;

}

.box-dis {
  width: 100%;
  display: flex;
  margin: 25px 0px;
  justify-content: space-between;

}

.ws-box {
  width: 50%;
  display: flex;
  align-items: center;
}

.w-left {
  width: 40%;
}

.w-rghit {
  width: 60%;
}

.dazi {
  font-size: 22px;
  font-weight: bold;
}

* 对话框整体样式 *

/
.custom-dialog {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 每个对话框项的样式 */
.dialog-item {
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 1px solid #e4e7ed;
}

/* 标题和创建时间的容器 */
.item-header {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #333;
}

/* 标题样式 */
.item-title {
  font-weight: bold;
}

/* 创建时间样式 */
.item-create-time {
  color: #999;
}

/* 内容样式 */
.item-content {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
.title_ {
  font-weight: bold;
  margin-bottom: 10px;
}

.box_ {
  display: flex;
  flex-wrap: wrap;
}

.box_button {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
  border: 1px solid #ccc;
}

.box_button_x {
  background-color: #cce5ff;
  border-color: #007bff;
}

.steps_ {
  display: flex;
  align-items: center;
}

.index_ {
  margin-right: 10px;
  font-size: 16px;
  font-weight: bold;
}

.xb_ {
  text-align: center;
  font-size: 16px;
}
.steps_ {
  display: flex;
  align-items: center;
}.inspection-project-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 20px;
   background-color: #f9f9f9;
   border-radius: 10px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.project-item:hover {
  background-color: #f1f1f1;
}

.steps_ {
  display: flex;
  align-items: center;
}

.index_2 {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
  color: #007BFF;
}

.project-name {
  font-size: 16px;
  color: #333;
  text-transform: capitalize;
}

.arrow {
  font-size: 18px;
  color: #007BFF;
  font-weight: bold;
}

/* 可选检测项目标题 */
.available-projects-title, .selected-projects-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  padding-left: 20px;
  border-left: 5px solid #007BFF;
  padding-bottom: 5px;
}

/* 可选检测项目容器 */
.available-projects-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

/* 每个按钮的样式 */
.project-button {
  padding: 10px 15px;
  background-color: #f0f0f0;
  border-radius: 5px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: inline-block;
  white-space: nowrap;
}

.project-button:hover {
  background-color: #007BFF;
  color: white;
  transform: scale(1.05);
}

/* 被选中的按钮样式 */
.project-button.selected {
  background-color: #007BFF;
  color: white;
  font-weight: bold;
  border: 2px solid #0056b3;
}

/* 可选检测项目容器的按钮排列 */
.available-projects-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


</style>