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

<template>
    <div class="flex-box1">
        <div :span="24" class="flex-header">
            <Tabs :tabList="tabListTop" @status="clickTabTops">
            </Tabs>
            <el-button type="primary" @click="clickNewTag(clickTagNameTop)">+新建</el-button>
        </div>

        <div class="flex-count" v-if="this.clickTagNameTop == 'First'">
            <Table @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="seachList1"></Seach>
                </template>
            </Table>
        </div>
        <div class="flex-count" v-if="this.clickTagNameTop == 'Two'">
            <Seach :list="filterDataTwo" @seachList="seachList2"></Seach>
            <!-- <el-table :data="tableData" style="width: 100%" @expand-change="expandChange" ref="refTable" height="600px" max-height="600px"> -->
            <el-table :data="tableData" style="width: 100%" ref="refTable" height="400px" max-height="400px">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <!-- <el-table v-loading="loading2" :data="props.row.fxfkProcessList" size="mini" style="width: 95%;margin-left: 5%;"> -->
                        <el-table :data="props.row.fxfkProcessList" size="mini" style="width: 95%;margin-left: 5%;"
                            @cell-click="getRowList">
                            <el-table-column label="序号" type="index" width="50">
                            </el-table-column>
                            <el-table-column label="待办事项名称" prop="needName"></el-table-column>
                            <el-table-column label="待办事项类型" prop="backlogType"></el-table-column>
                            <el-table-column label="回复部门" prop="replyDepartment"></el-table-column>
                            <el-table-column label="办理人" prop="transactor">
                                <template slot-scope="scope">
                                    <span style="color:blue;cursor: pointer;">{{ scope.row.transactor }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="状志" prop="taskname"></el-table-column>
                            <el-table-column label="回复内客" prop="replyContent"></el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="待办事项名称" prop="needName">
                </el-table-column>
                <el-table-column label="待办事项类型" prop="backlogType">
                </el-table-column>
                <el-table-column label="结束时间" prop="finishTime">
                </el-table-column>
                <el-table-column label="发起人" prop="proposer">
                </el-table-column>
                <el-table-column label="状态" prop="status">
                </el-table-column>
                <el-table-column label="当前进度" prop="progressBar">
                    <template slot-scope="props">
                        <el-progress :percentage="props.row.progressBar"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="getRiskadminform(scope.row)">
                            导出</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="display: flex; flex-direction: row-reverse" v-if="adminpageData.total > 0"
                :current-page.sync="adminpageData.pageNum" :page-sizes="
                    adminpageData.pageSizes ? adminpageData.pageSizes : [5, 10, 15, 20]
                " :page-size="adminpageData.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="adminpageData.total" @size-change="adminhandleSizeChange"
                @current-change="adminhandleCurrentChange" />
        </div>
        <el-dialog title="添加" :visible.sync="dialogStatus" width="60%" :before-close="handleClose" :modal="false"
            v-if="dialogStatus" :destroy-on-close="true">

            <!-- 后期维护 -->
            <el-form ref="form" :model="fromList" :rules="rule" label-width="130px" style="margin-top: 30px">
                <div class="flex-header" v-if="this.clickTagNameTop == 'First'">
                    <el-form-item label="材料名称:" prop="materialName">
                        <el-input v-model="fromList.materialName"></el-input>
                    </el-form-item>
                </div>
                <div class="flex-header" v-if="this.clickTagNameTop == 'Two'">
                    <el-form-item label="待办事项名称:" prop="needName">
                        <el-input v-model="fromList.needName"></el-input>
                    </el-form-item>
                </div>
                <div class="flex-header" v-if="this.clickTagNameTop == 'Two'">
                    <el-form-item label="待办事项类型:" label-width="130px" prop="backlogType">
                        <el-select v-model="fromList.backlogType" placeholder="请选择待办事项类型" 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" prop="finishTime">
                        <el-date-picker type="date" placeholder="选择日期" v-model="fromList.finishTime"
                            value-format="yyyy-MM-dd" style="width: 100%" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div class="flex-header" v-if="this.clickTagNameTop == 'Two'">
                    <el-form-item label="待办事项说明:" prop="backlogExplain">
                        <el-input type="textarea" v-model="fromList.backlogExplain"></el-input>
                    </el-form-item>
                </div>
                <div class="flex-load" style="display: flex; flex-direction: column">
                    <el-form-item label="附件:" prop="mkFileShareAttachList">
                        <my-upload @uploadBack="uploadBack" @delloadBack="delloadBack" @clickDownload="download"
                            :fileInfo="fileInfo" :fileList="fromList.mkFileShareAttachList"
                            style="width: 30% !important"></my-upload>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="clickSave(1)">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="人员" :visible.sync="dialogTreeStatus" width="100%" style="height: 100%" :fullscreen="true"
            :before-close="handleClose2" :modal="false" v-if="dialogTreeStatus" :destroy-on-close="true">
            <div style="height: 100%">
                <deptTreeOnly @treeCheck="treeCheckonly" :defaultList="defaultList" :type="depttype"
                    :closeList="closeList">
                </deptTreeOnly>
                <div style="text-align: center; margin-top: 30px">
                    <el-button type="primary" @click="clickSave(2)">确 定</el-button>
                    <el-button @click="dialogTreeStatus = false;">取 消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="查看" :visible.sync="dialogadminStatus" width="100%" :before-close="handleAdminClose"
            :modal="false" v-if="dialogadminStatus" :destroy-on-close="true">
            <!-- 后期维护 -->
            <div style="position: fixed; z-index: 10000">
                <el-button type="primary" @click="handleAdminClose">关闭</el-button>
            </div>
            <el-form ref="form" :model="formAdmin" label-width="130px" style="margin-top: 30px">
                <div class="flex-header">
                    <el-form-item label="待办事项名称:">
                        <el-input v-model="formAdmin.needName" disabled="true"></el-input>
                    </el-form-item>

                </div>
                <div class="flex-header">
                    <el-form-item label="待办事项类型:" label-width="130px">
                        <el-select v-model="formAdmin.backlogType" placeholder="请选择待办事项类型" disabled="true"
                            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="true" v-model="formAdmin.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="formAdmin.backlogExplain" disabled="true"></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 formAdmin.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="formAdmin.replyContent" disabled="true"></el-input>
                    </el-form-item>
                </div>

                <div class="flex-load" style="display: flex; flex-direction: column">
                    <el-form-item label="回复附件:" disabled="true" prop="mkFileShareAttachList">
                        <div v-for="(item, index) in formAdmin.processAccessoryList" :key="index">
                            <span style="color: blue;cursor: pointer;" @click="downloadOne(item)">{{ item.fileName
                            }}</span>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
            <div>
                <div class="table-title">流程追踪</div>
                <Table :list="lables"></Table>
            </div>
        </el-dialog>

    </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 deptTreeOnly from "../../../../components/newTree.vue";
import { updateBase } from "../../../../http/api.js";
import {
    getTodoBase,
    getDoneBase,
    getInitiateBase,
} from "../../../../http/api.js";//../../../http/api.js
import getConfig from '../../../../config/dev.js'
import { log } from "console";
export default {
    components: {
        Table,
        myUpload,
        deptTreeOnly,
        Tabs,
        Seach
    },
    data() {
        let _self = this
        return {
            pickerOptions: {
                //设置禁用状态，参数为当前日期
                disabledDate(time) {
                    // return time.getTime() < Date.now(); //当天不可选
                    return time.getTime() < new Date().getTime() - 86400000; //  - 86400000是否包括当天
                },
            },
            pageNo: 1,//页码
            //用到的人
            treeListonly: {},
            defaultList: [],
            closeList: false,
            depttype: 0,
            request_form: {
                userId: "",
                userName: "",
                // path: this.$router.currentRoute.name,
                path: 'riskMaterials',
                userCode: JSON.parse(window.sessionStorage.userInfo).loginNo,
                title: "",
                businessKey: "288",
                processDefinitionKey: "fxfk_process",//流程key
            },
            requestForm: {
                // fresourceId: "0d94de8a-0281-11ed-a302-4ae7da54db39", // 本地环境
                // fresourceId: "canvas", // 生产环境
                // fresourceId: "bf79721c-33f3-11ed-ba0b-00505687dcd3", //测试环境
                fresourceId: getConfig().riskMaterialsfresourceId, 
                processDefinitionKey: "fxfk_process",
            },
            rule: {
                materialName: [
                    { required: true, message: "请添加材料名称", trigger: "blur" },
                ],
                needName: [
                    { required: true, message: "请添加待办事项名称", trigger: "blur" },
                ],
                finishTime: [
                    { required: true, message: "请选择结束时间", trigger: "blur" },
                ],
                backlogType: [
                    { required: true, message: "请选择待办事项类型", trigger: "blur" },
                ],
                backlogExplain: [
                    { required: true, message: "请添加待办事项说明", trigger: "blur" },
                ],
                mkFileShareAttachList: [
                    { required: true, message: "请添加附件", trigger: "blur" },
                ],
            },
            fileInfo: {
                type: "bt1n",
                typename: "上传文件",
                // limit: 5,
                url: "/market/FxfkProcessMaterial/upload",
                fileList: [],
            },
            formAdmin: {},
            fromList: {
                // needName: '147258369'
            }, //表单数据
            backlogTypeoptions: [{
                name: '风控问题反馈',
                code: '风控问题反馈'
            },
            {
                name: '自查评估材料收集',
                code: '自查评估材料收集'
            }],
            dialogStatus: false,
            dialogTreeStatus: false,
            clickTagNameTop: 'First',//头部tab
            tabListTop: [
                {
                    index: "First",
                    label: "风控材料学习",
                    name: "prosss_key",
                },
                {
                    index: "Two",
                    label: "风险点自查评估及问题反馈",
                },
            ],
            lableTable: {},//传给子组件table
            FirstlabelAdmin: {
                name: "first",
                height: "400",
                titledata: [
                    {
                        label: "材料名称",
                        prop: "materialName",
                        width: 300,
                    },
                    {
                        label: "发布人",
                        prop: "proposer",
                        width: 300,
                    },
                    {
                        label: "发布时间",
                        prop: "proposerTime",
                        width: 300,
                    },
                ], //表格头
                data: [], //内容数据
                loading: true,
                loading2: false,
                pageData: {
                    total: 15, // 总条数
                    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)
                            }, // 自定义事件
                        },
                        {
                            label: "删除", // 操作名称
                            type: "", //按钮类型
                            handleRow: function (e, r, o) {
                                console.log(e);
                                console.log(r);
                                console.log(o);
                                _self.$confirm("即将删除此条数据, 是否删除?", "提示", {
                                    confirmButtonText: "确定",
                                    cancelButtonText: "取消",
                                    type: "warning",
                                })
                                    .then(() => {
                                        _self.delRiskform(r)
                                    })
                                    .catch(() => { });

                            }, // 自定义事件
                        },
                    ],
                },
            },//风控材料学习
            searchBox: {},
            attList: [],
            filterData: {
                timeSelect: false, //是否显示日期控件
                sreach: true,
                restet: false,
                elinput: [
                    {
                        name: "材料名称", //提示语275
                        key: "materialName", //字段名
                        width: 275, //宽度
                    },
                ],
            },
            filterDataTwo: {
                timeSelect: false, //是否显示日期控件
                sreach: true,
                restet: false,
                elinput: [
                    {
                        name: "待办事项名称", //提示语275
                        key: "needName", //字段名
                        width: 275, //宽度
                    },
                ],
            },
            tableData: [],
            breBroodsList: [],

            adminpage: 1,
            adminpageData: {
                total: 15, // 总条数
                pageSizes: 10, // 每页数量
                pageNum: 1, // 页码
            },
            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: 10, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: false, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: true, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: function () { }, // 自定义事件
                        },
                    ],
                },
            },
            dialogadminStatus: false,
        }
    },
    methods: {
        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);
                }
            });
        },
        handleAdminClose() {
            this.dialogadminStatus = false
        },
        getRowList(row, column, event, cell) {
            if (column.label == "办理人") {
                console.log(row);
                console.log(row.id);
                this.clickForm(row);
                this.getFromQuery(row);
                this.dialogadminStatus = true

            }
        },
        //查询form表单数据
        getFromQuery(e) {
            this.$http({
                url: "/market/fxfkProcess/query",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: { id: e.id },
            }).then((res) => {
                this.formAdmin = res.data;
                // this.dialogStatus = true;
                // console.log(this.$refs.formTable);
                // this.fileInfo.fileList = res.data.mkFileShareAttachList;
                this.formAdmin.mkFileShareAttachList = res.data.mkFileShareAttachList;
                this.formAdmin.resourceId = e.resourceId
                this.formAdmin.createId = e.transactor
                // this.taskId = res.data.taskId;

            });
        },
        async clickForm(e) {
            let list = {
                processInstanceId: e.processId,
                // 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;
            }
        },
        treeCheckonly(v) {
            this.treeListonly = v;
        },
        //风控材料学习
        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;
            });
        },
        getRiskadminList(e) {
            this.loading2 = true;
            this.$http({
                url: "/market/fxfkProcess/queryFxfkProcessCollectPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + this.pageNo + '","pageSize":"10"}',
                },
                data: this.searchBox,
            }).then((res) => {
                this.tableData = res.data.data;

                this.adminpageData.total = res.data.totalRecord;
                this.loading2 = false;
            });
        },
        //风控材料学习
        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()
            });
        },
        getRiskadminform(row) {
            this.$http({
                url: "/market/fxfkProcess/export",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                responseType: "blob",
                data: row.id,
            }).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, row.needName + row.backlogType + ".rar");
                } else {
                    /* 火狐谷歌的文件下载方式 */
                    var blob = new Blob([response.data]);
                    var downloadElement = document.createElement("a");
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = row.needName + row.backlogType + ".rar";
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }
            });
        },
        //风控材料学习
        delRiskform(row) {
            this.$http({
                url: "/market/FxfkProcessMaterial/del",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: { id: row.id },
            }).then((res) => {
                if (res.data.desc === '删除成功') {
                    this.$notify({
                        title: "成功",
                        message: res.data.desc,
                        type: "success",
                    });
                } else {
                    this.$notify({
                        title: "失败",
                        message: res.data.desc,
                        type: "error",
                    });
                }
                this.getRiskList()
            });
        },
        download() {
            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,
                            this.fromList.materialName + ".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) {//子组件判断没进去
            console.log(v);
            if (this.fromList.mkFileShareAttachList) {
                this.fromList.mkFileShareAttachList = [];
                this.fromList.mkFileShareAttachList = v;
                // this.attList=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("工作流更新成功");
            //     // }
            // });
        },
        clickNewTag(v) {
            console.log(v)
            let mkFileShareAttachList = [];
            mkFileShareAttachList = v;
            this.$set(this.fromList, "mkFileShareAttachList", mkFileShareAttachList);
            this.fromList = {}
            this.treeListonly = []
            this.dialogStatus = true
            this.attList=[]
        },
        async clickSave(v) {

            if (v == 1) {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.fromList.mkFileShareAttachList) {
                            for (let i = 0; i < this.fromList.mkFileShareAttachList.length; i++) {
                                this.attList.push(this.fromList.mkFileShareAttachList[i].id);
                            }
                        }
                        if (this.clickTagNameTop == 'Two') {
                            this.dialogTreeStatus = true
                            if (this.fromList.mkFileShareAttachList) {
                                this.fromList.adminAccessoryIdList = this.attList;
                            }

                            // this.getUserIds();
                        } else {//材料学习
                            if (this.fromList.mkFileShareAttachList) {
                                this.fromList.accessoryIdList = this.attList;
                            }

                            this.$http({
                                url: "/market/FxfkProcessMaterial/add",
                                method: "post",
                                headers: {
                                    "Content-Type": "application/json",
                                },
                                data: this.fromList,
                            }).then((res) => {
                                if (res.data.desc === '添加成功') {
                                    this.$notify({
                                        title: "成功",
                                        message: res.data.desc,
                                        type: "success",
                                    });
                                } else {
                                    this.$notify({
                                        title: "失败",
                                        message: res.data.desc,
                                        type: "error",
                                    });
                                }
                                this.dialogStatus = false
                                this.getRiskList()
                            });
                        }
                    } else {
                        this.$message.error("请完善表单信息");
                        return false;
                    }
                });
            } else if (v == 2) {//新增候选人提交
                if (this.treeListonly.length > 0) {
                    console.log(this.treeListonly)
                    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.adminAccessoryIdList = attList;
                    }
                    this.fromList.treeListonly = this.treeListonly
                    console.log(this.fromList)
                    this.getUserIds();
                } else {
                    this.$message.error("请选择人员");
                }
            }
        },
        //获取自己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)
            this.setForm();
            // });
        },
        setForm(e) {
            this.request_form.title = '[市场经营管理平台]-风险点防控-'+this.fromList.needName;
            this.fromList.transactorList = []
            this.treeListonly.map((item) => {
                this.fromList.transactorList.push(item.key)
            })
            delete this.fromList.treeListonly
            this.$http({
                url: "/market/fxfkProcess/add",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                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 startArr = []
            this.treeListonly.map((item, index) => {
                startArr.push({
                    userId: item.key,
                    userCode: item.key,
                    userName: item.label,
                    // path: this.$router.currentRoute.name,
                    path: 'riskMaterials',
                    title: this.request_form.title,
                    businessKey: this.request_form.businessKey[index],
                    processDefinitionKey: "fxfk_process",//流程key
                })
            })
            console.log(startArr);
            let _this = this;
            let obj = {
                url: this.$url.formList.startWorkList, //开始工作流接口  List
                data: startArr,
                // status: "form",
                headers: {
                    // "Content-Type": "application/x-www-form-urlencoded",
                    "Content-Type": "application/json",
                },
            };

            let res = await this.common.httpPost(obj, success);
            function success(data) {
                console.log(data)
                _this.fromList.taskId = data.data;
                // _this.taskId = data.data;
                let listarr = []
                e.map((item, index) => {
                    listarr.push({
                        id: e[index],
                        processId: _this.fromList.taskId[index],
                        tableName: _this.request_form.processDefinitionKey,
                    })
                })
                // let list = {
                //     id: e,
                //     // taskId:_this.formId,
                //     processId: _this.fromList.taskId,
                //     tableName: _this.request_form.processDefinitionKey,
                //     // resourceId: _this.nextPath.currentShape[0].resourceId,
                // };
                _this.setUpdate(listarr);
            }
        },
        //更新工作流接口

        setUpdate(e) {
            // updateBase(e).then((res) => {
            //     this.infolist = res.data.body[0];
            // });
            this.$http({
                url: "/market/waf/batchUpdateBase",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: e,
            }).then((res) => {
                // this.fromList.taskId = res.data.body.taskId;
                // this.fromList.taskName = res.data.body.taskName;
                // if (res.data.body.taskName === "起草") {
                //     this.isSync = res.data.body.isSync;
                // } else {
                //     this.isSync = "1";
                // }
                if (res.data.result === 0) {
                    //   this.$message.success("工作流更新成功");
                    this.handleClose()
                    this.getRiskadminList()
                }
            });
        },
        handleClose() {//关闭弹窗
            this.dialogStatus = false;
            this.dialogTreeStatus = false;
            this.fromList = {};
        },
        handleClose2() {//关闭弹窗
            this.dialogTreeStatus = false;
        },
        //获取页码
        changeNum(e) {
            console.log(e)
            this.pageNo = e;
            this.lableTable.pageData.pageNum = e;
            this.getRiskList()
        },
        //获取页码
        changeSize(e) {
            console.log(e);
        },
        //点击工单状态跳转需求流程显示页面
        clickDemand(e, res) {

            if (e == '待办事项名称') {
                console.log(e);
                console.log(res);
            }

        },

        //风控材料搜索内容
        seachList1(e) {
            this.pageNo = 1
            this.lableTable.pageData.pageNum = 1;
            this.searchBox = e
            this.getRiskList(e)
        },
        //风控材料搜索内容
        seachList2(e) {
            this.pageNo = 1
            this.adminpageData.pageNum = 1;
            console.log(e);
            this.searchBox = e
            this.getRiskadminList(e)
        },
        clickTabTops(e) {
            console.log(e);
            this.clickTagNameTop = e
            this.pageNo = 1
            this.$refs.TableList.page = 1;
            if (this.clickTagNameTop == 'First') {
                this.lableTable = this.FirstlabelAdmin
                this.getRiskList()
                this.rule = {
                    materialName: [
                        { required: true, message: "请添加材料名称", trigger: "blur" },
                    ],
                    needName: [
                        { required: true, message: "请添加待办事项名称", trigger: "blur" },
                    ],
                    finishTime: [
                        { required: true, message: "请选择结束时间", trigger: "blur" },
                    ],
                    backlogType: [
                        { required: true, message: "请选择待办事项类型", trigger: "blur" },
                    ],
                    backlogExplain: [
                        { required: true, message: "请添加待办事项说明", trigger: "blur" },
                    ],
                    mkFileShareAttachList: [
                        { required: true, message: "请添加附件", trigger: "blur" },
                    ],
                }
            } else {
                this.getRiskadminList()
                this.rule = {
                    materialName: [
                        { required: true, message: "请添加材料名称", trigger: "blur" },
                    ],
                    needName: [
                        { required: true, message: "请添加待办事项名称", trigger: "blur" },
                    ],
                    finishTime: [
                        { required: true, message: "请选择结束时间", trigger: "blur" },
                    ],
                    backlogType: [
                        { required: true, message: "请选择待办事项类型", trigger: "blur" },
                    ],
                    backlogExplain: [
                        { required: true, message: "请添加待办事项说明", trigger: "blur" },
                    ],
                }
            }
        },
        adminhandleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        adminhandleCurrentChange(val) {
            // console.log(e)
            this.pageNo = val;

            this.getRiskadminList()
            console.log(`当前页: ${val}`);
        },

    },
    created() {
        this.lableTable = this.FirstlabelAdmin
        this.getRiskList()

    }
}
</script>
<style lang="scss" scoped>
.copyClass {
    display: flex;
}

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

.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-table__fixed-body-wrapper {
    top: 50px !important;
}

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

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

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

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

    .flex-load {
        display: flex;
        width: 80%;
        position: relative;
        margin: 1%;
        border-bottom: 1px solid #e1e1e1;
        justify-content: space-between;
        // height: 354px!important;
    }
}

//设置子组件样式
::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-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;
}

::v-deep .el-dialog__body {
    // max-height: calc(100vh) !important;
    // min-height: 100px;
    height: 100%;
    // overflow-y: hidden;
}
</style>