<template>
    <div class="app-container">
        <el-form :inline="true" ref="form" :model="form" size="mini">
            <el-form-item label="项目名称" prop="uuid">
                <el-select v-model="form.uuid" clearable filterable placeholder="请输入项目名称">
                    <el-option v-for="(item, index) in projects" :key="index" :label="item.title" :value="item.uuid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目类别" prop="type">
                <el-select v-model="form.type" clearable filterable placeholder="请选择项目类别">
                    <el-option v-for="(item, index) in projectType" :key="index" :label="item.name" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目状态" prop="status">
                <el-select v-model="form.status" clearable filterable placeholder="请选择项目状态">
                    <el-option v-for="(item, index) in projectStatus" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目乙方" prop="party_b">
                <el-select v-model="form.party_b" clearable filterable placeholder="请选择项目乙方">
                    <el-option v-for="(item, index) in partyBList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="起止时间">
                <el-date-picker v-model="datetime" clearable unlink-panels type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="项目负责人" prop="type">
                <el-select v-model="form.charge_person" clearable filterable placeholder="请选择项目负责人">
                    <el-option v-for="(item, index) in projectLeader" :key="index" :label="item.username" :value="item.uuid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目成员" prop="member">
                <el-select v-model="form.member" clearable filterable placeholder="请选择项目成员">
                    <el-option v-for="(item, index) in members" :key="index" :label="item.username" :value="item.uuid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目开发人" prop="leader">
                <el-input v-model="form.leader" clearable placeholder="请输入项目开发人"></el-input>
            </el-form-item>
            <el-form-item label="项目甲方" prop="party_a">
                <el-input v-model="form.party_a" clearable placeholder="请选择项目甲方"></el-input>
            </el-form-item>
            <el-form-item label="项目金额">
                <el-col :span="11">
                    <el-input type="number" clearable placeholder="请输入最小金额" v-model.number="form.min_amount"></el-input>
                </el-col>
                <el-col style="text-align: center;" :span="2">-</el-col>
                <el-col :span="11">
                    <el-input type="number" clearable placeholder="请输入最大金额" v-model.number="form.max_amount"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="同业引进人" prop="introducer">
                <el-input v-model="form.introducer" clearable placeholder="请输入同业引进人"></el-input>
            </el-form-item>
            <el-form-item label="中标通知书" prop="is_bidding">
                <el-select v-model="form.is_bidding" clearable filterable placeholder="请选择是否有中标通知书">
                    <el-option v-for="(item, index) in haveOption" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="验收表" prop="is_acceptance">
                <el-select v-model="form.is_acceptance" clearable filterable placeholder="请选择是否有验收表">
                    <el-option v-for="(item, index) in haveOption" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评价表" prop="is_evaluation">
                <el-select v-model="form.is_evaluation" clearable filterable placeholder="请选择是否有评价表">
                    <el-option v-for="(item, index) in haveOption" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合同书" prop="is_contract">
                <el-select v-model="form.is_contract" clearable filterable placeholder="请选择是否有合同书">
                    <el-option v-for="(item, index) in haveOption" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="有无坏账" prop="is_bad_debts">
                <el-select v-model="form.is_bad_debts" clearable filterable placeholder="请选择有无坏账">
                    <el-option v-for="(item, index) in haveOption" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开发级别" prop="level">
                <el-input v-model="form.level" clearable placeholder="请输入开发级别"></el-input>
            </el-form-item>
            <el-form-item label="是否终止" prop="is_stop">
                <el-select v-model="form.is_stop" clearable filterable placeholder="请选择是否终止">
                    <el-option v-for="(item, index) in isOption" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否满意" prop="is_satisfied">
                <el-select v-model="form.is_satisfied" clearable filterable placeholder="请选择是否满意">
                    <el-option v-for="(item, index) in isOption" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item><el-button type="primary" plain @click="onSubmit">查询</el-button></el-form-item>
            <el-form-item><el-button @click="onReset('form')">重置</el-button></el-form-item>
            <el-form-item><el-button type="warning" plain @click="onAdd">添加</el-button></el-form-item>
            <el-form-item>
                <el-popover placement="top-start" width="250" trigger="click">
                    <el-checkbox-group :min="1" v-model="checkList" @change="onCheckboxChange">
                        <el-checkbox :label="item" v-for="(item, index) in headerList" :key="index"></el-checkbox>
                    </el-checkbox-group>
                    <el-button type="success" slot="reference">项目表头设置</el-button>
                </el-popover>
            </el-form-item>
            <el-form-item>
                <el-popover placement="top-start" width="250" trigger="click">
                    <el-checkbox-group v-model="planCheckList">
                        <el-checkbox :label="item" v-for="(item, index) in planHeaderList" :key="index"></el-checkbox>
                    </el-checkbox-group>
                    <el-button type="success" slot="reference">生产计划表头设置</el-button>
                </el-popover>
            </el-form-item>
            <el-form-item>
                <el-button type="info" plain @click="handleDownload">导出当前数据</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="isLoading" element-loading-text="Loading" :data="list" size="mini" border stripe fit highlight-current-row>
            <el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.prop" :label="item.label" :align="item.align" :width="item.width" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status_text" label="项目状态" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.status | getStatusColor">{{ scope.row.status | getStatusText }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="extend1.currentFlow.status" label="当前流程状态" align="center" width="100">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.extend1.currentFlow.status | getFlowStatusColor">{{ scope.row.extend1.currentFlow.status | getFlowStatusText }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" min-width="240" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" :disabled="permission.flow === '无权限'" @click="handleApprove(scope.$index, scope.row)">审批</el-button>
                    <el-button size="mini" type="success" :disabled="permission.basic === '无权限'" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" :disabled="permission.basic !== '可读写'" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-wrapper">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="form.pagenum" background small :page-size="form.pagesize" :pager-count="5" layout="pager, prev, next, total" :total="total"></el-pagination>
        </div>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="60%"
            :close-on-click-modal="false"
        >
            <el-steps :active="showIndex" simple>
                <el-step title="①基本信息" icon="el-icon-edit"></el-step>
                <el-step title="②生产计划" icon="el-icon-s-management"></el-step>
                <el-step title="③里程碑管理" icon="el-icon-upload"></el-step>
                <el-step title="④回款计划" icon="el-icon-picture"></el-step>
                <!-- <el-step title="⑤权限设置" icon="el-icon-s-operation"></el-step> -->
            </el-steps>
            <el-form v-show="showIndex == 0" :model="post" status-icon :rules="rules" :inline="true" ref="post" size="mini" label-width="120px">
                <el-divider content-position="left">基本信息</el-divider>
                <el-form-item label="项目名称" prop="title">
                    <el-input type="text" v-model="post.title" autocomplete="off" placeholder="请输入项目名称"></el-input>
                </el-form-item>
                <el-form-item label="合同编号" prop="code">
                    <el-input type="text" v-model="post.code" autocomplete="off" placeholder="请输入合同编号"></el-input>
                </el-form-item>
                <el-form-item label="项目类别" prop="type">
                    <el-select v-model="post.type" filterable placeholder="请选择项目类别">
                        <el-option v-for="(item, index) in projectType" :key="index" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="咨询类别" prop="consult_type">
                    <el-select v-model="post.consult_type" filterable placeholder="请选择项目类别">
                        <el-option v-for="(item, index) in consultType" :key="index" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目金额" prop="amount">
                    <el-input type="number" v-model.number="post.amount" autocomplete="off" placeholder="请输入项目金额"></el-input>
                </el-form-item>
                <el-form-item label="项目甲方" prop="party_a">
                    <el-input type="text" v-model="post.party_a" autocomplete="off" placeholder="请输入项目甲方"></el-input>
                </el-form-item>
                <el-form-item label="项目乙方" prop="party_b">
                    <el-select v-model="post.party_b" filterable placeholder="请选择项目乙方">
                        <el-option v-for="(item, index) in partyBList" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目开发人" prop="leader">
                    <el-input type="text" v-model="post.leader" autocomplete="off" placeholder="请输入项目开发人"></el-input>
                </el-form-item>
                <el-form-item label="开发级别" prop="level">
                    <el-input type="text" v-model="post.level" autocomplete="off" placeholder="请输入开发级别"></el-input>
                </el-form-item>
                <el-form-item label="同业引进人" prop="introducer">
                    <el-input type="text" v-model="post.introducer" autocomplete="off" placeholder="请输入同业引进人"></el-input>
                </el-form-item>
                <el-form-item label="项目来源" prop="source">
                    <el-select v-model="post.source" filterable placeholder="请选择项目来源">
                        <el-option v-for="(item, index) in sourceList" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="体系类型" prop="standard_type">
                    <el-select v-model="post.standard_type" filterable placeholder="请选择体系类型">
                        <el-option v-for="(item, index) in standardList" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核类型" prop="review_type">
                    <el-select v-model="post.review_type" filterable placeholder="请选择审核类型">
                        <el-option v-for="(item, index) in reviewList" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户地址" prop="customer_addr">
                    <el-input type="text" v-model="post.customer_addr" autocomplete="off" placeholder="请输入客户地址"></el-input>
                </el-form-item>
                <el-form-item label="客户联系人" prop="customer_contact">
                    <el-input type="text" v-model="post.customer_contact" autocomplete="off" placeholder="请输入客户联系人"></el-input>
                </el-form-item>
                <el-form-item label="客户联系电话" prop="customer_phone">
                    <el-input type="text" v-model="post.customer_phone" autocomplete="off" placeholder="请输入客户联系电话"></el-input>
                </el-form-item>
                <el-form-item label="项目归属" prop="ascription">
                    <el-input type="text" v-model="post.ascription" autocomplete="off" placeholder="请输入项目归属"></el-input>
                </el-form-item>
                <el-form-item label="风险级别" prop="risk">
                    <el-select v-model="post.risk" filterable placeholder="请选择风险级别">
                        <el-option v-for="(item, index) in projectRisk" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户雇员规模" prop="people_nums">
                    <el-input type="number" v-model="post.people_nums" autocomplete="off" placeholder="请输入客户雇员规模"></el-input>
                </el-form-item>
                <el-form-item label="签订日期" prop="contract_sign_at">
                    <el-date-picker v-model="post.contract_sign_at" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择合同签订日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="启动时间" prop="start_time">
                    <el-date-picker v-model="post.start_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="启动时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="结案时间" prop="end_time">
                    <el-date-picker v-model="post.end_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结案时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="技术负责人" prop="technicalManagerSelected">
                    <el-select v-model="post.technicalManagerSelected" @change="onSelectChange" :multiple-limit="1" multiple placeholder="请选择">
                        <el-option v-for="item in technicalManager" :key="item.uuid" :label="item.username" :value="item.uuid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目总控人" prop="projectMasterSelected">
                    <el-select v-model="post.projectMasterSelected" @change="onSelectChange" :multiple-limit="1" multiple placeholder="请选择">
                        <el-option v-for="item in projectMaster" :key="item.uuid" :label="item.username" :value="item.uuid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目负责人" prop="projectSupervisorSelected">
                    <el-select v-model="post.projectSupervisorSelected" @change="onSelectChange" :multiple-limit="1" multiple placeholder="请选择">
                        <el-option v-for="item in projectSupervisor" :key="item.uuid" :label="item.username" :value="item.uuid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目管理员" prop="projectManagerSelected">
                    <el-select v-model="post.projectManagerSelected" @change="onSelectChange" multiple placeholder="请选择">
                        <el-option v-for="item in projectManager" :key="item.uuid" :label="item.username" :value="item.uuid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目成员" prop="projectMemeberSelected">
                    <el-select v-model="post.projectMemeberSelected" @change="onSelectChange" multiple placeholder="请选择">
                        <el-option v-for="item in projectMemeber" :key="item.uuid" :label="item.username" :value="item.uuid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="有无坏账" prop="is_bad_debts">
                    <el-radio-group v-model="post.is_bad_debts">
                        <el-radio :label="true">有</el-radio>
                        <el-radio :label="false">无</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否终止" prop="is_stop">
                    <el-radio-group v-model="post.is_stop">
                        <el-radio :label="true">有</el-radio>
                        <el-radio :label="false">无</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否满意" prop="is_satisfied">
                    <el-radio-group v-model="post.is_satisfied">
                        <el-radio :label="true">有</el-radio>
                        <el-radio :label="false">无</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- <el-form-item label="项目备注" prop="remakrs">
                    <el-input type="textarea" v-model="post.remarks" @change="$forceUpdate()" :autosize="{ minRows: 4, maxRows: 8 }" placeholder="请输入备注信息"></el-input>
                </el-form-item> -->
                <el-divider content-position="left">中标通知书</el-divider>
                <el-form-item label="中标通知书" prop="bidding">
                    <el-upload
                        :action="`${window.location.protocol}//${window.location.host}/api/v1/evm_store/upload`"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleUploadSuccess"
                        :before-remove="beforeRemove"
                        :on-exceed="handleExceed"
                        :file-list="biddingList"
                        name="binfile"
                        :data="{ annex_type: 'project', note: 'bidding', file_dir: project.title }"
                        multiple
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">文件大小不超过10MB</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="中标通知书附件">
                    <a style="display: block;text-decoration: underline;color: blue;" target="_blank" :href="item.url" v-for="(item, index) in biddingList" :key="index">{{ item.name }}</a>
                </el-form-item>
                <el-divider content-position="left">合同</el-divider>
                <el-form-item label="合同" prop="contract">
                    <el-upload
                        :action="`${window.location.protocol}//${window.location.host}/api/v1/evm_store/upload`"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleUploadSuccess"
                        :before-remove="beforeRemove"
                        :on-exceed="handleExceed"
                        :file-list="contractList"
                        name="binfile"
                        :data="{ annex_type: 'project', note: 'contract', file_dir: project.title }"
                        multiple
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">文件大小不超过10MB</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="合同附件">
                    <a style="display: block;text-decoration: underline;color: blue;" target="_blank" :href="item.url" v-for="(item, index) in contractList" :key="index">{{ item.name }}</a>
                </el-form-item>
            </el-form>
            <el-form :model="post" v-show="showIndex == 1" :inline="true" ref="production" size="mini" status-icon label-width="120px">
                <el-divider content-position="left">费用汇总</el-divider>
                <el-form-item label="项目毛利润">
                    <el-input type="number" :disabled="true" size="mini" v-model="post.production.gross_profit"></el-input>
                </el-form-item>
                <el-form-item label="项目毛利润率">
                    <el-input type="number" :disabled="true" size="mini" v-model="post.production.gross_profit_rate"></el-input>
                </el-form-item>
                <el-form-item label="毛利润目标">
                    <el-input type="number" :disabled="true" size="mini" v-model="post.production.gross_profit_rate_goal"></el-input>
                </el-form-item>
                <el-form-item label="成本合计">
                    <el-input type="number" :disabled="true" size="mini" v-model="post.production.cost"></el-input>
                </el-form-item>
                <el-form-item label="项目盈余">
                    <el-input type="number" :disabled="true" size="mini" v-model="post.production.profit"></el-input>
                </el-form-item>
                <el-divider content-position="left">相关费用</el-divider>
                <el-form-item label="人员计划费用">
                    <el-input type="number" size="mini" v-model.number="post.production.staff_plan_fee"></el-input>
                </el-form-item>
                <el-form-item label="人员实际费用">
                    <el-input type="number" size="mini" v-model.number="post.production.staff_real_fee"></el-input>
                </el-form-item>
                <el-form-item label="计划人天">
                    <el-input type="number" size="mini" v-model.number="post.production.plan_man_day_fee"></el-input>
                </el-form-item>
                <el-form-item label="实际人天">
                    <el-input type="number" size="mini" v-model.number="post.production.real_man_day_fee"></el-input>
                </el-form-item>
                <el-form-item label="合同金额">
                    <el-input type="number" size="mini" @change="onAmountChange" v-model.number="post.production.contract_amount"></el-input>
                </el-form-item>
                <el-form-item label="认可合同金额">
                    <el-input type="number" size="mini" v-model.number="post.production.agree_cont_amount"></el-input>
                </el-form-item>
                <el-form-item label="市场费用">
                    <el-input type="number" size="mini" @change="onAmountChange" v-model.number="post.production.market_cost"></el-input>
                </el-form-item>
                <el-form-item label="相关人员返款">
                    <el-input type="number" size="mini" v-model.number="post.production.related_rebate"></el-input>
                </el-form-item>
                <el-form-item label="营业税">
                    <el-input type="number" size="mini" v-model.number="post.production.business_tax"></el-input>
                </el-form-item>
                <el-form-item label="返款税金">
                    <el-input type="number" size="mini" v-model.number="post.production.tax_rebate"></el-input>
                </el-form-item>
                <el-form-item label="销售佣金">
                    <el-input type="number" size="mini" v-model.number="post.production.sales_commission"></el-input>
                </el-form-item>
                <el-form-item label="管理费用">
                    <el-input type="number" size="mini" v-model.number="post.production.management_fee"></el-input>
                </el-form-item>
                <el-form-item label="审核费用">
                    <el-input type="number" size="mini" v-model.number="post.production.audit_fee"></el-input>
                </el-form-item>
                <el-form-item label="认证费用">
                    <el-input type="number" size="mini" @change="onAmountChange" v-model.number="post.production.certification_fee"></el-input>
                </el-form-item>
                <el-form-item label="外包技术费用">
                    <el-input type="number" size="mini" @change="onAmountChange" v-model.number="post.production.technology_fee"></el-input>
                </el-form-item>
                <el-form-item label="差旅费用">
                    <el-input type="number" size="mini" v-model.number="post.production.travel_fee"></el-input>
                </el-form-item>
                <el-form-item label="投标费用">
                    <el-input type="number" size="mini" v-model.number="post.production.bidding_fee"></el-input>
                </el-form-item>
                <el-form-item label="资料打印费">
                    <el-input type="number" size="mini" v-model.number="post.production.doc_print_fee"></el-input>
                </el-form-item>
                <el-form-item label="专家评审费">
                    <el-input type="number" size="mini" v-model.number="post.production.expert_review_fee"></el-input>
                </el-form-item>
                <el-form-item label="招待费用">
                    <el-input type="number" size="mini" v-model.number="post.production.hosting_fee"></el-input>
                </el-form-item>
                <el-form-item label="其他费用">
                    <el-input type="number" size="mini" v-model.number="post.production.other_fee"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="post" v-show="showIndex == 2" ref="flow" size="mini" status-icon label-width="80px">
                <el-divider content-position="left">节点信息</el-divider>
                <el-form-item v-for="(node, index) in post.flow" :label="'节点' + (index + 1)" :key="index" :prop="'flow.' + index + '.title'" :rules="{ required: true, message: '流程节点名称不能为空', trigger: 'blur' }">
                    <el-col :span="11">
                        <el-input size="mini" v-model="node.title"></el-input>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-date-picker v-model="node.deadline" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择节点截止时间"></el-date-picker>
                    </el-col>
                    <el-col :span="4" :offset="2">
                        <el-button size="mini" @click.prevent="removeFlowNode(node)" :disabled="permission.flow !== '可读写'">删除</el-button>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="button" @click="addFlowNode" :disabled="permission.flow !== '可读写'">添加新项</el-button>
                </el-form-item>
            </el-form>
            <el-form :model="post" v-show="showIndex == 3" ref="payback" size="mini" status-icon label-width="80px">
                <el-divider content-position="left">节点信息</el-divider>
                <el-form-item v-for="(node, index) in post.payback" :label="'回款' + (index + 1)" :key="index" :prop="'payback.' + index + '.title'" :rules="{ required: true, message: '回款计划名称不能为空', trigger: 'blur' }">
                    <el-col :span="6">
                        <el-input size="mini" v-model="node.title" placeholder="回款计划"></el-input>
                    </el-col>
                    <el-col :span="4" :offset="1">
                        <el-input size="mini" v-model.number="node.funds" placeholder="回款金额"></el-input>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-date-picker v-model="node.plan_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="回款时间"></el-date-picker>
                    </el-col>
                    <el-col :span="4" :offset="2">
                        <el-button size="mini" @click.prevent="removePaybackNode(node)" :disabled="permission.paybackPlan !== '可读写'">删除</el-button>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="button" @click="addPaybackNode" :disabled="permission.paybackPlan !== '可读写'">添加新项</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" v-show="showIndex == 4">
                <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                <el-table-column prop="role" label="角色" width="120"></el-table-column>
                <el-table-column label="基础信息权限" align="center" min-width="220">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.radioActive1" size="mini">
                            <el-radio-button label="可读"></el-radio-button>
                            <el-radio-button label="可读写"></el-radio-button>
                            <el-radio-button label="无权限"></el-radio-button>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column label="流程管理权限" align="center" width="220">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.radioActive2" size="mini">
                            <el-radio-button label="可读"></el-radio-button>
                            <el-radio-button label="可读写"></el-radio-button>
                            <el-radio-button label="无权限"></el-radio-button>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column label="回款计划权限" align="center" width="220">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.radioActive3" size="mini">
                            <el-radio-button label="可读"></el-radio-button>
                            <el-radio-button label="可读写"></el-radio-button>
                            <el-radio-button label="无权限"></el-radio-button>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column label="回款进度权限" align="center" width="220">
                    <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.radioActive4" size="mini">
                            <el-radio-button label="可读"></el-radio-button>
                            <el-radio-button label="可读写"></el-radio-button>
                            <el-radio-button label="无权限"></el-radio-button>
                        </el-radio-group>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" plain @click="submitForm('post')" :disabled="permission.flow !== '可读写'">提交</el-button>
                <el-button type="success" size="mini" plain v-show="showIndex > 0" @click="onPreviousStep">上一步</el-button>
                <el-button type="success" size="mini" plain v-show="showIndex < 3" @click="onNextStep">下一步</el-button>
                <el-button type="danger" size="mini" plain @click="onReset('post')">重置</el-button>
                <el-button size="mini" @click="dialogVisible = false">关闭</el-button>
            </div>
        </el-dialog>
        <el-dialog title="流程" :visible.sync="flowVisible" :close-on-click-modal="false" width="60%">
            <flow :project="project" @submit="onFlowSubmit"></flow>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from "vuex"
import {
    getDictsList,
    getProjectList,
    deleteProject,
    addNewProject,
    addAnnex,
    deleteAnnex,
    getProject,
    updateProject,
    getUserList,
    deleteProjectUser,
    modifyProjectUser,
    deleteFlow,
    deletePayback,
    updateFlowList,
    updatePaybackList,
    getRoleUser,
    exportProject,
    updateProduction,
} from '@/api/index'
import { mapTrim, compareObjectDiff } from '@/utils/index'
import { formatUTCDateTime } from "@/utils/utils"
import { exportJsonToExcel } from "@/utils/excel"
import flow from "./flow"

// const today = new Date();
// const yestoday = new Date();
// yestoday.setDate(today.getDate() - 1); // 昨天

const projectStatus = [{ id: 1, name: '未审核' }, { id: 2, name: '已审核' }, { id: 3, name: '启动中' }, { id: 4, name: '结束' }, { id: 5, name: '归档' }]

const fieldList = [
  { label: "项目名称", prop: "title", isShow: true, align: "center", width: "200" },
  { label: "项目类型", prop: "type", isShow: true, align: "center", width: "150" },
  { label: "咨询类型", prop: "consult_type", isShow: true, align: "center", width: "150" },
  { label: "项目金额", prop: "amount", isShow: true, align: "left", width: "150" },
  { label: "项目甲方", prop: "party_a", isShow: true, align: "center", width: "180" },
  { label: "项目乙方", prop: "party_b", isShow: true, align: "center", width: "180" },
  { label: "项目开发人", prop: "leader", isShow: true, align: "center", width: "150" },
  { label: "开发级别", prop: "level", isShow: false, align: "center", width: "150" },
  { label: "签订日期", prop: "contract_sign_at", isShow: false, align: "center", width: "150" },
  { label: "项目来源", prop: "source", isShow: false, align: "center", width: "150" },
  { label: "同业引进人", prop: "introducer", isShow: false, align: "center", width: "150" },
  { label: "体系类型", prop: "standard_type", isShow: false, align: "center", width: "150" },
  { label: "审核类型", prop: "review_type", isShow: false, align: "center", width: "150" },
  { label: "客户地址", prop: "customer_addr", isShow: false, align: "center", width: "150" },
  { label: "联系人", prop: "customer_contact", isShow: false, align: "center", width: "150" },
  { label: "联系方式", prop: "customer_phone", isShow: false, align: "center", width: "150" },
  { label: "项目归属", prop: "ascription", isShow: false, align: "center", width: "150" },
  { label: "风险级别", prop: "risk", isShow: false, align: "center", width: "150" },
  { label: "参与人数", prop: "people_nums", isShow: false, align: "center", width: "120" },
  { label: "招标通知书", prop: "is_bidding", isShow: false, align: "center", width: "100" },
  { label: "有无验收表", prop: "is_acceptance", isShow: false, align: "center", width: "100" },
  { label: "有无评价表", prop: "is_evaluation", isShow: false, align: "center", width: "100" },
  { label: "有无合同", prop: "is_contract", isShow: false, align: "center", width: "100" },
  { label: "有无坏账", prop: "is_bad_debts", isShow: false, align: "center", width: "100" },
  { label: "是否停止", prop: "is_stop", isShow: false, align: "center", width: "100" },
  { label: "是否满意", prop: "is_satisfied", isShow: false, align: "center", width: "100" },
  { label: "开始时间", prop: "start_time", isShow: false, align: "center", width: "150" },
  { label: "结束时间", prop: "end_time", isShow: false, align: "center", width: "150" },
]

const tableHeader = fieldList.filter(item => {
  if (item.isShow) return item
})

const planHeaderList = [
    { label: "人员计划开支", prop: "staff_plan_fee" },
    { label: "人员实际开支", prop: "staff_real_fee" },
    { label: "计划人天", prop: "plan_man_day_fee" },
    { label: "实际人天", prop: "real_man_day_fee" },
    { label: "项目毛利润", prop: "gross_profit" },
    { label: "项目毛利润率", prop: "gross_profit_rate" },
    { label: "项目毛利润目标", prop: "gross_profit_rate_goal" },
    { label: "项目成本", prop: "cost" },
    { label: "项目盈利", prop: "profit" },
    { label: "合同金额", prop: "contract_amount" },
    { label: "认可合金额", prop: "agree_cont_amount" },
    { label: "市场费用", prop: "market_cost" },
    { label: "相关方返款", prop: "related_rebate" },
    { label: "营业税", prop: "business_tax" },
    { label: "返款税金", prop: "tax_rebate" },
    { label: "销售佣金", prop: "sales_commission" },
    { label: "管理费", prop: "management_fee" },
    { label: "审核费", prop: "audit_fee" },
    { label: "认证费", prop: "certification_fee" },
    { label: "外包技术费", prop: "technology_fee" },
    { label: "差旅费", prop: "travel_fee" },
    { label: "投标费", prop: "bidding_fee" },
    { label: "资料打印费", prop: "doc_print_fee" },
    { label: "专家评审费", prop: "expert_review_fee" },
    { label: "招待费", prop: "hosting_fee" },
    { label: "其他费用", prop: "other_fee" },
]

export default {
    data() {
        return {
            window,
            checkList: tableHeader.map(item => item.label),
            headerList: fieldList.map(item => item.label),
            planCheckList: [],
            planHeaderList: planHeaderList.map(item => item.label),
            tableHeader,
            projectStatus,
            total: 0,
            list: [],
            projects: [],
            fileList: [],
            biddingList: [],
            contractList: [],
            evaluationList: [],
            acceptanceList: [],
            currentIndex: null,
            currentValue: null,
            isLoading: false,
            flowVisible: false,
            datetime: null,
            projectType: [],
            consultType: [],
            projectRisk: [],
            reviewList: [],
            standardList: [],
            sourceList: [],
            partyBList: [],
            form: {
                uuid: null,
                type: null,
                party_a: null,
                party_b: null,
                status: null,
                start_time: null,
                end_time: null,
                min_amount: null,
                max_amount: null,
                member: null,
                charge_person: null,
                leader: null,
                level: null,
                introducer: null,
                is_bidding: null,
                is_acceptance: null,
                is_evaluation: null,
                is_contract: null,
                is_bad_debts: null,
                is_stop: null,
                is_satisfied: null,
                pagesize: 15,
                pagenum: 1
            },
            dialogTitle: "",
            dialogVisible: false,
            post: {
                type: null,
                code: "",
                title: null,
                amount: 0,
                consult_type: "",
                contract_sign_at: null,
                party_a: "",
                party_b: "",
                leader: "",
                level: "",
                introducer: "",
                source: "",
                standard_type: "",
                review_type: "",
                customer_addr: "",
                customer_contact: "",
                customer_phone: "",
                ascription: "",
                risk: "",
                people_nums: 0,
                is_bad_debts: 0,
                is_stop: 0,
                is_satisfied: 1,
                start_time: null,
                end_time: null,
                remakrs: null,
                flow: [],
                payback: [],
                production: {
                    gross_profit: null,
                    gross_profit_rate: null,
                    gross_profit_rate_goal: null,
                    cost: null,
                    profit: null,
                    staff_plan_fee: 0,
                    staff_real_fee: 0,
                    plan_man_day_fee: 0,
                    real_man_day_fee: 0,
                    contract_amount: 0,
                    agree_cont_amount: 0,
                    market_cost: 0,
                    related_rebate: 0,
                    business_tax: 0,
                    tax_rebate: 0,
                    sales_commission: 0,
                    management_fee: 0,
                    audit_fee: 0,
                    certification_fee: 0,
                    technology_fee: 0,
                    travel_fee: 0,
                    bidding_fee: 0,
                    doc_print_fee: 0,
                    expert_review_fee: 0,
                    hosting_fee: 0,
                    other_fee: 0
                },
                technicalManagerSelected: [],
                projectManagerSelected: [],
                projectSupervisorSelected: [],
                projectMemeberSelected: [],
                projectMasterSelected: []
            },
            rules: {
                type: [{ type: 'string', required: false, message: '类型不能为空', trigger: 'blur' }],
                title: [{ type: 'string', required: true, message: '项目名不能为空', trigger: 'blur' }],
                code: [{ type: 'string', required: false, message: '项目编号不能为空', trigger: 'blur' }],
                amount: [{ type: 'number', required: false, message: '项目金额不能为空', trigger: 'blur' }],
                consult_type: [{ type: 'string', required: false, message: '项目备注不能为空', trigger: 'blur' }],
                start_time: [{ type: 'string', required: true, message: '项目开始不能为空', trigger: 'blur' }],
                end_time: [{ type: 'string', required: true, message: '项目结束不能为空', trigger: 'blur' }],
                contract_sign_at: [{ type: 'string', required: false, message: '项目签订时间不能为空', trigger: 'blur' }],
                technicalManagerSelected: [{ type: 'array', required: true, message: '技术负责人不能为空', trigger: 'blur' }],
                projectMasterSelected: [{ type: 'array', required: true, message: '项目总控人不能为空', trigger: 'blur' }],
                projectManagerSelected: [{ type: 'array', required: true, message: '项目管理员不能为空', trigger: 'blur' }],
                projectSupervisorSelected: [{ type: 'array', required: true, message: '项目负责人不能为空', trigger: 'blur' }],
                projectMemeberSelected: [{ type: 'array', required: false, message: '项目成员不能为空', trigger: 'blur' }],
                party_a: [{ type: 'string', required: false, message: '项目甲方不能为空', trigger: 'blur' }],
                party_b: [{ type: 'string', required: false, message: '项目乙方不能为空', trigger: 'blur' }],
            },
            showIndex: 0,
            technicalManager: [],
            projectMaster: [],
            projectManager: [],
            projectSupervisor: [],
            projectMemeber: [],
            project: { title: "" },
            members: [], // 项目成员
            projectLeader: [], // 项目负责人
            haveOption: [
                { label: "有", value: 1 },
                { label: "无", value: 0 }
            ],
            isOption: [
                { label: "是", value: 1 },
                { label: "否", value: 0 }
            ],
            tableData: [{
                name: '王小虎',
                role: '普通用户',
                radioActive1: '无权限',
                radioActive2: '无权限',
                radioActive3: '无权限',
                radioActive4: '无权限',
            }, {
                name: '李小虎',
                role: '普通用户',
                radioActive1: '无权限',
                radioActive2: '无权限',
                radioActive3: '无权限',
                radioActive4: '无权限',
            }, {
                name: '张小虎',
                role: '普通用户',
                radioActive1: '无权限',
                radioActive2: '无权限',
                radioActive3: '无权限',
                radioActive4: '无权限',
            }, {
                name: '刘小虎',
                role: '普通用户',
                radioActive1: '无权限',
                radioActive2: '无权限',
                radioActive3: '无权限',
                radioActive4: '无权限',
            }],
        }
    },
    computed: {
        ...mapState("user", [ "role", ]),
        permission: () => {
            const user = JSON.parse(sessionStorage.getItem("user"))
            if (user) return user.role.permission
            else return {
                basic: "",
                flow: "",
                paybackPlan: "",
                paybackProgress: "",
            }
        },
    },
    components: { flow },
    filters: {
        getStatusColor(status) {
            if (status === 0) return "info"
            else if (status === 1) return "danger"
            else if (status === 2) return "warning"
            else if (status === 3) return "success"
            else if (status === 4) return "info"
            else if (status === 5) return ""
        },
        getStatusText(status) {
            if (status === 0) return "未启动"
            else if (status === 1) return "未审核"
            else if (status === 2) return "已审核"
            else if (status === 3) return "启动中"
            else if (status === 4) return "结束"
            else if (status === 5) return "归档"
        },
        getFlowStatusColor(status) {
            if (status === 0) return "danger"
            else if (status === 1) return "danger"
            else if (status === 2) return "warning"
            else if (status === 3) return "success"
            else if (status === 4) return ""
            else if (status === 5) return "info"
        },
        getFlowStatusText(status) {
            if (status === 0) return "未启动"
            else if (status === 1) return "未交付"
            else if (status === 2) return "已交付"
            else if (status === 3) return "已审核"
            else if (status === 4) return "运行中"
            else if (status === 5) return "已结束"
        },
    },
    methods: {
        onAmountChange() {
            this.post.production.business_tax = 0.08 * this.post.production.contract_amount
            this.post.production.market_cost = 0.1 * this.post.production.contract_amount
            this.post.production.agree_cont_amount = this.post.production.contract_amount - this.post.production.certification_fee - this.post.production.market_cost - this.post.production.technology_fee
            console.log(this.post.production.agree_cont_amount)
        },
        onCheckboxChange(evt) {
            let header = []
            evt.forEach(f => {
                for(let i = 0 ; i < fieldList.length; i++) {
                    if (fieldList[i].label === f) {
                        header.push(fieldList[i])
                        break
                    }
                }
            })
            this.tableHeader = header
        },
        handleDownload() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            let header = []
            this.planCheckList.forEach(f => {
                for(let i = 0 ; i < planHeaderList.length; i++) {
                    if (planHeaderList[i].label === f) {
                        header.push(planHeaderList[i])
                        break
                    }
                }
            })
            exportProject({ "condition": mapTrim(this.form), "project": this.tableHeader.map(item => item.prop), "production": header.map(item => item.prop) })
                .then((res) => {
                    exportJsonToExcel({
                        header: this.tableHeader.concat(header),
                        headerLabel: "label",
                        headerProp: "prop",
                        jsonData: res.data,
                        filename: Date.now()
                    })
                })
                .catch((err) => {
                    this.$message.warning(err.message)
                }).finally(() => {
                    loading.close()
                })
        },
        fetchUserList() {
            getUserList({ "scope_type": "list" }).then(res => {
                const a = [], b = [], c = [], d = [], e = [];
                res.data.forEach(item => {
                    switch(item.role.name) {
                        case "技术负责人": a.push(item); break;
                        case "项目管理员": b.push(item); break;
                        case "项目负责人": c.push(item); break;
                        case "项目成员": d.push(item); break;
                        case "项目总控人": e.push(item); break;
                    }
                })
                this.technicalManager = a
                this.projectManager = b
                this.projectSupervisor = c
                this.projectMemeber = d
                this.projectMaster = e
            }).catch(err => {
                // this.$message.error(err.message)
                console.log(err.message)
            })
        },
        fetchData(params) {
            this.isLoading = true
            getProjectList(Object.assign({
                pagenum: this.form.pagenum,
                pagesize: this.form.pagesize,
            }, params)).then(res => {
                if (res.code == 200) {
                    this.total = res.count
                    this.list = res.data.map(item => {
                        for(let i = 0; i < this.projectStatus.length; i++) {
                            if (this.projectStatus[i].id === item.status) {
                                item.status_text = this.projectStatus[i].name
                            }
                        }
                        return item
                    })
                }
            }).catch(err => {
                // this.$message.error(err.message)
                console.log(err.message)
            }).finally(() => {
                this.isLoading = false
            })
        },
        fetchRoleUser() {
            getRoleUser({ "roles": ["项目成员", "项目负责人"] }).then(res => {
                const a = [], b = []
                res.data.forEach(item => {
                    if (item.role === "项目成员") a.push(item)
                    else if (item.role === "项目负责人") b.push(item)
                })
                this.members = a
                this.projectLeader = b
            }).catch(err => {
                console.log(err.message)
            })
        },
        fetchSelectData() {
            getProjectList({ "scope_type": "list" }).then(res => {
                if (res.code == 200) this.projects = res.data
            }).catch(err => {
                // this.$message.error(err.message)
                console.log(err.message)
            })
        },
        fetchDictList() {
            let a = [], b = [], c = [], d = [], e = [], f = [], g = [];
            getDictsList({ "scope_type": "list", "category": ["party-b", "project-type", "consult-type", "project-risk", "review-type", "standard-type", "project-source"] }).then(res => {
                for (let item of res.data) {
                    switch (item.category) {
                        case "party-b": a.push(item); break;
                        case "project-type": b.push(item); break;
                        case "consult-type": c.push(item); break;
                        case "project-risk": d.push(item); break;
                        case "review-type": e.push(item); break;
                        case "standard-type": f.push(item); break;
                        case "project-source": g.push(item); break;
                    }                    
                }
                this.partyBList = a
                this.projectType = b
                this.consultType = c
                this.projectRisk = d
                this.reviewList = e
                this.standardList = f
                this.sourceList = g
            }).catch(err => {
                console.log(err.message)
            })
        },
        fetchProjectData(params) {
            getProject(params).then(res => {
                // 按照不同角色，对项目参与者进行划分
                const a = [], b = [], c = [], d = [], e = [];
                res.data.users.forEach(item => {
                    switch(item.user.role.name) {
                        case "技术负责人": a.push(item.user_uuid); break;
                        case "项目管理员": b.push(item.user_uuid); break;
                        case "项目负责人": c.push(item.user_uuid); break;
                        case "项目成员": d.push(item.user_uuid); break;
                        case "项目总控人": e.push(item.user_uuid); break;
                    }
                })

                this.post.technicalManagerSelected = a
                this.post.projectManagerSelected = b
                this.post.projectSupervisorSelected = c
                this.post.projectMemeberSelected = d
                this.post.projectMasterSelected = e
                this.post.users = res.data.users

                // 项目上传的附件
                const f = [], g = [], h = [], i = [];
                res.data.annex.forEach(item => {
                    item.url = item.url.replace(/localhost/i, window.location.hostname);
                    switch(item.type) {
                        case 'bidding': f.push(item); break;
                        case 'acceptance': g.push(item); break;
                        case 'evaluation': h.push(item); break;
                        case 'contract': i.push(item); break;
                    }
                })
                if (this.role.name !== '项目负责人' && this.role.name !== '项目成员') {
                    this.biddingList = f
                    this.contractList = i
                }
                this.acceptanceList = g
                this.evaluationList = h
                // 处理项目节点
                this.post.flow = res.data.flow
                // 处理项目回款计划
                this.post.payback = res.data.payback
                // 生产计划
                if (res.data.production) {
                    let production = res.data.production
                    if (production.gross_profit) production.gross_profit = production.gross_profit.toFixed(2)
                    if (production.gross_profit_rate) production.gross_profit_rate = production.gross_profit_rate.toFixed(2)
                    if (production.gross_profit_rate_goal) production.gross_profit_rate_goal = production.gross_profit_rate_goal.toFixed(2)
                    if (production.cost) production.cost = production.cost.toFixed(2)
                    if (production.profit) production.profit = production.profit.toFixed(2)
                    this.post.production = production
                }
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        handleSizeChange(e) {
            this.form.pagesize = e
            this.fetchData(mapTrim(this.form))
        },
        handleCurrentChange(e) {
            this.form.pagenum = e
            this.fetchData(mapTrim(this.form))
        },
        handleEdit(index, row) {
            this.project = Object.assign({}, row)
            this.post.type = row.type
            this.post.code = row.code
            this.post.title = row.title
            this.post.amount = row.amount
            this.post.consult_type = row.consult_type
            this.post.contract_sign_at = row.contract_sign_at
            this.post.party_a = row.party_a
            this.post.party_b = row.party_b
            this.post.leader = row.leader
            this.post.level = row.level
            this.post.source = row.source
            this.post.introducer = row.introducer
            this.post.standard_type = row.standard_type
            this.post.review_type = row.review_type
            this.post.customer_addr = row.customer_addr
            this.post.customer_contact = row.customer_contact
            this.post.customer_phone = row.customer_phone
            this.post.ascription = row.ascription
            this.post.risk = row.risk
            this.post.people_nums = row.people_nums
            this.post.is_bad_debts = row.is_bad_debts
            this.post.is_stop = row.is_stop
            this.post.is_satisfied = row.is_satisfied
            this.post.start_time = row.start_time
            this.post.end_time = row.end_time
            this.post.remarks = row.remarks
            this.dialogTitle = "编辑"
            this.dialogVisible = true
            this.currentIndex = index
            this.currentValue = row
            this.fetchProjectData({ uuid: row.uuid })
        },
        handleDelete(index, row) {
            this.$alert('您确定要删除么？删除操作将不可恢复。如需取消操作，请点击右上角关闭按钮。', '删除提醒', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm') deleteProject(row.uuid).then(res => {
                        console.log(res)
                        this.total -= 1
                        this.$delete(this.list, index)
                        this.$message({ type: 'success', message: `成功删除第${ index }行` })
                    }).catch(err => {
                        this.$message.error(err.message)
                    })
                }
            })
        },
        handleApprove(index, row) {
            this.project = row
            this.flowVisible = true
            this.currentIndex = index
            this.currentValue = row
        },
        exportProject() {
            exportProject().then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err)
            })
        },
        onFlowSubmit() {
            getProject({ uuid: this.currentValue.uuid }).then(res => {
                this.project = res.data
            }).catch(err => {
                this.$message.error(err.message)
            }).finally(() => {
                this.fetchData()
            })
        },
        onSelectChange() {
            if (this.dialogTitle == "添加") return

            let t = [];
            t = t.concat(this.post.projectSupervisorSelected)
            t = t.concat(this.post.technicalManagerSelected)
            t = t.concat(this.post.projectManagerSelected)
            t = t.concat(this.post.projectMemeberSelected)
            t = t.concat(this.post.projectMasterSelected)

            modifyProjectUser({
                "project": this.currentValue.uuid,
                "users": t
            }).then(res => {
                this.post.users.push({})
                this.$message.success(res.message)
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        onRemoveUser(e) {
            deleteProjectUser({
                "project": this.currentValue.uuid,
                "uuid": e
            }).then(res => {
                this.$message.success(res.message)
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        submitForm(formName) {
            if (this.dialogTitle === "添加") {
                let t = [];
                t = t.concat(this.post.projectSupervisorSelected)
                t = t.concat(this.post.technicalManagerSelected)
                t = t.concat(this.post.projectManagerSelected)
                t = t.concat(this.post.projectMemeberSelected)
                t = t.concat(this.post.projectMasterSelected)
                this.post.users = t
            }
            this.$refs[formName].validate((valid) => {
                let result = true
                if (valid) {
                    if (this.dialogTitle === '添加') {
                        addNewProject(this.post).then(res => {
                            console.log(res)
                            this.$message({ type: 'success', message: '添加成功' })
                            this.fetchData()
                        }).catch(err => {
                            if (typeof err.message === 'object') this.$message.error("参数错误")
                            else this.$message.error(err.message)
                        })
                    }
                    else if (this.dialogTitle === '编辑') {
                        // 如果是在编辑状态下点击的提交按钮，则需要将此操作产生的数据变更同步到数据库
                        updateProject(this.currentValue.uuid, compareObjectDiff(this.post, this.currentValue)).then(res => {
                            console.log(res)
                            this.fetchData()
                            // this.$set(this.list, this.currentIndex, Object.assign(this.currentValue, tmp))
                            this.$message({ type: 'success', message: '更新成功' })
                        }).catch(err => {
                            this.$message.warning(err.message)
                        })
                        updateFlowList({
                            "uuid": this.currentValue.uuid,
                            "flow": this.post.flow
                        }).then(res => {
                            this.$message.success(res.message)
                        }).catch(err => {
                            this.$message.error(err.message)
                        })
                        updatePaybackList({
                            "uuid": this.currentValue.uuid,
                            "payback": this.post.payback
                        }).then(res => {
                            this.$message.success(res.message)
                        }).catch(err => {
                            this.$message.error(err.message)
                        })
                        updateProduction({
                            "uuid": this.currentValue.uuid,
                            "production": this.post.production
                        }).then(res => {
                            this.post.production = Object.assign(this.post.production, res.data)
                            this.$message.success(res.message)
                        }).catch(err => {
                            this.$message.error(err.message)
                        })
                    }
                } else {
                    result = false
                    this.$message.warning("输入框参数校验未通过")
                }
                this.dialogVisible = false
                return result
            })
        },
        onAdd() {
            this.dialogTitle = "添加"
            this.dialogVisible = true
        },
        onSubmit() {
            this.form.pagenum = 1
            this.form.pagesize = 15
            if (this.datetime && this.datetime.length == 2) {
                this.form.start_time = formatUTCDateTime(this.datetime[0])
                this.form.end_time = formatUTCDateTime(this.datetime[1])
            }
            this.fetchData(mapTrim(this.form))
        },
        onReset(formName) {
            if (formName === 'form') {
                this.form.pagesize = 15
                this.form.pagenum = 1
                this.form.start_time = null
                this.form.end_time = null
                this.form.min_amount = null
                this.form.max_amount = null
                this.form.member = null
                this.form.charge_person = null
            }
            this.$refs[formName].resetFields()
            this.fetchData()
        },
        addFlowNode() {
            this.post.flow.push({ title: '', key: Date.now(), deadline: null, sort: this.post.flow.length + 1 })
        },
        handleUploadSuccess(response) {
            addAnnex({
                project: this.project.uuid,
                size: response.data.filesize,
                title: response.data.filename,
                path: response.data.filepath,
                remarks: response.data.note
            })
            .then((res) => {
                this.$message.success(res.message)
                // 上传成功后，根据类型更新该项目对应字段
                return updateProject(this.project.uuid, { uploads: response.data.note })
            })
            .then(res => {
                console.log(res)
            })
            .catch((err) => {
                this.$message.warning(err.message)
            })
        },
        handleRemove(file) {
            if (file.uuid) deleteAnnex(file.uuid).then(res => {
                this.$message.success(res.message)
            }).catch(err => {
                this.$message.warning(err.message)
            })
        },
        handlePreview(file) {
            console.log(file)
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
                files.length + fileList.length
                } 个文件`
            )
        },
        beforeRemove(file) {
            return this.$confirm(`确定移除 ${file.name}？`)
        },
        removeFlowNode(item) {
            const index = this.post.flow.indexOf(item)
            if (index !== -1) this.post.flow.splice(index, 1)

            // 如果是在编辑状态下，则需要将删除的数据同步到数据库
            if (this.dialogTitle == "编辑" && !item.key) deleteFlow(item.uuid).then(res => {
                this.$message.success(res.message)
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        addPaybackNode() {
            this.post.payback.push({ title: '', key: Date.now(), funds: 0, plan_time: null, sort: this.post.payback.length + 1 })
        },
        removePaybackNode(item) {
            const index = this.post.payback.indexOf(item)
            if (index !== -1) this.post.payback.splice(index, 1)

            // 如果是在编辑状态下，则需要将删除的数据同步到数据库
            if (this.dialogTitle == "编辑" && !item.key) deletePayback(item.uuid).then(res => {
                this.$message.success(res.message)
            }).catch(err => {
                this.$message.error(err.message)
            })
        },
        onPreviousStep() {
            this.showIndex--
        },
        onNextStep() {
            this.showIndex++
        }
    },
    mounted() {},
    created() {
        if (!sessionStorage.getItem("user")) {
            this.$store.dispatch("user/removeToken", {
                success() {
                    this.$router.push("/403")
                }
            })
        }
        this.fetchData()
        this.fetchSelectData()
        this.fetchUserList()
        this.fetchRoleUser()
        this.fetchDictList()
    }
}
</script>
<style lang="less" scoped>
.app-container {
    & > div.page-wrapper {
        margin: 10px 0px;
    }
}
</style>
