RMS-VUE/src/views/purchase/progress/procurementProgress.vue

<template>
  <a-card title="采购进程" :bordered="false">


    <a-collapse v-model:activeKey="activeKey" accordion>
      <a-collapse-panel v-for="(item, index) in dataList" :key="index.toString()">

        <template slot="header">
          <div style="font-size: 18px; font-weight: bold;">
            采购订单号:HL-{{ item.reqirementNumber }}
          </div>
        </template>
        <a-timeline mode="alternate">
          <a-timeline-item>
            物品整理完毕，开始采购
            <a-button @click="see(item.procurementLog[0])">查看详情</a-button>
          </a-timeline-item>
          <a-timeline-item v-for="(item2, index2) in item.procurementLog" :key="index2.toString()" v-if="index2 > 0">
            {{ item2 }}
          </a-timeline-item>

          <a-timeline-item v-if="item.isDone == 1">
            采购结束
          </a-timeline-item>
        </a-timeline>

        <div v-if="item.isDone == 0">
          <a-button type="primary" style="float: right;margin-bottom: 10px;margin-left: 10px;"
            @click="addLog(item)">添加日志</a-button>
          <a-button type="primary" style="float: right;margin-bottom: 10px;" @click="endLog(item)">采购结束</a-button>
        </div>
        <div v-if="item.isDone == 1&&item.qualityIsPass == 0">
          <a-button type="primary" style="float: right;margin-bottom: 10px;" @click="end(item)">完成质检</a-button>
        </div>
        <div v-if="item.isDone == 1&&item.qualityIsPass == 1">
          <a-button type="primary" style="float: center;margin-bottom: 10px;" disabled>已完成质检</a-button>
        </div>

      </a-collapse-panel>
    </a-collapse>

    <a-modal v-model="seeModal" title="整理详情" width="800px" @ok="seeModal = false" @cancel="seeModal = false">
      <a-card style="margin-top: 20px;margin-right: 20px;" v-for="(item2, index2) in supplierSelection"
        :key="index2.toString()">
        <template #title>
          {{ item2.supplier }}
        </template>
        <div v-for="(item3, index3) in item2.goods" :key="index3.toString()">
          <a-row :gutter="16" style="margin-top: 5px;">
            <a-col :span="8">
              <a-input v-model="item3.name" placeholder="物品名称" disabled />
            </a-col>
            <a-col :span="6">
              <a-input v-model="item3.number" placeholder="数量" disabled />
            </a-col>
            <a-col :span="6">
              <a-input v-model="item3.unit" placeholder="单位" disabled />
            </a-col>
          </a-row>
        </div>
      </a-card>
    </a-modal>

    <a-modal v-model="logModal" title="新增日志" width="800px" @ok="addLogText()" @cancel="logModal = false">
      <a-textarea v-model="log" :autosize="{ minRows: 4, maxRows: 8 }" />
    </a-modal>
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
export default {
  data() {
    return {
      dataList: [],
      url: {
        list: "/Try/procurementProgress/list",
        edit: "/Try/procurementProgress/edit",
      },
      activeKey: [''],
      supplierSelection: [],
      seeModal: false,
      logModal: false,
      log: '',
      addData: {}
    }
  },
  created() {
    this.getData()
  },
  computed: {
    list: function () {
      return `${window._CONFIG['domianURL']}/${this.url.list}`;
    },
    edit: function () {
      return `${window._CONFIG['domianURL']}/${this.url.edit}`;
    },
  },
  methods: {
    getData() {
      getAction(this.list, {}).then(res => {
        let dataList = res.result.records
        dataList.forEach(element => {
          let Log = JSON.parse(element.procurementLog)
          element.procurementLog = Log
        })
        this.dataList = Object.assign({}, dataList)
        console.log(this.dataList)
      })
    },
    see(item) {
      this.supplierSelection = item
      this.seeModal = true
    },
    addLog(item) {
      this.logModal = true
      this.log = ''
      this.addData = Object.assign({}, item)
    },
    addLogText() {
      //遍历procurementLog.index，获取最后一位
      let index = 0
      for (const key in this.addData.procurementLog)
        if (this.addData.procurementLog.hasOwnProperty(key))
          index = key
      index = parseInt(index) + 1
      //将数据插入到addData中
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
      let currentTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`

      this.log = currentTime + '  ' + this.log
      this.addData.procurementLog[index] = this.log
      //将data的JSON数据转换为字符串
      this.addData.procurementLog = JSON.stringify(this.addData.procurementLog)

      postAction(this.edit, this.addData).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.getData()
        } else {
          this.$message.error(res.message)
        }
      })
      this.getData()
      this.logModal = false
    },
    endLog(item) {
      //设置isDone为1
      this.addData = Object.assign({}, item)
      this.addData.isDone = 1
      //将data的JSON数据转换为字符串
      this.addData.procurementLog = JSON.stringify(this.addData.procurementLog)
      postAction(this.edit, this.addData).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.getData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    end(item) {
      this.addData = Object.assign({}, item)
      this.addData.qualityIsPass = 1
      //将data的JSON数据转换为字符串
      this.addData.procurementLog = JSON.stringify(this.addData.procurementLog)
      postAction(this.edit, this.addData).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.getData()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>