programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/applyPurchase.vue

<template>
  <div>
    <div class="tabsdomPurchase">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="采购申请" name="first">
          <el-form
            ref="form"
            v-loading="loading"
            :model="form"
            :rules="rules"
            class="cost_form"
            label-width="150px"
            style="width: 100%;padding: 5px"
          >
            <el-row>
              <el-col>
                <el-card shadow="always" style="padding: 15px 5px 5px 15px">
                  <el-row>
                    <el-col :span="24">
                      <el-form-item prop="purchaseCode" label="采购单号">
                        <el-input v-model="form.purchaseCode" placeholder="请输入" :readonly="formDisable" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="proId" label="关联项目名称">
                        <el-select
                          v-if="!formDisable"
                          v-model="form.proId"
                          filterable
                          placeholder="请选择项目"
                          :disabled="formDisable"
                          @change="selectProMain()"
                        >
                          <el-option
                            v-for="item in proData"
                            :key="item.id"
                            :label="item.proname"
                            :value="item.id"
                          >
                            <span style="float: left">{{ item.proname }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.custname }}</span>
                          </el-option>
                        </el-select>
                        <el-input v-else v-model="form.proName" readonly />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="custName" label="客户名称">
                        <el-input v-model="form.custName" placeholder="请选择项目带出" readonly />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="placeDate" label="下单日期">
                        <el-date-picker
                          v-model="form.placeDate"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择"
                          style="width: 100%"
                          :disabled="formDisable"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="requireCompleteTime" label="要求完成时间">
                        <el-date-picker
                          v-model="form.requireCompleteTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择"
                          style="width: 100%"
                          :disabled="formDisable"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
<!--                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="supplierId" label="供应商">
                        <el-select
                          v-model="form.supplierId"
                          filterable
                          clearable
                          placeholder="请选择供应商"
                          :disabled="formDisable"
                          @change="changeSupplier"
                        >
                          <el-option
                            v-for="item in supplierData"
                            :key="item.id"
                            :label="item.supplierName"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="contactUser" label="联系人">
                        <el-input v-model="form.contactUser" placeholder="请选择供应商带出" readonly />
                      </el-form-item>
                    </el-col>
                  </el-row>-->
                  <el-row>
                    <el-col :span="24">
                      <el-form-item prop="purchaseContent" label="采购内容">
                        <el-input v-model="form.purchaseContent" type="textarea" :rows="3" :readonly="formDisable" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item prop="purchaseFile" label="附件">
                        <el-upload
                          v-if="!formDisable"
                          ref="upload"
                          class="upload-demo"
                          :action="$constant.BASE_URI+'/FileController/uploadImage'"
                          :http-request="uploadFile"
                          :before-remove="beforeRemove"
                          multiple
                          :file-list="fileUrlList"
                        >
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">请上传50MB以内的文件</div>
                          <div slot="file" slot-scope="{file}">
                            <a :href="file.url">{{ file.name }}</a>
                            <span class="el-upload-list__item-actions">
                              <i class="el-icon-delete" @click="handlePictureRemove(file,fileUrlList)" />
                            </span>
                          </div>
                        </el-upload>
                        <div v-else>
                          <div v-for="(item, index) in fileUrlList" :key="index">
                            <a :href="item.url">{{ item.name }}</a>
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-row>
<!--                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="orderAmount" label="订单总金额（元）">
                        <el-input v-model="form.orderAmount" type="number" placeholder="请输入" :readonly="formDisable" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="3" class="col-txt"><span /></el-col>
                    <el-col :span="12">
                      <el-form-item prop="taxRate" label="税率(%)">
                        <el-select v-model="form.taxRate" placeholder="请选择" :disabled="formDisable">
                          <el-option
                            v-for="item in dc_data.PURCHASE_TAX_RATE"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item prop="amountBelong" label="费用|成本归属">
                        <el-select
                          ref="amountBelong"
                          v-model="form.amountBelong"
                          placeholder="请选择"
                          :disabled="formDisable"
                          @change="belongChange()"
                        >
                          <el-option
                            v-for="item in belongData"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value"
                          >
                            <span style="float: left">{{ item.value }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.type }}</span>
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item prop="payType" label="支付方式">
                        <el-select v-model="form.payType" placeholder="请选择" :disabled="formDisable">
                          <el-option
                            v-for="item in dc_data.PAY_TYPE"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="placeUser" label="下单人">
                        <el-input v-model="form.placeUser" :disabled="formDisable" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item prop="payContent" label="支付说明">
                        <el-input v-model="form.payContent" type="textarea" :rows="3" :readonly="formDisable" />
                      </el-form-item>
                    </el-col>
                  </el-row>-->
                </el-card>
              </el-col>
            </el-row>
          </el-form>

          <h3 v-show="formDisable">流程历史</h3>
          <el-card v-show="formDisable" style="padding: 15px 5px 5px 15px">
            <div class="tableDom">
              <el-table
                :data="historyList"
                :header-cell-style="{
                  background:'#1890FF !important',
                  color:'white'
                }"
                border
                style="width: 100%"
              >
                <el-table-column fixed label="序号" type="index" width="60" />
                <el-table-column
                  label="节点名称"
                  prop="nodeName"
                  width="180"
                />
                <el-table-column
                  label="处理人"
                  prop="auditUserName"
                  width="180"
                />
                <el-table-column
                  label="审核结果"
                  prop="auditResultString"
                />
                <el-table-column
                  label="审核意见"
                  prop="auditContent"
                />
                <el-table-column
                  label="发起/审核时间"
                  prop="createdAt"
                >
                  <template slot-scope="scope">
                    {{ $common.transTime(scope.row.createdAt) }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>

          <h3 v-if="isAudit">处理</h3>
          <el-card v-if="isAudit" shadow="always" style="padding: 15px 5px 5px 15px">
            <el-form
              ref="confirmForm"
              :model="confirmForm"
              class="cost_form"
              label-width="100px"
              style="width: 100%;padding: 5px"
            >
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="处理结果" style="margin-bottom: 15px">
                    <el-radio-group v-model="confirmForm.confirmResult">
                      <el-radio :label="1">同意</el-radio>
                      <el-radio v-if="agreeNoStatus" :label="2">退回发起人</el-radio>
                      <el-radio v-if="agreeBackStatus" :label="3">退回上节点</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="处理意见">
                    <el-input v-model="confirmForm.confirmContent" style="margin-top:10px" type="textarea" />
                    <el-dropdown size="mini" split-button trigger="hover" type="primary">
                      常用语选择
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          v-for="(item, index) in dc_data.COMMON_PHRASES"
                          :key="index"
                          @click.native="selectCommonPhrases(item.label)"
                        >
                          {{ item.label }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="审核人抄送">
                    <user-select
                      :default-select="confirmList"
                      :multiple="true"
                      class="cclist"
                      @selectValue="parentMethod"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="second">
          <div style="width: 100%">
            <el-row>
              <el-col :span="24">
                <div class="node_info">
                  <div>节点说明：</div>
                  <div v-for="(item, index) in nodeColor" :key="index" class="dis_flex">
                    <div class="node_class" :style="{backgroundColor: item.nodeback}" />
                    {{ item.name }}
                  </div>
                </div>
                <div id="containerPurchase" ref="containerPurchase" style="width: 100%" />
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer" style="text-align: right;padding-top: 10px">
      <el-button @click="closeDialog">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
      <el-button v-show="!isDetail" :loading="btnLoading" type="primary" @click.native="confirmSubmit()">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { upload } from '@/static/utils/channel'
import Base from '@/views/base/base'
import UserSelect from '@/views/components/UserSelect'
import constant from '@/static/utils/constant'
import * as echarts from 'echarts'
const lineStyle = {
    color: '#00116a',
    width: 2
}
export default {
    name: 'ApplyPurchase',
    components: { UserSelect },
    mixins: [Base],
    data() {
        return {
            loading: false,
            btnLoading: false,
            activeName: 'first',
            dc_key: ['PURCHASE_TAX_RATE', 'PAY_TYPE', 'COMMON_PHRASES'],
            form: {
                id: '',
                purchaseCode: '',
                proId: '',
                customerId: '',
                placeDate: this.$common.transDate(new Date(), constant.DATE_PATTERN.DATE_TIME_h),
                requireCompleteTime: '',
                // supplierId: '',
                // contactUser: '',
                // orderAmount: '',
                // taxRate: '',
                // amountBelong: '',
                // amountBelongType: '',
                // payType: '',
                // placeUser: this.$common.currUser() ? this.$common.currUser().truename : '',
                purchaseContent: '',
                purchaseFile: '',
                // payContent: ''
            },
            rules: {
                proId: [{ required: true, message: '请选择项目', trigger: 'change' }],
                purchaseContent: [{ required: true, message: '请输入采购内容', trigger: 'blur' }],
                // supplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
                // orderAmount: [{ required: true, message: '请输入订单总金额（员）', trigger: 'blur' }],
                // taxRate: [{ required: true, message: '请选择税率(%)', trigger: 'change' }],
                // payContent: [{ required: true, message: '请输入支付说明', trigger: 'blur' }]
            },
            proData: [],
            belongData: [],
            supplierData: [],
            fileUrlList: [],
            selectList: [],
            linesData: [],
            id: '',
            isAudit: false,
            isAgain: false,
            isDetail: false,
            formDisable: false,
            confirmForm: {
                flowMainPushId: '',
                confirmContent: '',
                confirmResult: 1
            },
            flowRow: {},
            agreeNoStatus: false,
            agreeBackStatus: false,
            historyList: [],
            confirmList: [],
            nodeColor: [
                { name: '审核通过', nodeback: '#2A3980' },
                { name: '未经过', nodeback: '#999999' },
                { name: '退回', nodeback: '#E04242' },
                { name: '审核中', nodeback: '#E08E42' },
                { name: '撤回', nodeback: '#4294E0' }
            ]
        }
    },
    mounted() {
        this.initDict(this.dc_key).then((res) => {})
        // this.supplierRequest('listAllAndOaListAll', { supplierStatus: '0' }).then(res => {
        //     this.supplierData = res.data || []
        // })
    },
    methods: {
        initData(id, isAudit, isDetail, isAgain, flowRow) {
            this.id = id
            this.isAudit = isAudit || false
            this.isDetail = isDetail || false
            this.isAgain = isAgain || false
            this.formDisable = (isAudit || isDetail)
            this.flowRow = flowRow || {}
            if (this.isAudit) {
                this.confirmForm.flowMainPushId = this.flowRow.flowMainPushId
                const data = { flowMainPushId: this.flowRow.flowMainPushId }
                this.flowMainRequest('getOutgoingFlowsByFlowMainPushId', data).then(res => {
                    if (res.data) {
                        res.data.forEach(item => {
                            if (item.conditionExpression === '${agree==\'no\'}') {
                                this.agreeNoStatus = true
                            }
                            if (item.conditionExpression === '${agree==\'back\'}') {
                                this.agreeBackStatus = true
                            }
                        })
                    }
                })
            }
            if (this.formDisable) {
                const data = { flowMainId: this.flowRow.id }
                this.flowMainRequest('getFlowHistroyByFlowMainId', data).then(res => {
                    this.historyList = res.data || []
                })
            } else {
                this.ourOrderMainRequest('getSelectProject', {}).then(res => {
                    this.proData = res.data || []
                })
            }
            if (id) {
                this.getData()
            } else {
                this.getCGNo()
            }
        },
        getData() {
            this.loading = true
            this.baseRequest('getById', { id: this.id }).then(res => {
                if (res.data) {
                    this.form = res.data
                    if (this.form.purchaseFile) {
                        this.fileUrlList = JSON.parse(this.form.purchaseFile)
                    }
                    // this.getBelongData()
                }
                this.loading = false
            })
        },
        closeDialog() {
            this.$emit('closeDialog', false)
        },
        handleClick(tab, event) {
            if (this.activeName === 'second') this.createNodeCanvas(this.flowRow)
        },
        getCGNo() {
            this.baseRequest('getCGNo', {}).then((res) => {
                if (res.data) {
                    this.form.purchaseCode = res.data.msg
                }
            })
        },
        selectProMain() {
            this.form.proName = ''
            this.form.custName = ''
            this.form.customerId = ''
            // this.form.amountBelong = ''
            // this.form.amountBelongType = ''
            const obj = this.proData.find(item => item.id === this.form.proId)
            if (obj) {
                this.form.proName = obj.proname
                this.form.custName = obj.custname
                this.form.customerId = obj.custid
            }
            // if (this.form.proId) {
            //     this.getBelongData()
            // } else {
            //     this.belongData = []
            // }
        },
        getBelongData() {
            this.belongData = []
            this.ourOrderMainRequest('getBelongData', { proId: this.form.proId }).then(res => {
                this.belongData = res.data || []
            })
        },
        changeSupplier(val) {
            const obj = this.supplierData.find(x => x.id === val)
            if (obj) {
                this.form.contactUser = obj.contactUser
            } else {
                this.form.contactUser = ''
            }
        },
        uploadFile(param) {
            upload(param, true).then((res) => {
                if (res.key === 200) {
                    this.fileUrlList.push(res)
                    this.form.purchaseFile = JSON.stringify(this.fileUrlList)
                    this.$message.info('文件上传成功')
                } else {
                    const uid = param.file.uid
                    const idx = this.$refs.upload.uploadFiles.findIndex(item => item.uid === uid)
                    this.$refs.upload.uploadFiles.splice(idx, 1)
                    this.$message.error('文件上传失败')
                }
            }).catch(() => {
                this.$message.error('文件上传异常!')
                const uid = param.file.uid
                const idx = this.$refs.upload.uploadFiles.findIndex(item => item.uid === uid)
                this.$refs.upload.uploadFiles.splice(idx, 1)
            })
        },
        belongChange() {
            const obj = this.belongData.find(item => item.value === this.form.amountBelong)
            if (obj) {
                this.form.amountBelongType = obj.type
            } else {
                this.form.amountBelongType = ''
            }
        },
        selectCommonPhrases(e) {
            if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
            this.confirmForm.confirmContent += e
        },
        parentMethod(val) {
            if (val.length > 0) {
                this.form.ccList = val.join(',')
            }
        },
        confirmSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let formData
                    let url
                    let successMsg
                    if (this.isAudit) {
                        formData = { ...this.confirmForm }
                        url = 'auditApplyPurchase'
                        successMsg = '处理成功'
                    } else if (this.isAgain) {
                        formData = { ...this.form, flowMainId: this.flowRow.id }
                        this.$delete(formData, 'flowMainCcList')
                        url = 'reApplyPurchase'
                        successMsg = '流程发起成功'
                    } else {
                        formData = { ...this.form }
                        url = 'addApplyPurchase'
                        successMsg = '流程发起成功'
                    }
                    this.btnLoading = true
                    this.baseRequest(url, formData).then(res => {
                        this.btnLoading = false
                        if (res.data.key === 200) {
                            this.$message.success(successMsg)
                            this.$emit('closeDialog', true)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    })
                }
            })
        },
        async createNodeCanvas(row) {
            const node = [ // 节点
                {
                    nodeKey: 'curr_user',
                    name: '申请人发起',
                    value: [45, 250],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    nodeKey: 'dept_superior_1_0_1',
                    name: '直接上级审核',
                    value: [125, 250],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    nodeKey: 'dept_head_1_0_1',
                    name: '部门负责人审核',
                    value: [205, 250],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    nodeKey: 'flow_fgld_1_0_1',
                    name: '分管领导审核',
                    value: [285, 250],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    nodeKey: 'flow_sjfgld_1_0_1',
                    name: '上级分管领导\n审核',
                    value: [365, 250],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    nodeKey: 'flow_zyld_1_0_1',
                    name: '主要领导\n审核',
                    value: [445, 250],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    nodeKey: 'flow_cgzy_1_0_1',
                    name: '采购专员\n审核',
                    value: [525, 250],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    name: '结束',
                    value: [525, 100],
                    symbol: 'image://' + require('../asste/huifangkuai.png'),
                    symbolSize: [110, 60]
                },
                {
                    label: {
                        show: true,
                        color: 'red', // 节点文字颜色
                        backgroundColor: '#f5f5f5'
                    },
                    itemStyle: {
                        color: '#f5f5f5'
                    },
                    name: '退回发起人   ',
                    value: [450, 600],
                    symbolSize: [70, 20]
                },
                {
                    label: {
                        show: true,
                        color: 'red', // 节点文字颜色
                        backgroundColor: '#f5f5f5'
                    },
                    itemStyle: {
                        color: '#f5f5f5'
                    },
                    name: '退回发起人',
                    value: [350, 550],
                    symbolSize: [70, 20]
                },
                {
                    label: {
                        show: true,
                        color: 'red', // 节点文字颜色
                        backgroundColor: '#f5f5f5'
                    },
                    itemStyle: {
                        color: '#f5f5f5'
                    },
                    name: '  退回发起人  ',
                    value: [300, 500],
                    symbolSize: [20, 20]
                },
                {
                    label: {
                        show: true,
                        color: 'red', // 节点文字颜色
                        backgroundColor: '#f5f5f5'
                    },
                    itemStyle: {
                        color: '#f5f5f5'
                    },
                    name: ' 退回发起人 ',
                    value: [250, 450],
                    symbolSize: [20, 20]
                },
                {
                    label: {
                        show: true,
                        color: 'red', // 节点文字颜色
                        backgroundColor: '#f5f5f5'
                    },
                    itemStyle: {
                        color: '#f5f5f5'
                    },
                    name: ' 退回发起人  ',
                    value: [250, 450],
                    symbolSize: [20, 20]
                },
                {
                    label: {
                        show: true,
                        color: 'red', // 节点文字颜色
                        backgroundColor: '#f5f5f5'
                    },
                    itemStyle: {
                        color: '#f5f5f5'
                    },
                    name: ' 退回发起人   ',
                    value: [175, 400],
                    symbolSize: [20, 20]
                },
                {
                    label: {
                        show: true,
                        color: 'red', // 节点文字颜色
                        backgroundColor: '#f5f5f5'
                    },
                    itemStyle: {
                        color: '#f5f5f5'
                    },
                    name: '  退回发起人   ',
                    value: [100, 350],
                    symbolSize: [20, 20]
                }
            ]
            this.linesData = [ // 连线
                {
                    nodeKey: 'curr_user',
                    lineStyle: lineStyle,
                    coords: [[45, 250], [105, 250]]
                },
                {
                    nodeKey: 'dept_superior_1_0_1',
                    lineStyle: lineStyle,
                    coords: [[125, 250], [185, 250]]
                },
                {
                    nodeKey: 'dept_head_1_0_1',
                    lineStyle: lineStyle,
                    coords: [[205, 250], [265, 250]]
                },
                {
                    nodeKey: 'flow_fgld_1_0_1',
                    lineStyle: lineStyle,
                    coords: [[285, 250], [345, 250]]
                },
                {
                    nodeKey: 'flow_sjfgld_1_0_1',
                    lineStyle: lineStyle,
                    coords: [[365, 250], [425, 250]]
                },
                {
                    nodeKey: 'flow_zyld_1_0_1',
                    lineStyle: lineStyle,
                    coords: [[445, 250], [505, 250]]
                },
                {
                    nodeKey: 'flow_zyld_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[450, 250], [450, 550]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'flow_sjfgld_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[370, 250], [370, 500]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'flow_fgld_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[290, 250], [290, 450]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'dept_head_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[210, 250], [210, 400]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'dept_superior_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[130, 250], [130, 350]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'flow_cgzy_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[50, 250], [50, 600]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'flow_zyld_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[450, 550], [50, 550]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'flow_sjfgld_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[370, 500], [50, 500]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'flow_fgld_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[290, 450], [50, 450]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'dept_head_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[210, 400], [50, 400]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'dept_superior_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[130, 350], [50, 350]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'flow_cgzy_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[50, 600], [530, 600]],
                    symbol: 'none'
                },
                {
                    nodeKey: 'flow_cgzy_1_0_1_back',
                    lineStyle: lineStyle,
                    coords: [[530, 600], [530, 250]],
                    symbol: 'none'
                },
                {
                    lineStyle: lineStyle,
                    coords: [[530, 250], [530, 130]]
                }
            ]
            if (row.id) {
                const { data } = await this.flowMainRequest('getIMGFlowHistroyByFlowMainId', { flowMainId: row.id })
                for (let i = 0; i < data.length; i++) {
                    const index = node.findIndex((e) => e.nodeKey === data[i].nodeKey)
                    switch (data[i].nodeKey) {
                        case 'curr_user':
                            if (data[i].type === '1') {
                                this.getImgUrl(index, data[i].type, node)
                                this.getLineStyle(data[i].nodeKey)
                            }
                            break
                        case 'dept_superior_1_0_1':
                            if (data[i].type === '1' || data[i].type === '3') {
                                this.getImgUrl(index, data[i].type, node)
                            }
                            if (data[i].type === '1') {
                                this.getLineStyle(data[i].nodeKey)
                            }
                            if (data[i].type === '2') {
                                this.getLineStyle('dept_superior_1_0_1_back')
                                this.getImgUrl(index, data[i].type, node)
                            }
                            break
                        case 'dept_head_1_0_1':
                            if (data[i].type === '1' || data[i].type === '3') {
                                this.getImgUrl(index, data[i].type, node)
                            }
                            if (data[i].type === '1') {
                                this.getLineStyle(data[i].nodeKey)
                            }
                            if (data[i].type === '2') {
                                this.getLineStyle('dept_head_1_0_1_back')
                                this.getLineStyle('dept_superior_1_0_1_back')
                                this.getImgUrl(index, data[i].type, node)
                            }
                            break
                        case 'flow_fgld_1_0_1':
                            this.getImgUrl(index, data[i].type, node)
                            if (data[i].type === '1') {
                                this.getLineStyle('flow_fgld_1_0_1')
                            }
                            if (data[i].type === '2') {
                                this.getLineStyle('flow_fgld_1_0_1_back')
                                this.getLineStyle('dept_superior_1_0_1_back')
                                this.getLineStyle('dept_head_1_0_1_back')
                            }
                            break
                        case 'flow_sjfgld_1_0_1':
                            this.getLineStyle(data[i].nodeKey)
                            this.getImgUrl(index, data[i].type, node)
                            if (data[i].type === '2') {
                                this.getLineStyle('flow_sjfgld_1_0_1_back')
                                this.getLineStyle('flow_fgld_1_0_1_back')
                                this.getLineStyle('dept_head_1_0_1_back')
                                this.getLineStyle('dept_superior_1_0_1_back')
                            }
                            break
                        case 'flow_zyld_1_0_1':
                            if (data[i].type === '1') {
                                this.getLineStyle(data[i].nodeKey)
                                this.getImgUrl(index, data[i].type, node)
                            }
                            if (data[i].type === '2') {
                                this.getLineStyle('flow_zyld_1_0_1_back')
                                this.getLineStyle('flow_sjfgld_1_0_1_back')
                                this.getLineStyle('flow_fgld_1_0_1_back')
                                this.getLineStyle('dept_head_1_0_1_back')
                                this.getLineStyle('dept_superior_1_0_1_back')
                                this.getLineStyle('flow_sjfgld_1_0_1_back')
                            }
                            break
                        case 'flow_cgzy_1_0_1':
                            this.getImgUrl(index, data[i].type, node)
                            if (data[i].type === '1') {
                                this.getLineStyle(data[i].nodeKey)
                                const endIndex = node.findIndex((e) => e.name === '结束')
                                this.getImgUrl(endIndex, '1', node)
                            }
                            if (data[i].type === '2') {
                                this.getLineStyle('flow_cgzy_1_0_1_back')
                                this.getLineStyle('flow_zyld_1_0_1_back')
                                this.getLineStyle('flow_sjfgld_1_0_1_back')
                                this.getLineStyle('flow_fgld_1_0_1_back')
                                this.getLineStyle('dept_head_1_0_1_back')
                                this.getLineStyle('dept_superior_1_0_1_back')
                                this.getLineStyle('flow_sjfgld_1_0_1_back')
                            }
                            break
                        default:
                    }
                }
            }
            this.$nextTick(() => {
                const chartDom = document.getElementById('containerPurchase')
                var myCharts = echarts.init(chartDom)
                const charts = {
                    nodes: node,
                    linesData: this.linesData
                }
                const option = {
                    xAxis: {
                        min: 0,
                        max: 600,
                        padding: [0, 50, 0, 50],
                        show: false,
                        type: 'value'
                    },
                    yAxis: {
                        min: 0,
                        max: 650,
                        show: false,
                        type: 'value'
                    },
                    grid: {
                        left: 50,
                        right: 0,
                        bottom: 0,
                        top: 0
                    },

                    series: [
                        {
                            type: 'graph',
                            coordinateSystem: 'cartesian2d',
                            symbol: 'rect',
                            symbolSize: [80, 40],
                            itemStyle: {
                                color: 'rgb(225,7,7)'
                            },
                            symbolOffset: [10, 0],
                            // force: {
                            // 	edgeLength: 100,//连线的长度
                            // 	repulsion: 200 //子节点之间的间距
                            // },

                            label: {
                                show: true,
                                color: 'white' // 节点文字颜色
                            },

                            data: charts.nodes

                        },

                        {
                            type: 'lines',
                            polyline: false,
                            coordinateSystem: 'cartesian2d',
                            symbol: ['', 'arrow'],
                            symbolSize: 10,
                            data: charts.linesData

                        }

                    ]

                }
                myCharts.clear()
                myCharts.setOption(option)
                window.addEventListener('resize', () => {
                    myCharts.resize()
                })
            })
        },
        getLineStyle(nodeKey) {
            for (let i = 0; i < this.linesData.length; i++) {
                if (this.linesData[i].nodeKey === nodeKey) {
                    this.linesData[i].lineStyle = {
                        color: '#2A3980',
                        width: 2
                    }
                }
            }
        },
        getImgUrl(index, type, node) {
            if (index === -1) return
            switch (type) {
                case '1':
                    node[index].symbol = 'image://' + require('../asste/lanfangkuai.png')
                    break
                case '2':
                    node[index].symbol = 'image://' + require('../asste/hongfangkuai.jpg')
                    break
                case '3':
                    node[index].symbol = 'image://' + require('../asste/huangfanmgkuai.png')
                    break
                case '4' || '5':
                    node[index].symbol = 'image://' + require('../asste/qianlanfangkuai.jpg')
                    break
                default:
            }
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globleRequest('ApplyPurchaseController', opUrl, postData, 'project task')
        },
        flowMainRequest(opUrl, postData) {
            return this.$channel.globleRequest('FlowMainController', opUrl, postData, 'project')
        },
        ourOrderMainRequest(opUrl, postData) {
            return this.$channel.globleRequest('OutOrderMainController', opUrl, postData, 'project')
        },
        supplierRequest(opUrl, postData) {
            return this.$channel.globleRequest('SupplierController', opUrl, postData, 'project')
        }
    }
}
</script>

<style lang="scss">
#containerPurchase {
	width: 100%;
	height: 600px;
	background: #F5F5F5;
}

.cclist {
	.col-input {
		padding: 0;
	}
}

.mb25 {
	margin-bottom: 25px;
}

.pdtopbottom16 {
	padding: 0px 16px;
}

.pdtop16px {
	padding-top: 16px;
}

.cost_form {
	.col-input {
		font-weight: 400;
	}

	.el-form-item__label .moneydetails {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}

	.moneydetails {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;

	}

	.moneydetails:before {
		content: "*";
		color: #ff4949;

	}
}

.txtc {
	text-align: center
}

.ml5 {
	margin-left: 5px;
}

.eltype {
	margin-bottom: 5px;
}

.tabsdomPurchase {
	.el-tabs__header {
		text-align: center !important;
		width: 139px !important;
		text-align: center !important;
		display: block !important;
		margin: auto !important;
		margin-bottom: 15px !important;
	}

	.el-tabs__nav-wrap::after {
		display: none;
	}

	.el-upload {
		width: 100%;
    text-align: left;
	}

}

.feeMoneyTotal {
	width: 100%;
	height: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #1890FF;
	margin-top: 31px;
	margin-bottom: 13px;
}
</style>