案件流程管理页面开发

src/views/caseprocessManagement/caseprocessManage.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+            <el-form-item label="案件状态" prop="roleName">
+                <el-input v-model="queryParams.roleName" placeholder="请输入案件状态" clearable style="width: 240px"
+                    @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="节点名称" prop="status">
+                <el-select v-model="queryParams.status" placeholder="节点名称" clearable style="width: 240px">
+                    <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
+                        :value="dict.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addnodeprocess">新增流程节点</el-button>
+            </el-col>
+        </el-row>
+        <el-table v-loading="loading" :data="dataList" style="width: 100%">
+            <el-table-column label="序号" type="index" align="center">
+                <template slot-scope="scope">
+                    <span>{{
+                        (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
+                    }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="节点名称" align="center" prop="nodename" :show-overflow-tooltip="true" />
+            <el-table-column label="案件状态" align="center" prop="casestatus" :show-overflow-tooltip="true" />
+            <el-table-column label="驳回节点" align="center" prop="rejectnode" :show-overflow-tooltip="true" />
+            <el-table-column label="关联角色" align="center" prop="associatedroles" :show-overflow-tooltip="true" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                    <el-button size="mini" @click="moveDown(scope.row)" type="text"
+                        icon="el-icon-arrow-down"></el-button>
+
+                    <el-button size="mini" @click="moveUp(scope.row)" type="text"
+                        icon="el-icon-arrow-up"></el-button>
+                    <el-button size="mini" @click="eidtNodeprocess(scope.row)" type="text"
+                        icon="el-icon-edit">修改</el-button>
+                    <el-button size="mini" @click="deleteNodeprocess(scope.row)" type="text"
+                        icon="el-icon-delete">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+            @pagination="getList(queryParams)" />
+
+        <addNodeprocess :addvisiable="addvisiable" @cancelAdd="cancelAdd" :editData="editData" @getList="getList"
+            :queryParams="queryParams">
+        </addNodeprocess>
+    </div>
+</template>
+  
+<script>
+// import {
+//     getTemplate,
+//     deleteTemplate,
+//     getTemplateInfoById
+// } from "@/api/officialSeal/officialSeal.js";
+
+import addNodeprocess from "./components/addNodeprocess";
+export default {
+    name: "paymentList",
+    components: {
+        addNodeprocess,
+    },
+    dicts: ['sys_normal_disable'],
+    data() {
+        return {
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+            // 遮罩层
+            loading: false,
+            // 总条数
+            total: 0,
+            // 表格数据
+            form: {},
+            // 校验表单
+            rules: {},
+            dataList: [],
+            addvisiable: false,//新增弹窗
+            editData: {},
+        };
+    },
+    created() {
+        this.getList(this.queryParams)
+    },
+    methods: {
+        // 删除
+        deleteNodeprocess(row) {
+            this.$modal
+                .confirm("是否删除")
+                .then((res) => {
+                    this.deleteSealFn({ id: row.id })
+                })
+        },
+        // 删除接口
+        deleteSealFn(data) {
+            deleteTemplate(data).then(res => {
+                this.$modal.msgSuccess("删除成功！");
+                this.getList(this.queryParams);
+            })
+        },
+        // 新增流程节点
+        addnodeprocess(row) {
+            this.addvisiable = true;
+            this.editData = {};
+        },
+        cancelAdd() {
+            this.addvisiable = false;
+        },
+        // 编辑
+        eidtNodeprocess(row) {
+            this.addvisiable = true;
+            this.editData = row;
+        },
+        // 关联角色
+        associatedRoles() { },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList(this.queryParams);
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 查询列表数据
+        getList(parms) {
+            this.loading = true;
+            // getTemplate(parms).then((response) => {
+            // this.dataList = response.rows;
+            this.dataList = [
+                {
+                    nodename: '调解',
+                    casestatus: '未立案',
+                    rejectnode: 2,
+                    associatedroles: '申请人'
+                }
+            ];
+            // this.total = response.total;
+            this.loading = false;
+            console.log(this.dataList, "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL");
+            // this.dataList.forEach(item => {
+            //     if (item.identifyStatus == 0 || item.identifyStatus == null) {
+            //         item.identifyStatus = '未认证'
+            //     } else {
+            //         item.identifyStatus = '已认证'
+            //     }
+            //     if (item.isUse == 0 || item.isUse == null) {
+            //         item.isUse = '未启用'
+            //     } else {
+            //         item.isUse = '已启用'
+            //     }
+            // })
+            // });
+        },
+    },
+};
+</script>
+  
+<style lang="scss" scoped></style>

src/views/caseprocessManagement/components/addNodeprocess.vue

@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <el-dialog title="新增流程节点" :visible="addvisiable" v-if="addvisiable" @close="cancel" width="600px" center>
+            <el-form :model="ruleForm" label-position="left" :rules="rules" ref="ruleForm" label-width="90px"
+                class="demo-ruleForm">    
+                <el-form-item label="节点名称" prop="nodename">
+                    <el-select v-model="ruleForm.nodename" placeholder="请选择">
+                        <el-option v-for="dict in dict.type.template_type" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="案件状态" prop="casestatus">
+                    <el-input v-model="ruleForm.casestatus"></el-input>
+                </el-form-item>
+                <el-form-item label="驳回节点" prop="rejectnode">
+                    <el-select v-model="ruleForm.rejectnode" placeholder="请选择">
+                        <el-option v-for="item in tempList" :key="item.id" :label="item.identifyName" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="关联角色" prop="associatedroles">
+                    <el-select v-model="ruleForm.associatedroles" placeholder="请选择">
+                        <el-option v-for="item in tempList" :key="item.id" :label="item.identifyName" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="cancel" class="endbutton"><span>取 消</span></el-button>
+                <el-button type="primary" @click="submitUpload" class="endbutton"><span>确认</span></el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+// import {
+//     deptIdentifyList,
+// } from "@/api/officialSeal/officialSeal.js";
+export default {
+    props: ["addvisiable", "editData", "queryParams"],
+    dicts: ["template_type"],
+    data() {
+        return {
+            fileList: [],
+            data: [],
+            tempList: [],
+            isImg:false,
+            filedata: {},
+            flagBtn: false,
+            ruleForm: {},
+            rules: {
+                temName: [
+                    { required: true, message: '请输入模板名称', trigger: 'blur' },
+                ],
+                temType: [
+                    { required: true, message: '请输入模板名称', trigger: 'blur' },
+                ],
+                identifyId: [
+                    { required: true, message: '请输入模板名称', trigger: 'blur' },
+                ]
+            }
+        };
+    },
+    watch: {
+        editData(val) {
+            if (val) {
+                this.ruleForm = val
+                // let queryParams = {
+                //     pageNum: 1,
+                //     pageSize: 10000000000000000000000,
+                // };
+                // deptIdentifyList(queryParams).then(res => {
+                //     this.tempList = res.rows;
+                // })
+                // this.ruleForm = {}
+            }
+        }
+    },
+    created() {
+
+    },
+    methods: {
+        cancel() {
+            this.$emit("cancelAdd");
+        },
+        handleChange(file, fileList) {
+            this.isImg = file.type === '.doc' || '.docx'
+        },
+        UploadUrl() {
+            return window.location.origin + "/API/deptIdentify/insertTemplate";
+        },
+        submitUpload() {
+            this.$refs['ruleForm'].validate((valid) => {
+                if (valid) {
+                    this.filedata.identifyId = this.ruleForm.identifyId;
+                    this.filedata.temName = this.ruleForm.temName;
+                    if (this.isImg) {
+                        this.$refs.upload.submit();
+                    }else{
+                        this.$message.error('只能上传doc,docx格式的文件')
+                    }
+                }
+            });
+        },
+        handleRemove(file, fileList) {
+            console.log(file, fileList);
+        },
+        beforeUpload(file) {
+            // debugger
+            // this.isImg = file.type === '.doc' || '.docx'
+        },
+        handleSuccess() {
+            this.$message.success('上传成功');
+            this.$emit("cancelAdd");
+            this.$emit('getList', this.queryParams);
+        }
+    },
+};
+</script>
+  
+<style lang="scss" scoped>
+ ::v-deep .el-select {
+    width: 100%;
+}
+</style>