spfm-market-front/src/pages/main/opcode/formTables.vue

<template>
    <div>
        <div>
            <div class="flex-title">OP_CODE申请流程</div>
            <el-form ref="form" :model="form" :rules="rule" :disabled="disabled">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="工单编号:" prop="orderNumber">
                            <el-input v-model="form.orderNumber" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="工单标题:" prop="needName">
                            <el-input v-model="form.needName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请人:" prop="applicant">
                            <el-input v-model="form.applicant" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请时间:">
                            <el-date-picker type="date" :disabled="true" placeholder="选择日期" v-model="form.applicationTime"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="需求编号:" prop="demandNumber">
                            <el-input v-model="form.demandNumber"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="需求名称:">
                            <el-input v-model="form.demandName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="需求上线时间:">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.demandDeployTime"
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="提出地市:" prop="submitCity">
                            <el-select v-model="form.submitCity" placeholder="请选择">
                                <el-option v-for="(item, index) in cityList" :label="item.ou" :value="item.ou"></el-option>
                                <!-- <el-option label="路由器" value="路由器"></el-option>
                                <el-option label="交换机" value="交换机"></el-option>
                                <el-option label="防火墙" value="防火墙"></el-option>
                                <el-option label="主机" value="主机"></el-option> -->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="提出人:" prop="submitter">
                            <el-input v-model="form.submitter"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>

                    <el-col :span="24">
                        <el-form-item label="备注:" prop="remark" label-width="110px">
                            <el-input type="textarea" maxlength="300" show-word-limit v-model="form.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="2">
                        <span>操作信息:</span>
                    </el-col>
                    <el-col :span="22">
                        <div class="flex-table-header">
                            <el-button type="primary" @click="newclick(1)">新建</el-button>
                            <el-button type="danger" @click="fireDel()">删除</el-button>
                            <span>记录总数({{ num }})</span>
                        </div>

                        <Table @clickDemand="clickDemand" :list="lable" ref="TableList" @changeNum="changeNum"
                            @num="selectNum">
                        </Table>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="附件：" prop="mkFileShareAttachList" label-width="120px">
                        <my-upload ref="upload" @uploadBack="uploadBack" @delloadBack="delloadBack"
                            @clickDownload="download" :fileInfo="fileInfo"
                            :fileList="list.mkFileShareAttachList"></my-upload>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <el-dialog v-if="firewallStatus" :before-close="clickClose(1)" :title="OPTit" :visible.sync="firewallStatus"
            width="100%" :modal="false" style="display: flex; flex-direction: column">
            <el-button type="primary" @click="newFireAdd(OPTit)">保存</el-button>
            <el-form ref="form1" :model="fireList">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="操作代码:" prop="code">
                            <el-input v-model="fireList.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作代码名称:" prop="name">
                            <el-input v-model="fireList.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="配置地市，部门:" prop="cityDept">
                            <el-input v-model="fireList.cityDept"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </el-dialog>
    </div>
</template>
  
<script>
import myUpload from "../../../components/workflowUpload";
import Table from "../../../components/el-form.vue";
export default {
    components: {
        myUpload,
        Table
    },
    data() {
        return {
            cityList: [],
            fireList: {},
            portList: {},
            fireSelectList: [],
            portSelectList: [],
            firewallStatus: false,
            page: 1,
            pages: 1,
            protStatus: false,
            OPTit: '新建',
            num: '0',
            nums: '0',
            costPayWayInputRule: {
                costPayWayInput: [
                    { required: true, message: "请填写", trigger: "blur" },
                ],
            },
            gratuityInputRule: {
                gratuityInput: [
                    { required: true, message: "请填写", trigger: "blur" },
                ],
            },
            reportFormInputRule: {
                reportFormInput: [
                    { required: true, message: "请填写", trigger: "blur" },
                ],
            },
            checkBoxNone: false,
            checkBoxStatus: false,
            fileInfo: {
                type: "bt1n",
                typename: "上传文件",
                limit: 5,
                url: "/market/waf/upload",
                fileList: [],
            },
            postEdit: false,
            newPostAge: false,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
            oneList: [],
            lable: {
                name: "first",
                height: '200',
                titledata: [
                    {
                        label: "序号",
                        prop: "index",
                        width: 300,
                    },
                    {
                        label: "操作代码",
                        prop: "code",
                        width: 300,
                        color: "#0682CD",
                    },
                    {
                        label: "操作代码名称",
                        prop: "name",
                        width: 200,
                    },
                    {
                        label: "配置地市部门",
                        prop: "cityDept",
                        width: 200,
                    },

                ], //表格头
                data: [], //内容数据
                loading: true,
                pageData: {
                    total: 1, // 总条数
                    pageSizes: 10, // 每页数量
                    pageNum: 1, // 页码
                },
                isSelection: true, // 表格有多选时设置
                isOperation: false, // 表格有操作列时设置
                isIndex: false, // 列表序号
                operation: {
                    // 表格有操作列时设置
                    label: "操作", // 列名
                    width: "50", // 根据实际情况给宽度
                    data: [
                        {
                            label: "操作", // 操作名称
                            type: "", //按钮类型
                            handleRow: () => {

                            }, // 自定义事件
                        },
                    ],
                },
            },
            childrenList: [],
            twoList: [],
            twoStatus: false,
            threeList: [],
            threeStatus: false,
            fourList: [],
            fourStatus: false,
            fiveList: [],
            fiveStatus: false,
            isSensitiveDataStatus: false,
            timeStatus: false,
            functionStatus: false,
            reportStatus: false,
            Length: "",
            form: {},
            rules: {},
            rule: {
                needName: [
                    { required: true, message: "请输入工单标题", trigger: "blur" },
                ],
                operationType: [
                    { required: true, message: "请选择操作类型", trigger: "change" },
                ]
            },
            copyRule: {},
            isList: [],
            remindMmsg: []
        };
    },
    props: {
        list: {
            type: Object,
            default: () => { },
        },
        disabled: {
            type: Boolean,
            default: () => { },
        },
    },
    mounted() {
        if (this.list.id) {
            this.form = this.list;
        }
        if (this.list.mkFileShareAttachList) {
            this.$refs.upload.attList = this.list.mkFileShareAttachList;
            this.list.mkFileShareAttachList.map((item) => {
                item.name = item.fileName;
            });
        }
        if (this.form.orderNumber) {
            this.getFromQuery(this.form.orderNumber)
        }


    },
    created() {
        this.form = {
            applicant: JSON.parse(window.sessionStorage.userInfo).loginName,
            applicationTime: new Date(),
            taskName: this.list.taskName,
            orderNumber: this.list.orderNumber,
        }
        this.copyRule = this.rule;
        this.getcityList()
    },

    methods: {
        getcityList() {
            this.$http({
                url: "/sysmgr/csysdept/municipalProvincialDepartments",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {}
            }).then((res) => {
                console.log(res);
                this.cityList = res.data;
            });
        },
        clickClose() {

        },
        fireDel() {
            if (this.fireSelectList.length > 0) {
                this.$confirm("即将删除数据, 是否删除?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$http({
                            url: "/market/opProcessInfo/delBatch",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: this.fireSelectList
                        }).then((res) => {
                            this.$message.success('删除成功')
                            this.page = 1;
                            this.getFromQuery(this.form.orderNumber)
                        });
                    })
                    .catch(() => { });
            }

        },

        newFireAdd(e) {
            if (e == '新增') {
                this.fireList.infoId = this.form.orderNumber
                this.$http({
                    url: "/market/opProcessInfo/add",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: this.fireList
                }).then((res) => {
                    this.firewallStatus = false;
                    this.getFromQuery(this.form.orderNumber)
                    this.$message.success('添加成功')
                });
            } else if (e == '修改') {
                this.$http({
                    url: "/market/opProcessInfo/update",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: this.fireList
                }).then((res) => {
                    this.firewallStatus = false;
                    this.getFromQuery(this.form.orderNumber)
                    this.$message.success('修改成功')
                });
            }

        },
        getFromQuery(e) {
            console.log(e);
            this.$http({
                url: "/market/opProcessInfo/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + this.page + '","pageSize":"10"}',
                },
                data: { infoId: e },
            }).then((res) => {
                this.lable.data = res.data.data
                this.lable.pageData.total = res.data.totalRecord ? res.data.totalRecord : 1;
                this.lable.data.map((item, index) => {
                    item.index = (index + 1) + (res.data.pageNo - 1) * res.data.pageSize
                })
                this.num = res.data.totalRecord
            });
        },
        newclick(e) {
            this.OPTit = '新增'
            this.fireList = {};
            this.portList = {};
            e === 1 ? this.firewallStatus = true : this.protStatus = true;
        },
        //页码
        changeNum(e) {
            this.page = e;
            this.getFromQuery(this.form.orderNumber)



        },
        selectNum(e) {
            this.fireSelectList = e;
        },
        selectNums(e) {
            this.portSelectList = e
        },
        //点击工单
        clickDemand(row, e) {
            if (this.form.taskName === "填写申请单") {
                this.OPTit = '修改'
                this.fireList = e
                this.firewallStatus = true
                console.log(e);
            }
        },
        uploadBack(v) {
            if (this.form.mkFileShareAttachList) {
                this.form.mkFileShareAttachList = [];
                this.form.mkFileShareAttachList = v;
            } else {
                let mkFileShareAttachList = [];
                mkFileShareAttachList = v;
                this.$set(this.form, "mkFileShareAttachList", mkFileShareAttachList);
            }
        },
        delloadBack(v) {
            this.form.mkFileShareAttachList = v;
            this.$http({
                url: "/market/zfpzProcess/update",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: this.form,
            }).then((res) => {
            });
        },
        download() {
            console.log(123);
            if (this.form.mkFileShareAttachList.length > 1) {
                this.$http({
                    url: "/market/waf/downAllFile",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    responseType: "blob",
                    data: { mkFileShareAttachList: this.form.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.form.needName + ".zip";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                    if (this.infolist.authType === "3") {
                        this.dialogCli(10);
                    }
                });
            } else {
                console.log(this.form.mkFileShareAttachList);
                let list = {
                    id: this.form.mkFileShareAttachList[0].fileCode,
                    fileName: this.form.mkFileShareAttachList[0].name,
                };
                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.form.mkFileShareAttachList[0].name
                        );
                    } 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.mkFileShareAttachList[0].name;
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            }
        },
    },

};
</script>
  
<style lang="scss" scoped>
.flex-table-header {
    margin-bottom: 10px;

    span {
        margin-left: 20px;
    }
}

::v-deep .el-row {
    margin-top: 16px;
}

a {
    text-decoration: none;
}

::v-deep .el-upload-list {
    width: 23rem;
}

.flex-title {
    text-align: center;
    font-size: 24px;
    line-height: 60px;

    font-weight: bold;
}

.flex-header {
    margin-top: 20px;
    display: flex;
    //   justify-content: space-between;

    ::v-deep .el-form-item {
        width: 20%;
        margin-right: 60px;
    }
}

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

.flex-input-tare {
    ::v-deep .el-form-item {
        width: 100%;
        margin-right: 5%;
    }

    ::v-deep .el-form-item__label {
        width: 9rem !important;
    }
}

.flex-textarea {
    width: 70.5%;
}

.el-upload__tip {
    color: red;
}

// ::v-deep .el-input--suffix .el-input__inner {
//   width: 119% !important;
// }
::v-deep .el-input__inner {
    color: black !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    color: black !important;
}

::v-deep .el-form-item {
    display: flex;
}

::v-deep .el-form-item__label {
    // width:100%;
    height: 50px;
    line-height: 40px !important;
    width: 130px;
    font-size: 0.5rem;
}

::v-deep .el-form-item__content {
    width: 100%;
    margin-left: 0% !important;
}

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

::v-deep.el-form-item.foldLabel .el-form-item__label {
    white-space: pre-line;
    /*换行显示*/
    height: 10px;
    /*设置lable高度，input高度一样*/
    line-height: 30px !important;
}

::v-deep .el-pagination {
    display: block !important;
    background-color: #fff !important;
}
</style>