|
@@ -0,0 +1,450 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container calendar-list-container">
|
|
|
+
|
|
|
+ <!-- 查询和其他操作 -->
|
|
|
+ <div class="filter-container">
|
|
|
+ <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入帖子Id"
|
|
|
+ v-model="listQuery.topicId"></el-input>
|
|
|
+ <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入帖子标题"
|
|
|
+ v-model="listQuery.title"></el-input>
|
|
|
+ <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入姓名"
|
|
|
+ v-model="listQuery.userName"></el-input>
|
|
|
+ <el-select v-model="listQuery.status" clearable placeholder="审批状态" class="filter-item" style="width: 200px">
|
|
|
+ <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
|
|
|
+ <!-- <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查询结果 -->
|
|
|
+ <el-table size="small" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading"
|
|
|
+ element-loading-text="正在查询中。。。" border fit highlight-current-row>
|
|
|
+ <el-table-column type="selection" width="55px"> </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column align="center" min-width="100px" label="部门" prop="deptName">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column align="center" min-width="200px" label="姓名" prop="userName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="100px" label="帖子Id" prop="topicId">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="200px" label="帖子标题" prop="title">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="150px" label="回复时间" prop="createTime">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" min-width="100px" label="审批状态" prop="statusName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
|
|
|
+ <el-button type="success" size="small" @click="handleComplete(scope.row)">处理</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
+ :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加或修改对话框 -->
|
|
|
+ <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
|
|
|
+ <div class="dialog-body">
|
|
|
+ <div class="quesList">
|
|
|
+ <div class="listItem" v-for="(item,index) in data" :key="index">
|
|
|
+ <div v-if="item.type=='SCQ'">
|
|
|
+ <div class="itemTitle">{{ index+1 }}. {{item.description}}(单选)</div>
|
|
|
+ <el-radio-group v-model="item.comment">
|
|
|
+ <el-radio v-for="(childItem,childIndex) in item.options" :key="childIndex" :label="childItem.id" disabled>{{ childItem.name }}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="item.type=='MCQ'">
|
|
|
+ <div class="itemTitle">{{ index+1 }}. {{item.description}}(多选)</div>
|
|
|
+ <el-checkbox-group v-model="item.comment">
|
|
|
+ <el-checkbox v-for="(childItem,childIndex) in item.options" :key="childIndex" :label="childItem.id" disabled>{{ childItem.name }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.type=='SAQ'">
|
|
|
+ <div class="itemTitle">{{ index+1 }}. {{item.description}}(问答)</div>
|
|
|
+ <el-input disabled type="textarea" :rows="4" placeholder="请输入内容" v-model="item.comment"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="dialogStatus=='complete'" class="listItem">
|
|
|
+ <div class="itemTitle">审批意见</div>
|
|
|
+ <el-input type="textarea" :rows="4" placeholder="请输入审批意见" v-model="comment"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="dialogStatus=='complete'" slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="complete(true)">同意</el-button>
|
|
|
+ <el-button type="danger" @click="complete(false)">驳回</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style>
|
|
|
+.listItem{
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.itemTitle{
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.demo-table-expand {
|
|
|
+ font-size: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.demo-table-expand label {
|
|
|
+ width: 200px;
|
|
|
+ color: #99a9bf;
|
|
|
+}
|
|
|
+
|
|
|
+.demo-table-expand .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { approvalList, complete } from "@/api/postManage";
|
|
|
+import waves from "@/directive/waves"; // 水波纹指令
|
|
|
+import Tinymce from '@/components/Tinymce'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { Tinymce },
|
|
|
+ directives: { waves },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ comment:'',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ "id": 1,
|
|
|
+ "postId": 1,
|
|
|
+ "description": "最帅的人,请选择以下选项",
|
|
|
+ "type": "SCQ",
|
|
|
+ "createTime": "2023-10-31 16:35:07",
|
|
|
+ "modifyTime": "2023-10-31 16:35:07",
|
|
|
+ "options": [
|
|
|
+ {
|
|
|
+ "id": 1,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "金城武",
|
|
|
+ "num": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 2,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "刘德华",
|
|
|
+ "num": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 3,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "张三",
|
|
|
+ "num": 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "comment": 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 1,
|
|
|
+ "postId": 1,
|
|
|
+ "description": "帅的人,请选择以下选项",
|
|
|
+ "type": "MCQ",
|
|
|
+ "createTime": "2023-10-31 16:35:07",
|
|
|
+ "modifyTime": "2023-10-31 16:35:07",
|
|
|
+ "options": [
|
|
|
+ {
|
|
|
+ "id": 1,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "金城武",
|
|
|
+ "num": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 2,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "刘德华",
|
|
|
+ "num": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 3,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "张三",
|
|
|
+ "num": 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "comment": [1,2],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 2,
|
|
|
+ "postId": 1,
|
|
|
+ "description": "请问今年是什么年",
|
|
|
+ "type": "SAQ",
|
|
|
+ "createTime": "2023-11-02 14:34:03",
|
|
|
+ "modifyTime": "2023-11-02 14:34:03",
|
|
|
+ "options": [],
|
|
|
+ "comment": "兔年"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ typeList: [
|
|
|
+ {
|
|
|
+ type: 1,
|
|
|
+ name: "待审批",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 2,
|
|
|
+ name: "作废",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 3,
|
|
|
+ name: "通过",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ "id": 1,
|
|
|
+ "loginId": "root",
|
|
|
+ "topicId": 0,
|
|
|
+ "discussId": 0,
|
|
|
+ "title": "谁是世界上最帅的人",
|
|
|
+ "content": "请评价谁是最帅的人",
|
|
|
+ "media": null,
|
|
|
+ "readCount": 0,
|
|
|
+ "postTop": 0,
|
|
|
+ "type": 4,
|
|
|
+ "address": null,
|
|
|
+ "longitude": 0,
|
|
|
+ "latitude": 0,
|
|
|
+ "status": 0,
|
|
|
+ "statusName": "待审批",
|
|
|
+ "createTime": "2023-10-31 16:35:07",
|
|
|
+ "modifyTime": "2023-11-02 14:32:49",
|
|
|
+ "deadline": null,
|
|
|
+ "integral": 1000,
|
|
|
+ "cut1": "0",
|
|
|
+ "cut2": "0",
|
|
|
+ "cut3": null,
|
|
|
+ "userName": "系统管理员",
|
|
|
+ "employeeNo": null,
|
|
|
+ "deptName": "神州通誉",
|
|
|
+ "data": [
|
|
|
+ {
|
|
|
+ "id": 1,
|
|
|
+ "postId": 1,
|
|
|
+ "description": "最帅的人,请选择以下选项",
|
|
|
+ "type": "SCQ",
|
|
|
+ "createTime": "2023-10-31 16:35:07",
|
|
|
+ "modifyTime": "2023-10-31 16:35:07",
|
|
|
+ "options": [
|
|
|
+ {
|
|
|
+ "id": 1,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "金城武",
|
|
|
+ "num": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 2,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "刘德华",
|
|
|
+ "num": 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 3,
|
|
|
+ "postId": 1,
|
|
|
+ "questionId": 1,
|
|
|
+ "name": "张三",
|
|
|
+ "num": 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "comment": "1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "id": 2,
|
|
|
+ "postId": 1,
|
|
|
+ "description": "请问今年是什么年",
|
|
|
+ "type": "SAQ",
|
|
|
+ "createTime": "2023-11-02 14:34:03",
|
|
|
+ "modifyTime": "2023-11-02 14:34:03",
|
|
|
+ "options": [],
|
|
|
+ "comment": "兔年"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ delarr: [],
|
|
|
+ multipleSelection: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: false,
|
|
|
+ listQuery: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ dictName: '',
|
|
|
+ dictType: '',
|
|
|
+ status: '',
|
|
|
+ },
|
|
|
+ dialogFormVisible: false,
|
|
|
+ dialogStatus: '',
|
|
|
+ textMap: {
|
|
|
+ complete: "审批",
|
|
|
+ view: "详情",
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checked(val){
|
|
|
+ if(val.flag == false){
|
|
|
+ if(!val.comment){
|
|
|
+ this.$alert("请输入审批内容", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ complete(flag) {
|
|
|
+ const parms = {
|
|
|
+ comment: this.comment,
|
|
|
+ flag:flag,
|
|
|
+ }
|
|
|
+ const isChecked = this.checked(parms);
|
|
|
+ if(isChecked){
|
|
|
+ complete(parms).then((response) => {
|
|
|
+ this.$notify({
|
|
|
+ title: "成功",
|
|
|
+ message: "操作成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.getList();
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true
|
|
|
+ approvalList(this.listQuery).then(response => {
|
|
|
+ this.list = response.data.data.items
|
|
|
+ this.total = response.data.data.total
|
|
|
+ this.listLoading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.list = []
|
|
|
+ this.total = 0
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleFilter() {
|
|
|
+ this.listQuery.page = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.listQuery.limit = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.listQuery.page = val
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleView(row){
|
|
|
+ this.dataForm = Object.assign({}, row);
|
|
|
+ this.dialogStatus = 'view'
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ },
|
|
|
+ handleComplete(row) {
|
|
|
+ this.dataForm = Object.assign({}, row);
|
|
|
+ this.dialogStatus = 'complete'
|
|
|
+ this.dialogFormVisible = true
|
|
|
+ },
|
|
|
+ delAll() {
|
|
|
+ this.$confirm("确认删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ const length = this.multipleSelection.length;
|
|
|
+
|
|
|
+ if (length > 0) {
|
|
|
+ for (let i = 0; i < length; i++) {
|
|
|
+ this.delarr.push(this.multipleSelection[i].dictId);
|
|
|
+ }
|
|
|
+ const dictIds = this.delarr.join(",");
|
|
|
+ deleteitem({ dictIds: dictIds })
|
|
|
+ .then(() => {
|
|
|
+ this.$notify({
|
|
|
+ title: "成功",
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 2000,
|
|
|
+ });
|
|
|
+ this.getList();
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: "警告提示",
|
|
|
+ message: "请选择要删除的信息!",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.ad-avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.ad-avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+}
|
|
|
+
|
|
|
+.ad-avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ line-height: 178px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ad-avatar {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|