web-base-admin/src/views/marketing/rechargeCard/rechargeQc.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: 王三华
 * @Date: 2023-05-09 10:57:15
-->
<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="main">
      <div class="thetable">
        <div class="fontTitle"> {{'在线签呈'}}</div>
        <div class="titleflex">
          <div>{{'编号'}} :</div>
          <div>
            <el-radio-group v-model="allData.signType">
              <el-radio
                v-for="ctem in checkList"
                :key="ctem.value"
                :label="ctem.value"
              >{{ ctem.label }}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <table
          id="tfhover"
          class="tftable"
          border="1"
        >
          <tr>
            <td
              colspan="1"
              width="190px"
              align="center"
            > {{'发起部门'}} :</td>
            <td
              v-if="allData.signData"
              colspan="1"
              width="435px"
            >{{ allData.signData.deptName }}</td>
            <td
              colspan="1"
              width="140px"
              align="center"
            > {{'发起人'}} :</td>
            <td
              v-if="allData.signData"
              colspan="1"
            >{{ allData.signData.userName }}</td>
          </tr>
          <tr>
            <td
              colspan="1"
              align="center"
            > {{'主旨'}} :</td>
            <td
              v-if="allData.signData"
              colspan="1"
            >{{ allData.signData.approvalBusinessVal }}</td>
            <td
              colspan="1"
              align="center"
            > {{'日期'}} :</td>
            <td
              v-if="allData.signData"
              colspan="1"
            >{{ allData.signData.creationTime }}</td>
          </tr>
          <!-- // 审批流程 -->
          <tr>
            <td
              colspan="1"
              align="center"
            > {{'审批流程'}}</td>
            <td colspan="3">
              <div class="disflex">
                <span
                  v-for="(ctem, cndex) in allData.signData.detailList"
                  style="margin:0 5px 5px 0"
                >
                  <el-select
                    v-model="ctem.pkApprover"
                    filterable
                    size="mini"
                    :placeholder="'请选择'"
                    @change="getApprover"
                  >
                    <el-option
                      v-for="item in approbalList"
                      :key="item.userId"
                      :label="item.nickName + '(' +item.deptName+')'"
                      :value="item.userId"
                    />
                  </el-select>
                </span>
                <span style="margin:0 5px 5px 0">
                  <i
                    v-show="allData.signData.detailList.length>0"
                    class="el-icon-remove-outline"
                    style="font-size:18px;margin-right:5px"
                    @click.stop="delData"
                  />
                  <i
                    class="el-icon-circle-plus-outline"
                    style="font-size:18px"
                    @click.stop="addData"
                  />
                </span>
              </div>
            </td>
          </tr>
          <tr>
            <td
              colspan="1"
              align="center"
            >{{'抄送人'}}</td>
            <td colspan="3">
              <div class="disflex">
                <span
                  v-for="(ctem, cndex) in allData.signData.sendList"
                  style="margin:0 5px 5px 0"
                >
                  <el-select
                    v-model="ctem.pkSend"
                    filterable
                    size="mini"
                    :placeholder="'请选择'"
                    @change="getApprover"
                  >
                    <el-option
                      v-for="item in userAllList"
                      :key="item.userId"
                      :label="item.nickName + '(' +item.deptName+')'"
                      :value="item.userId"
                    />
                  </el-select>
                </span>
                <span style="margin:0 5px 5px 0">
                  <i
                    v-show="allData.signData.sendList.length>0"
                    class="el-icon-remove-outline"
                    style="font-size:18px;margin-right:5px"
                    @click.stop="delData1"
                  />
                  <i
                    class="el-icon-circle-plus-outline"
                    style="font-size:18px"
                    @click.stop="addData1"
                  />
                </span>
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="height: 190px"
              align="center"
            >{{'情况说明'}}</td>
            <td
              colspan="3"
              style="padding: 0"
            >
              <div >
                <el-input
                  v-model="allData.remark"
                  type="textarea"
                  :rows="6"
                  :placeholder="'请输入'"
                />
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="height: 193px"
              align="center"
            > {{'业务诉求'}}</td>
            <td
              colspan="3"
              style="padding: 0;vertical-align: top;"
            >
              <div >
                <el-table
                  :data="allData.updateParentParamList"
                  style="width: 100%"
                  :header-cell-style="{ background: '#EEEEEE' }"
                >
                  <el-table-column
                    v-for="ctem in allData.tableTit"
                    :key="ctem.value"
                    align="center"
                    :prop="ctem.value"
                    :label="ctem.label"
                  >
                    <template slot-scope="scope">
                      <div v-show="ctem.value== 'actExplain'">
                        <div
                          style="color: #48B2FD;text-decoration:underline;cursor: pointer"
                          @click="details"
                        >
                          {{'查看详情'}}
                        </div>
                      </div>
                      <div v-show="ctem.value!= 'actExplain'">
                        <div>
                          {{ scope.row[ctem.value] }}
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>

              </div>
            </td>
          </tr>
          <tr>
            <td
              style="height: 190px"
              align="center"
            >{{'附件'}}</td>
            <td
              colspan="3"
              style="padding: 0"
            >
              <div style="height: 100%;padding: 10px 20px">
                <el-upload
                  class="upload-demo"
                  :action="uploadImgUrl"
                  :on-success="handleUploadSuccess"
                  :on-remove="removeFile"
                  multiple
                  :headers="headers"
                  :file-list="fileList"
                >
                  <el-button
                    size="small"
                    type="primary"
                  >{{'点击上传'}}</el-button>
                </el-upload>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button
          class="thebtn"
          @click="cancelCz"
        > {{ '取消' }}</el-button>
        <el-button
          type="primary"
          class="thebtn"
          @click="saveDate"
        > {{ '确认' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as man from '@/api/manage'
import onlineSign from '../../dashboard/onlineSign.json'
import { getToken } from '@/utils/auth'
import { dealerSpace, makerSpace, rechargeConfirm } from '@/api/manage'
export default {
  name: 'Zxqc',
  components: {
    topBar
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload', // 上传的图片服务器地址
      headers: {
        Authorization: getToken()
      },
      onlineSign,
      moren: 'specialZxqc',
      topList: [
        {
          name: '在线签呈',
          path: 'specialZxqc'
        }
      ],
      checkList: [],
      typeEd:false,
      allData: {
        remark: '',
        signType: 1,
        fileList: [],
        signData: {
          detailList: [],
          sendList: []
        },
        approvalBusiness: ''
      },
      signDataList: [],
      fileList: [],
      approbalList: [],
      // 审批流程
      userAllList: [],
      allObj: {}
    }
  },
  mounted() {
    // 业务诉求
    this.allObj = JSON.parse(this.$route.query.data)
    this.allData.updateParentParamList = this.allObj
    // 签呈类型
    this.allData.approvalBusiness = this.$route.query.approvalBusiness
    this.typeEd = this.$route.query.type
    this.getSignData([this.allData.approvalBusiness])
  },
  methods: {
    details(code) {
      this.$router.push(
        '/information/markerSpace/detail?code=' +
          this.allData.updateParentParamList[0].storeCode
      )
    },
    getSignData(arr) {
      man.signData(arr).then((res) => {
        this.allData.signData = res.data[0]
        // 签呈表头数据添加到数组
        this.$set(this.allData, 'signType', 1)
        this.$set(this.allData, 'remark', '')
        this.$set(this.allData, 'fileList', [])
        // table表头添加到数组
        this.onlineSign.forEach((ctem) => {
          if (this.allData.approvalBusiness == ctem.id) {
            this.allData.tableTit = ctem.textList
          }
        })
        this.$forceUpdate()
        this.getApprove()
        this.getSignType()
      })
    },
    getApprove() {
      // 审批流程
      man.approvalUser().then((res) => {
        this.approbalList = res.data
      })
      man.userAll().then((res) => {
        this.userAllList = res.data
      })
    },
    getSignType() {
      man.signType().then((res) => {
        this.checkList = res.data
      })
    },
    saveDate() {
      // 审批流程
      this.allData.userIdList = this.allData.signData.detailList.map((item) => {
        return item.pkApprover
      })
      this.allData.userIdList = this.allData.userIdList.filter((item) => item)

      // 抄送流程
      this.allData.sendIdList = this.allData.signData.sendList.map((item) => {
        return item.pkSend
      })
      this.allData.sendIdList = this.allData.sendIdList.filter((item) => item)

      this.allData.fileList = this.fileList.map((item) => {
        return item.url
      })
      const dataList = []
      this.allData.updateParentParamList.forEach((res) => {
        dataList.push(
          { 'memberCode': res.memberCode, 'pkProduct': res.pkProduct, 'specsName': res.specsName,
            'specsNameId': res.specsNameId, 'baseQuantity': res.baseQuantity, 'quantity': res.quantity,
            'isFreeMail': res.isFreeMail, 'pkPostage': res.pkPostage ? res.pkPostage : '', 'pkId': res.pkId ? res.pkId : '',
            'receiveTime': res.receiveTime ? res.receiveTime : ''
          }
        )
      })
      const obj = {
        detailList: dataList,
        // controlType: this.allObj.controlType,
        // repurchaseCouponsShowList: this.allObj.repurchaseCouponsShowList,
        // recommendUpgradeList: this.allObj.recommendUpgradeList,
        // acRecommendSharVO: this.allObj.acRecommendSharVO[0],
        signType: this.allData.signType, // 普通件，急件，密件
        remark: this.allData.remark, // 备注
        fileList: this.allData.fileList, // 附件[]
        userIdList: this.allData.userIdList, // 审批流程[]
        sendIdList: this.allData.sendIdList // 审批流程[]
      }
      let url
      if(this.typeEd){
        url =  man.rechargeDel
      }else{
        url =  man.rechargeConfirm
      }
      url(obj).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.cancelCz()
        }
      })
    },
    cancelCz() {
      this.$router.go(-2)
    },
    // 审批流程
    getApprover() {
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },
    // 审批流程
    addData() {
      const arr = JSON.parse(JSON.stringify(this.allData.signData.detailList))
      arr.push({
        pkApprover: ''
      })
      this.$set(this.allData.signData, 'detailList', arr)
      this.$forceUpdate()
    },
    // 审批流程
    addData1() {
      const arr = JSON.parse(JSON.stringify(this.allData.signData.sendList))
      arr.push({
        pkSend: ''
      })
      this.$set(this.allData.signData, 'sendList', arr)
      this.$forceUpdate()
    },
    // 抄送
    delData1() {
      this.allData.signData.sendList.pop()
      this.$forceUpdate()
    },
    // 审批流程
    delData() {
      this.allData.signData.detailList.pop()
      this.$forceUpdate()
    },

    handleUploadSuccess(res) {
      if (res.code == 200) {
        this.fileList.push(res.data)
      } else {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      }
    },
    removeFile(file, fileList) {
      this.fileList.forEach((item, index) => {
        if (file.uid == item.uid) {
          this.fileList.splice(index, 1)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table thead {
  color: #000000;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    // margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    display: flex;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    flex-direction: column;
  }
  .thetable {
    margin: 0 auto;
    margin-bottom: 20px;
    .fontTitle {
      font-weight: bold;
      font-size: 24px;
      text-align: center;
    }
    .titleflex {
      display: flex;
      margin-top: 10px;
      margin-bottom: 10px;
      justify-content: space-between;
    }
  }
  .tftable {
    font-size: 14px;
    border-collapse: collapse;
    border-radius: 10px;
    width: 1060px;
    border: 1px solid #cccccc;
    .spbox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    th {
      font-size: 14px;
      // padding: 20px;
    }
    tr td {
      font-size: 14px;
      padding: 10px 20px;
      height: 60px;
    }
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    .thebtn {
      width: 120px;
      height: 38px;
    }
  }
}
// 审批流程
.disflex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>