spfm-market-front/src/pages/main/leader/risk/riskMaterials.vue

<template>
    <div class="flex-box">
        <div :span="24" class="flex-header">
            <Tabs :tabList="tabListTop" @status="clickTabTops">
            </Tabs>
        </div>
        <div v-if="this.clickTagNameTop == 'Two'" :span="24" class="flex-header">
            <Tabs :tabList="tabListMain" @status="clickTabMains">
            </Tabs>
        </div>

        <div class="flex-count">

            <Table v-loading="loading" @clickDemand="clickDemand" :list="lableTable" ref="TableList"
                @changeNum="changeNum" @changeSize="changeSize">
                <!-- <template v-slot:first>
                    <Export :num="num" ref="export" :exportStatusList="exportStatus" @seachExportList="seachExportList"
                        @export="batchExport" @clickApproval="clickApproval"></Export>
                </template> -->
                <template v-slot:first>
                    <Seach :list="filterData" @seachList="seachList"></Seach>
                </template>
            </Table>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogStatus" width="100%" :before-close="handleClose"
            :modal="false" v-if="dialogStatus" :destroy-on-close="true">
            <!-- 后期维护 -->
            <div style="position: fixed; z-index: 10000">
                <el-button type="primary" v-if="startStatus" @click="clickHandles">处理</el-button>
                <el-button type="primary" v-if="closeStatus" @click="handleClose">关闭</el-button>
                <el-button type="primary" v-if="saveStatus" @click="clickSave">保存</el-button>
            </div>
            <el-form ref="form" :model="fromList" :rules="rule" label-width="130px" style="margin-top: 30px">
                <div class="flex-header">
                    <el-form-item label="待办事项名称:">
                        <el-input v-model="fromList.needName" disabled></el-input>
                    </el-form-item>

                </div>
                <div class="flex-header">
                    <el-form-item label="待办事项类型:" label-width="130px">
                        <el-select v-model="fromList.backlogType" placeholder="请选择待办事项类型" disabled size="medium">
                            <el-option v-for="item in backlogTypeoptions" :key="item.code" :label="item.name"
                                :value="item.code" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结束时间:" label-width="130px">
                        <el-date-picker type="date" placeholder="选择日期" disabled v-model="fromList.finishTime"
                            value-format="yyyy-MM-dd" style="width: 100%"></el-date-picker>
                    </el-form-item>
                </div>
                <div class="flex-header">
                    <el-form-item label="待办事项说明:" prop="backlogExplain">
                        <el-input type="textarea" v-model="fromList.backlogExplain" disabled></el-input>
                    </el-form-item>

                </div>
                <div class="flex-load" style="display: flex; flex-direction: column">
                    <el-form-item label="附件:">
                        <div v-for="(item, index) in fromList.adminAccessoryList" :key="index">
                            <span style="color: blue;cursor: pointer;" @click="downloadOne(item)">{{ item.fileName
}}</span>
                        </div>
                    </el-form-item>

                </div>

                <div class="flex-input-tare flex-header">
                    <el-form-item label="回复内容" label-width="120px" prop="replyContent">
                        <el-input type="textarea" v-model="fromList.replyContent" :disabled="disabled"></el-input>
                    </el-form-item>
                </div>

                <div class="flex-load" style="display: flex; flex-direction: column">
                    <el-form-item label="回复附件:" :disabled="disabled" prop="mkFileShareAttachList">
                        <my-upload v-if="!disabled" @uploadBack="uploadBack" @delloadBack="delloadBack"
                            @clickDownload="download" :fileInfo="fileInfo" :fileList="fromList.mkFileShareAttachList"
                            style="width: 30% !important"></my-upload>
                        <div v-if="fromList.taskName != '办理人员提交'">
                            <div v-for="(item, index) in fromList.processAccessoryList" :key="index">
                                <span style="color: blue;cursor: pointer;" @click="downloadOne(item)">{{ item.fileName
}}</span>
                            </div>
                        </div>

                    </el-form-item>

                    <!-- <div @click="downExcel" class="el-upload__tip" slot="tip">
                        备注内容：PPT（非市场部需求以及市场部非框架内需求需要通过市场决策会决议，请上传ppt）、《业务需求模板.xlsx》《后评估模板.xlsx》
                        《敏感信息范围说明.xlsx》填写并上传。
                    </div> -->
                </div>
            </el-form>
            <div>
                <div class="table-title">流程追踪</div>
                <Table :list="lables"></Table>
            </div>
        </el-dialog>
        <div v-if="destroy">
            <el-dialog title="处理操作" width="100%" :visible.sync="handleStatus" :before-close="handleCloses"
                :modal="false" v-if="handleStatus" :destroy-on-close="true">
                <Workflow :list="fromList" @updateForm="updateForm" :requestForm="requestForm" :request_formTitle="request_form.title"/>
                <!-- 后期维护 -->
            </el-dialog>
        </div>
    </div>

</template>

<script>
import Tabs from "../../../../components/el-tabs";
import Table from "../../../../components/el-form";
import Seach from "../../../../components/el-search";
import myUpload from "../../../../components/workflowUpload";
import Workflow from "../../../../components/workflowBase";
// import FormTable from "../../../../components/el-formTable";
import {
    getTodoBase,
    getDoneBase,
    getInitiateBase,
} from "../../../../http/api.js";//../../../http/api.js
import getConfig from '../../../../config/dev.js'
export default {
    components: {
        Table,
        Tabs,
        myUpload,
        Workflow,
        // FormTable,
        Seach
    },
    data() {
        let _self = this
        return {
            loading: false,
            rule: {
                replyContent: [
                    { required: true, message: "请添加回复内容", trigger: "blur" },
                ],
                // mkFileShareAttachList: [
                //     { required: true, message: "请添加附件", trigger: "blur" },
                // ],
            },
            form: {
                needName: '147258369'
            }, //表单数据
            fromList: {
                needName: '147258369'
            }, //表单数据
            fileInfo: {
                type: "bt1n",
                typename: "上传文件",
                // limit: 5,
                url: "/market/waf/upload",
                fileList: [],
            },
            list: {},
            backlogTypeoptions: [{
                name: '风控问题反馈',
                code: '风控问题反馈'
            },
            {
                name: '自查评估材料收集',
                code: '自查评估材料收集'
            }],
            disabled: false,
            pageNo: 1,//页码
            destroy: false,//处理
            handleStatus: false,//处理
            tableName: "fxfk_process",

            request_form: {
                userId: "",
                userName: "",
                path: this.$router.currentRoute.name,
                userCode: JSON.parse(window.sessionStorage.userInfo).loginNo,
                // path:this.$roter.options.routers,
                // nextDealMan:'',
                title: "title",
                businessKey: "288",
                processDefinitionKey: "fxfk_process",//流程key
            },
            requestForm: {
                // fresourceId: "c9104902-6575-11ed-8e1e-d6cd97160e00", // 本地环境
                // fresourceId: "canvas", // 生产环境
                // fresourceId: "3124a2d4-7209-11ed-8d6f-00505687dcd3", //测试91环境
                fresourceId: getConfig().riskMaterialsfresourceId, 
                processDefinitionKey: "fxfk_process",
            },
            dialogStatus: false, //dialog显示
            clickTagNameTop: 'First',//头部tab
            clickTagName: 'first',
            dialogTitle: '',//dialogtit
            startStatus: false,//处理状态按钮
            closeStatus: false, //关闭按钮状态
            saveStatus: false, //保存按钮状态
            tabListTop: [
                {
                    index: "First",
                    label: "风控材料学习",
                },
                {
                    index: "Two",
                    label: "风险点自查评估及问题反馈",
                },
            ],
            lables: {
                height: "400",
                titledata: [
                    {
                        label: "环节名称",
                        prop: "taskName",
                        //width: 300,
                    },
                    {
                        label: "处理人",
                        prop: "assignee",
                        //width: 300,
                    },
                    {
                        label: "到达时间",
                        prop: "startTime",
                        //width: 300,
                    },
                    {
                        label: "处理时间",
                        prop: "endTime",
                        //width: 300,
                    },
                    {
                        label: "回复意见",
                        prop: "content",
                        //width: 300,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 0, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: true, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: function () { }, // 自定义事件
                        },
                    ],
                },
            },
            tabListMain: [
                {
                    index: "first",
                    label: "我的工单",
                    number: "",
                },
                {
                    index: "two",
                    label: "待审批",
                    number: "",
                },
                {
                    index: "three",
                    label: "已处理",
                    number: "",
                },
            ],
            lableTable: {},//传给子组件table
            Firstlabel: {
                name: "first",
                height: "400",
                titledata: [
                    {
                        label: "材料名称",
                        prop: "materialName",
                        // width: 400,
                    },
                    {
                        label: "发布人",
                        prop: "proposer",
                        // width: 400,
                    },
                    {
                        label: "发布时间",
                        prop: "proposerTime",
                        // width: 400,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 100, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: true, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "100", // 根据实际情况给宽度
                    data: [
                        {
                            label: "下载", // 操作名称
                            type: "", //按钮类型
                            handleRow: function (e, r, o) {
                                console.log(e);
                                console.log(r);
                                console.log(o);
                                _self.getRiskform(r)
                                // _self.uploadRisk(r)
                            }, // 自定义事件
                        },
                    ],
                },
            },//风控材料学习
            firstlabel: {
                height: "400",
                titledata: [
                    {
                        label: "待办事项名称",
                        prop: "need_name",
                        //width: 300,
                        color: "#0682CD",
                    },
                    {
                        label: "待办事项类型",
                        prop: "backlog_type",
                        //width: 300,
                    },
                    {
                        label: "结束时间",
                        prop: "finish_time",
                        //width: 300,
                    },
                    {
                        label: "发起人",
                        prop: "proposer",
                        //width: 300,
                    },
                    {
                        label: "发起时间",
                        prop: "proposer_time",
                        //width: 300,
                    },
                    {
                        label: "办理人",
                        prop: "transactor",
                        //width: 300,
                    },
                    {
                        label: "状态",
                        prop: "taskName",
                        //width: 300,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 10, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: function () { }, // 自定义事件
                        },
                    ],
                },
            },
            twolabel: {
                height: "400",
                titledata: [
                    {
                        label: "待办事项名称",
                        prop: "need_name",
                        //width: 300,
                        color: "#0682CD",
                    },
                    {
                        label: "待办事项类型",
                        prop: "backlog_type",
                        //width: 300,
                    },
                    {
                        label: "结束时间",
                        prop: "finish_time",
                        //width: 300,
                    },
                    {
                        label: "发起人",
                        prop: "proposer",
                        //width: 300,
                    },
                    {
                        label: "发起时间",
                        prop: "proposer_time",
                        //width: 300,
                    },
                    {
                        label: "办理人",
                        prop: "transactor",
                        //width: 300,
                    },
                    {
                        label: "状态",
                        prop: "taskName",
                        //width: 300,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 10, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: function () { }, // 自定义事件
                        },
                    ],
                },
            },
            threelabel: {
                height: "400",
                titledata: [
                    {
                        label: "待办事项名称",
                        prop: "need_name",
                        //width: 300,
                        color: "#0682CD",
                    },
                    {
                        label: "待办事项类型",
                        prop: "backlog_type",
                        //width: 300,
                    },
                    {
                        label: "结束时间",
                        prop: "finish_time",
                        //width: 300,
                    },
                    {
                        label: "发起人",
                        prop: "proposer",
                        //width: 300,
                    },
                    {
                        label: "发起时间",
                        prop: "proposer_time",
                        //width: 300,
                    },
                    {
                        label: "办理人",
                        prop: "transactor",
                        //width: 300,
                    },
                    {
                        label: "状态",
                        prop: "taskName",
                        //width: 300,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 10, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: function () { }, // 自定义事件
                        },
                    ],
                },
            },

            filterData: {
                timeSelect: false, //是否显示日期控件
                sreach: true,
                restet: false,
                elinput: [
                    {
                        name: "材料名称", //提示语275
                        key: "materialName", //字段名
                        width: 275, //宽度
                    },
                ],
            },
            savestatusBtn: false,
            searchBox: {},
            daibanfinish: false,
            formid: '',
            formneedname: '',

        }
    },
    methods: {
        //风控材料学习
        getRiskform(row) {
            this.$http({
                url: "/market/FxfkProcessMaterial/query",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: { id: row.id },
            }).then((res) => {
                // console.log(res.data.wfFileShareAttachList)
                this.fromList.materialName = res.data.materialName
                this.fromList.mkFileShareAttachList = res.data.wfFileShareAttachList
                this.download()
            });
        },
        downloadOne(e) {
            let list = {
                id: e.fileCode,
                fileName: e.fileName,
            };
            this.$http({
                url: "/market/waf/downFile",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                responseType: "blob",
                data: list,
            }).then((response) => {
                console.log(response);
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    let blob = new Blob([response.data], {
                        type: "application/vnd.ms-excel",
                    });
                    //window.navigator.msSaveOrOpenBlob(blob, this.form.needName);
                    window.navigator.msSaveOrOpenBlob(
                        blob,
                        list.fileName
                    );
                } else {
                    /* 火狐谷歌的文件下载方式 */
                    var blob = new Blob([response.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download =
                        list.fileName;
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }
            });
        },
        download(e) {
            if (this.fromList.mkFileShareAttachList.length > 1) {
                this.$http({
                    url: "/market/CMKFile/downAllFile",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: { mkFileShareAttachList: this.fromList.mkFileShareAttachList },
                }).then((response) => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            new Date().getTime().toString() + ".zip"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = this.fromList.materialName + ".zip";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                    if (this.infolist.authType === "3") {
                        this.dialogCli(10);
                    }
                });
            } else {
                let list = {
                    id: this.fromList.mkFileShareAttachList[0].fileCode,
                    fileName: this.fromList.mkFileShareAttachList[0].fileName,
                };
                this.$http({
                    url: "/market/waf/downFile",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: list,
                }).then((response) => {
                    console.log(response);
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([response.data], {
                            type: "application/vnd.ms-excel",
                        });
                        //window.navigator.msSaveOrOpenBlob(blob, this.form.needName);
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            this.fromList.mkFileShareAttachList[0].fileName
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([response.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download =
                            this.fromList.mkFileShareAttachList[0].fileName;
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            }
        },
        //上传文件钩子函数
        clickUpload(file) { },
        //下载文件
        downExcel() {
            this.$http({
                url: "/market/waf/downLoadTemp",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                responseType: "blob",
                data: {},
            }).then((response) => {
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    let blob = new Blob([response.data], {
                        type: "application/vnd.ms-excel",
                    });
                    window.navigator.msSaveOrOpenBlob(
                        blob,
                        new Date().getTime().toString() + ".zip"
                    );
                } else {
                    /* 火狐谷歌的文件下载方式 */
                    var blob = new Blob([response.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = this.form.needName + ".zip";
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }
            });
        },
        uploadBack(v) {
            if (this.fromList.mkFileShareAttachList) {
                this.fromList.mkFileShareAttachList = [];
                this.fromList.mkFileShareAttachList = v;
            } else {
                let mkFileShareAttachList = [];
                mkFileShareAttachList = v;
                this.$set(this.fromList, "mkFileShareAttachList", mkFileShareAttachList);
            }
        },
        delloadBack(v) {
            this.fromList.mkFileShareAttachList = v;
            // this.$http({
            //     url: "/market/waf/update",
            //     method: "post",
            //     headers: {
            //         "Content-Type": "application/json",
            //     },
            //     data: this.fromList,
            // }).then((res) => {
            //     console.log(res);
            //     // if (res.data.result === 0) {
            //     //   this.$message.success("工作流更新成功");
            //     // }
            // });
        },
        //风控材料学习
        getRiskList(e) {
            this.$http({
                url: "/market/FxfkProcessMaterial/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + this.pageNo + '","pageSize":"10"}',
                },
                data: this.searchBox,
            }).then((res) => {
                this.lableTable.data = res.data.data;
                this.lableTable.pageData.total = res.data.totalRecord;
                this.loading = false;
            });
        },
        //风控材料下载
        uploadRisk(e) {
            this.$http({
                url: "/market/FxfkProcessMaterial/downFile",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                responseType: "blob",
                data: {
                    materialName: e.materialName,
                    id: e.accessoryId
                },
            }).then((response) => {
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    let blob = new Blob([response.data], {
                        type: "application/vnd.ms-excel",
                    });
                    window.navigator.msSaveOrOpenBlob(
                        blob,
                        new Date().getTime().toString() + ".zip"
                    );
                } else {
                    /* 火狐谷歌的文件下载方式 */
                    var blob = new Blob([response.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = this.fromList.needName + ".zip";
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }
            });
        },
        //获取页码
        changeNum(e) {
            console.log(e)
            this.pageNo = e;
            if (this.clickTagNameTop == 'First') {
                this.Firstlabel.pageData.pageNum = e;
                this.getRiskList()
            } else {
                if (this.clickTagName == 'first') {
                    this.firstlabel.pageData.pageNum = e;
                    this.getMeLaunch()
                }
                if (this.clickTagName == 'two') {
                    this.twolabel.pageData.pageNum = e;
                    this.getQueryList();
                }
                if (this.clickTagName == 'three') {
                    this.threelabel.pageData.pageNum = e;
                    this.getQueryDone();
                }
            }
        },
        //获取页码
        changeSize(e) {
            console.log(11111);
        },
        //点击工单状态跳转需求流程显示页面
        clickDemand(e, res) {
            console.log(e);
            console.log(res);
            if (e === "待办事项名称") {
                if (this.clickTagName === "first") {//发起
                    console.log(res.taskName)
                    this.dialogTitle = "发起";
                    this.closeStatus = true;
                    if (res.taskName == "办理人员提交" || res.taskName == "起草") {
                        this.disabled = false;
                        this.startStatus = true;
                        this.saveStatus = true;
                        this.rule = {
                            replyContent: [
                                { required: true, message: "请添加回复内容", trigger: "blur" },
                            ],
                        }
                    } else {
                        this.disabled = true;
                        this.startStatus = false;
                        this.saveStatus = false;
                        this.rule = {}
                    }
                }
                if (this.clickTagName === "two") {//代办
                    this.dialogTitle = "处理";
                    if (res.taskName == "办理人员提交" || res.taskName == "起草") {
                        this.savestatusBtn = false
                        this.disabled = false;
                        this.startStatus = true;
                        this.saveStatus = true;
                        this.closeStatus = true;
                        this.rule = {
                            replyContent: [
                                { required: true, message: "请添加回复内容", trigger: "blur" },
                            ],
                        }
                    } else {
                        this.savestatusBtn = true
                        this.disabled = true;
                        this.rule = {}
                        this.closeStatus = true;
                        this.startStatus = true;
                        this.saveStatus = false;
                    }
                }
                if (this.clickTagName === "three") {//已办
                    this.dialogTitle = "查看";
                    this.closeStatus = true;
                    this.startStatus = false;
                    this.saveStatus = false;
                    this.disabled = true;
                }
                this.dialogStatus = true
                this.fromList = res;
                this.clickForm(res);
                this.getFromQuery(res);
            }
        },
        //查询form表单数据
        getFromQuery(e) {
            this.formid = e.id
            this.formneedname = e.need_name
            this.$http({
                url: "/market/fxfkProcess/query",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: { id: e.id },
            }).then((res) => {
                this.fromList = res.data;
                this.dialogStatus = true;
                // console.log(this.$refs.formTable);
                this.fileInfo.fileList = res.data.processAccessoryList;
                this.fromList.mkFileShareAttachList = res.data.processAccessoryList;
                if (this.fromList.mkFileShareAttachList) {
                    this.fromList.mkFileShareAttachList.map((item) => {
                        item.name = item.fileName;
                    })
                }
                this.fromList.resourceId = e.resourceId
                this.fromList.createId = e.transactor_no
                this.taskId = res.data.taskId;

            });
        },
        async clickForm(e) {
            let list = {
                processInstanceId: e.process_id,
                // taskId:e.taskId
            };
            let _this = this;
            let obj = {
                url: this.$url.formList.getCommentsByProcessId, //流程追踪接口
                data: list,
                headers: {
                    "Content-Type": "application/json",
                },
            };

            let res = await this.common.httpPost(obj, success);
            function success(data) {
                data.data.data.map((item) => {
                    item.startTime = _this.$util.datetimeFormat(item.startTime);
                    item.endTime = _this.$util.datetimeFormat(item.endTime);
                });
                _this.lables.data = data.data.data;

            }
        },
        handleClose() {//关闭弹窗
            this.dialogStatus = false;
            // this.forwardStatus = false;
            // this.exportBtnStatus = false;
            // this.saveStatus = false;
            // this.startStatus = true;
            // this.closeStatus = true;
            this.fromList = {};
        },
        async clickSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.fromList.mkFileShareAttachList) {
                        if (this.fromList.mkFileShareAttachList.length > 0) {
                            console.log(this.$refs.form.model)
                            this.savestatusBtn = true
                            if (this.fromList.id) {
                                if (this.fromList.mkFileShareAttachList) {

                                    let attList = [];
                                    for (let i = 0; i < this.fromList.mkFileShareAttachList.length; i++) {
                                        attList.push(this.fromList.mkFileShareAttachList[i].id);
                                    }
                                    this.fromList.processAccessoryList = attList;
                                }
                                // if (this.fromList.processAccessoryList) {
                                //     let attList = [];
                                //     for (let i = 0; i < this.fromList.processAccessoryList.length; i++) {
                                //         attList.push(this.fromList.processAccessoryList[i].id);
                                //     }
                                //     this.fromList.processAccessoryList = attList;
                                // }
                                this.fromList.tableName = this.tableName;
                                this.request_form.title = '[市场经营管理平台]-风险点防控-'+this.fromList.needName;
                                this.$http({
                                    url: "/market/fxfkProcess/update",
                                    method: "post",
                                    headers: {
                                        "Content-Type": "application/json",
                                    },
                                    data: {
                                        id: this.fromList.id,
                                        processAccessoryIdList: this.fromList.processAccessoryList,
                                        replyContent: this.fromList.replyContent
                                    },
                                }).then((res) => {
                                });
                                this.setUpdate(this.fromList);
                            } else {
                                this.getUserIds();
                                this.setForm();
                            }
                        } else {
                            this.$message.error("请添加附件");
                            return false;
                        }

                    }
                    else {
                        this.$message.error("请添加附件");
                        return false;
                    }
                } else {
                    this.$message.error("请完善表单信息");
                    return false;
                }
            });
        },
        //获取自己idname
        getUserIds() {
            this.$http({
                url: "/market/waf/queryRoleByName",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    userCode: JSON.parse(window.sessionStorage.userInfo).loginNo,
                },
            }).then((res) => {
                this.request_form.userName = res.data.data.rows[0].name;
                this.request_form.userId = res.data.data.rows[0].userCode;
                console.log(this.request_form)
            });
        },
        setForm(e) {
            // console.log(this.$refs.form)
            this.request_form.title = '[市场经营管理平台]-风险点防控-'+this.fromList.needName;
            // this.request_form.title = this.$refs.form.needName;
            // this.$refs.form.taskId = e;
            this.$http({
                url: "/market/waf/add",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                // data: this.$refs.form,
                data: this.fromList,
            }).then((res) => {
                this.request_form.businessKey = res.data.body;
                this.fromList.id = res.data.body;
                this.formWorkId = res.data.body;
                this.clickHandle(res.data.body);
            });
        },
        async clickHandle(e) {
            let _this = this;
            let obj = {
                url: this.$url.formList.startWork, //开始工作流接口
                data: _this.request_form,
                status: "form",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            };

            let res = await this.common.httpPost(obj, success);
            function success(data) {
                _this.fromList.taskId = data.data;
                _this.taskId = data.data;
                let list = {
                    id: e,
                    // taskId:_this.formId,
                    processId: _this.fromList.taskId,
                    // resourceId: _this.nextPath.currentShape[0].resourceId,
                };
                _this.setUpdate(list);
            }
        },
        //更新工作流接口
        setUpdate(e) {

            this.$http({
                url: "/market/waf/updateBase",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: e,
            }).then((res) => {
                this.fromList.taskId = res.data.body[0].taskId;
                // this.fromList.taskId = '1111111111';
                this.fromList.taskName = res.data.body[0].taskName;
                // if (res.data.body.taskName === "起草") {
                //     this.isSync = res.data.body.isSync;
                // } else {
                //     this.isSync = "1";
                // }
                if (res.data.result === 0) {
                    this.$message.success("工作流更新成功");
                }
            });
        },
        //处理按钮,开始工作流接口
        clickHandles() {
            console.log(this.lables.data.length);
            if (this.lables.data.length == 1) {
                if (this.savestatusBtn) {
                    this.destroy = true;
                    this.handleStatus = true;
                    this.request_form.title = '[市场经营管理平台]-风险点防控-'+this.fromList.needName;
                } else {
                    this.$message.error("请先点击保存按钮");
                }
            } else {
                this.destroy = true;
                this.handleStatus = true;
                this.request_form.title = '[市场经营管理平台]-风险点防控-'+this.fromList.needName;
            }
        },
        //处理关闭
        handleCloses() {
            // this.treeList = [];
            // this.textarea = "";
            this.handleStatus = false;
            this.usernumber()
        },
        updateForm() {
            this.dialogStatus = false;
            this.handleCloses();
            this.usernumber()
            // if (this.daibanfinish) {
            //zoujiekou
            console.log('完成发起代办');
            console.log(this.formneedname);
            console.log(this.formid);
            this.$http({
                url: "/market/fxfkProcess/complateFxfkProcessOA",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    transactorNo: JSON.parse(window.sessionStorage.userInfo).loginNo,
                    needName: this.formneedname,
                    id: this.formid,
                },
            }).then((res) => {

            });
            //     this.daibanfinish = false
            // }
            if (this.clickTagName == 'first') {
                this.lableTable = this.firstlabel
                this.getMeLaunch()
            }
            if (this.clickTagName == 'two') {
                this.lableTable = this.twolabel
                this.getQueryList();
            }
            if (this.clickTagName == 'three') {
                this.lableTable = this.threelabel
                this.getQueryDone();
            }
        },
        clickTabMains(e) {
            console.log(e);
            this.clickTagName = e
            this.pageNo = 1
            this.$refs.TableList.page = 1;
            if (this.clickTagName == 'first') {
                this.lableTable = this.firstlabel
                this.getMeLaunch()
            }
            if (this.clickTagName == 'two') {
                this.lableTable = this.twolabel
                this.getQueryList();
            }
            if (this.clickTagName == 'three') {
                this.lableTable = this.threelabel
                this.getQueryDone();
            }
        },
        //风控材料搜索内容
        seachList(e) {
            this.searchBox = e
            this.getRiskList(e)
        },
        clickTabTops(e) {
            console.log(e);
            this.clickTagNameTop = e
            this.pageNo = 1
            this.$refs.TableList.page = 1;
            if (this.clickTagNameTop == 'First') {
                this.lableTable = this.Firstlabel
                this.getRiskList()
            } else {
                this.usernumber()
                if (this.clickTagName == 'first') {
                    this.lableTable = this.firstlabel
                    this.getMeLaunch()
                }

            }
        },
        adminhandleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        adminhandleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },

        //我的待办
        getQueryList(e, status) {
            this.loading = true;
            getTodoBase(this.pageNo, "", e || { tableName: this.tableName }).then((res) => {
                if (status === 0) {
                    this.clickDemand("待办事项名称", res.data.data[0]);
                }
                this.lableTable.data = res.data.data;

                // this.lableTable.data.map((item) => {
                //     item.status = "1";
                // });
                this.lableTable.pageData.total = res.data.totalRecord;
                this.tabListMain[1].number = res.data.totalRecord
                this.loading = false;
            });
        },
        //我的已办
        getQueryDone() {
            this.loading = true;
            getDoneBase(this.pageNo, "", { tableName: this.tableName, }).then((res) => {
                this.lableTable.data = res.data.data;

                // this.lableTable.data.map((item) => {
                //     item.status = "2";
                // });
                this.lableTable.pageData.total = res.data.totalRecord;
                this.tabListMain[2].number = res.data.totalRecord
                this.loading = false;
            });
        },
        //我发起的
        getMeLaunch(e, status) {
            this.loading = true;
            getInitiateBase(this.pageNo, "", e || { tableName: this.tableName }).then((res) => {
                if (status === 0) {
                    this.clickDemand("待办事项名称", res.data.data[0]);
                }
                this.lableTable.data = res.data.data;
                // this.lableTable.data.map((item) => {
                //     if (item.taskName === "起草") {
                //         item.status = "1";
                //     } else {
                //         item.status = "2";
                //     }
                // });

                this.lableTable.pageData.total = res.data.totalRecord;
                this.tabListMain[0].number = res.data.totalRecord
                this.loading = false;
            });
        },
        usernumber(e) {
            getInitiateBase(this.pageNo, "", e || { tableName: this.tableName }).then((res) => {
                this.tabListMain[0].number = res.data.totalRecord
            });
            getDoneBase(this.pageNo, "", { tableName: this.tableName, }).then((res) => {
                this.tabListMain[2].number = res.data.totalRecord
            });
            getTodoBase(this.pageNo, "", e || { tableName: this.tableName }).then((res) => {
                this.tabListMain[1].number = res.data.totalRecord
            });
        }
    },
    created() {
        //oa跳转回来显示
        let status = JSON.stringify(this.$route.query) == "{}";
        if (status) {
            this.lableTable = this.Firstlabel
            this.getRiskList()
        } else {
            let { id, type } = this.$route.query;
            // console.log(this.$route.query);
            // console.log(type);
            //代办    发起 5
            this.clickTagNameTop = 'Two'
            if (type == 5) {
                let list = {
                    id: id,
                    tableName: this.tableName
                };
                this.daibanfinish = true
                this.usernumber()
                this.clickTagName = 'first'
                this.lableTable = this.firstlabel
                this.getMeLaunch(list, 0)//发起
            } else {
                let list = {
                    taskId: id,
                    tableName: this.tableName
                };
                this.usernumber()
                this.clickTagName = 'two'
                this.lableTable = this.twolabel
                this.getQueryList(list, 0);//代办
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.copyClass {
    display: flex;
}

.flex-header-text-tree {
    width: 50%;
    text-align: center;
}

::v-deep .el-form-item {
    width: 100%;
}

.active {
    background-color: #f3faff;
}

.flex-common {
    padding: 10px 5%;
    font-size: 18px;
}

.flex-buttons {
    background-color: #cde4f6;
    border-color: #cde4f6;
    color: #606266;
}

.flex-button {
    margin-top: 10px;
    margin-bottom: 10px;

    ::v-deep .el-button--primary {
        width: 222px;
    }
}

.flex-left-header-text {
    height: 40px;
    line-height: 40px;
    color: black;
    padding-left: 10px;
    background-color: #cde4f6;
    font-size: 18px;
    font-weight: bold;
}

.flex-right-text {
    margin-right: 20px;
    width: 50%;
}

.flex-handle {
    width: 100%;
    padding: 30px;
    display: flex;

    .flex-right {
        width: 50%;
        border: 1px solid #e1e1e1;
        margin-left: 20px;
    }

    .flex-left {
        width: 50%;
        display: flex;
        flex-direction: column;

        .flex-left-header {
            display: flex;
            justify-content: space-around;
        }
    }
}

.table-title {
    height: 50px;
    line-height: 50px;
    background-color: #f3faff;
    font-size: 18px;
    font-weight: bold;
}

::v-deep .el-dialog {
    margin-top: 0 !important;
}

::v-deep .el-table__fixed-body-wrapper {
    top: 50px !important;
}

.flex-box {
    display: flex;
    width: calc(100% - 40px);
    border-radius: 20px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    flex-direction: column;

    .flex-load {
        display: flex;
        width: 100%;
        position: relative;
        margin: 1%;
        border-bottom: 1px solid #e1e1e1;
        justify-content: space-between;
    }

    .flex-header {
        display: flex;
        width: 100%;
        position: relative;
        // height: 60px;
        margin: 1%;
        border-bottom: 1px solid #e1e1e1;

        // justify-content: space-between;
        // ::v-deep .el-form-item {
        //     width: 30%;
        //     margin-right: 5%;
        // }

        .el-button {
            width: 150px;
            float: right;
            height: 40px !important;
            margin-right: 30px;
        }
    }
}

//设置子组件样式
::v-deep .el-tabs__item {
    padding: 0;
    margin-right: 20px;
    width: 166px;
    text-align: center;
    background-color: #d8eaf6;
    color: black;
}

::v-deep .is-active {
    color: #fff;
    background-color: #0583cd;
}

::v-deep .el-select {
    width: 100%;
}

::v-deep .el-tabs__active-bar {
    display: none;
}

::v-deep .el-tabs__nav-wrap::after {
    display: none !important;
}

.flex-form {
    margin-top: 50px;
}

.flex-footer-botton {
    display: flex;
    justify-content: space-evenly;
}
</style>