From 768e4d521b2408e187b0b482bae345f66f41794a Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期三, 23 三月 2022 10:44:20 +0800 Subject: [PATCH] 接口对接 --- src/views/safetyproduction/feature.vue | 297 ++++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 224 insertions(+), 73 deletions(-) diff --git a/src/views/safetyproduction/feature.vue b/src/views/safetyproduction/feature.vue index 44e31e6..b9212c3 100644 --- a/src/views/safetyproduction/feature.vue +++ b/src/views/safetyproduction/feature.vue @@ -4,56 +4,94 @@ <el-row> <el-col :span="5"> <el-form-item label="要素名称"> - <el-input v-model="form.name"></el-input> + <el-input v-model="listQuery.filter.name"></el-input> </el-form-item> </el-col> <el-col :span="4" style="text-align: center"> - <el-button type="primary" icon="el-icon-search" class="btns">搜索</el-button> + <el-button type="primary" icon="el-icon-search" @click="find()" class="btns" + >搜索</el-button + > <el-button type="primary" icon="el-icon-plus" class="btns" - @click="dialogVisible = true" + @click="handleClick('', '新增')" >新增</el-button > </el-col> </el-row> </el-form> - <el-table :data="tableData" border style="width: 100%"> - <el-table-column prop="date" label="要素名称" width="150"> + <el-table :data="list" border style="width: 100%"> + <el-table-column prop="name" align="center" label="要素名称"> </el-table-column> - <el-table-column prop="name" label="级别"> </el-table-column> - <el-table-column prop="name" label="父要素"> </el-table-column> - <el-table-column prop="province" label="备注"> </el-table-column> - <el-table-column prop="city" label="创建时间"> </el-table-column> - <el-table-column prop="address" label="更新时间"> </el-table-column> + <el-table-column label="级别" align="center"> + <template slot-scope="scope"> + <span v-if="scope.row.type == 0">A级要素</span> + <span v-if="scope.row.type == 1">B级要素</span> + </template> + </el-table-column> + <el-table-column label="父要素" align="center"> + <template slot-scope="scope"> + <span v-if="scope.row.parentId == 0">法律法规和标准</span> + <span v-if="scope.row.parentId == 1">机构和职责</span> + </template> + </el-table-column> + <el-table-column prop="remark" label="备注" align="center"> + </el-table-column> + <el-table-column prop="createTime" label="创建时间" align="center"> + </el-table-column> + <el-table-column prop="updateTime" label="更新时间" align="center"> + </el-table-column> <el-table-column align="center" label="操作"> <template slot-scope="scope"> - <el-button @click="handleClick(scope.row)" type="text" size="small" + <el-button + @click="handleClick(scope.row, '编辑')" + type="text" + size="small" >编辑</el-button > - <el-button type="text" size="small" style="color: red" + <el-button + type="text" + size="small" + @click="deleteById(scope.row.id)" + style="color: red" >删除</el-button > </template> </el-table-column> </el-table> + <div style="text-align:right"> + <el-pagination + v-show="recordTotal>0" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="currentPage" + :page-sizes="[10, 20, 30, 50]" + :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="recordTotal" + > + </el-pagination> + </div> <el-dialog - title="新增" + :title="title" :visible.sync="dialogVisible" width="40%" - :before-close="handleClose" > - <el-form ref="form" :model="form" label-width="70px"> + <el-form ref="form" :rules="rules" :model="form" label-width="80px"> <el-row> <el-col :span="11"> - <el-form-item label="活动名称"> - <el-input v-model="form.name"></el-input> + <el-form-item label="要素名称" prop="name"> + <el-input v-model="form.name" maxlength="50"></el-input> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="级别"> - <el-select v-model="value" placeholder="请选择" style="width:100%"> + <el-form-item label="级别" prop="type"> + <el-select + v-model="form.type" + placeholder="请选择" + style="width: 100%" + > <el-option v-for="item in options" :key="item.value" @@ -67,10 +105,14 @@ </el-row> <el-row> <el-col :span="11"> - <el-form-item label="父要素"> - <el-select v-model="value" placeholder="请选择" style="width:100%"> + <el-form-item label="父要素" prop="parentId"> + <el-select + v-model="form.parentId" + placeholder="请选择" + style="width: 100%" + > <el-option - v-for="item in options" + v-for="item in parent" :key="item.value" :label="item.label" :value="item.value" @@ -81,11 +123,16 @@ </el-col> </el-row> <el-form-item label="备注"> - <el-input v-model="form.name" maxlength="250" :rows="5" type="textarea"></el-input> + <el-input + v-model="form.remark" + maxlength="250" + :rows="5" + type="textarea" + ></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> - <el-button type="primary" class="btns" @click="dialogVisible = false" + <el-button type="primary" class="btns" @click="AddelementManagement()" >确 定</el-button > <el-button @click="dialogVisible = false">取 消</el-button> @@ -94,71 +141,175 @@ </div> </template> <script> +import { + elementManagementList, + elementManagementAdd, + elementManagementMod, + elementManagementDel, +} from "@/api/elementManagement.js"; export default { data() { return { dialogVisible: false, + title: "", form: { name: "", + type: "", + parentId: "", + remark: "", }, - tableData: [ + pageSize: 10, + recordTotal: 0, + currentPage: 1, + list: [], + listQuery: { + filter: { + name: "", + }, + pageIndex: 1, + pageSize: 10, + }, + options: [ { - date: "2016-05-02", - name: "王小虎", - province: "上海", - city: "普陀区", - address: "上海市普陀区金沙江路 1518 弄", - zip: 200333, + value: 0, + label: "A级要素", }, { - date: "2016-05-04", - name: "王小虎", - province: "上海", - city: "普陀区", - address: "上海市普陀区金沙江路 1517 弄", - zip: 200333, - }, - { - date: "2016-05-01", - name: "王小虎", - province: "上海", - city: "普陀区", - address: "上海市普陀区金沙江路 1519 弄", - zip: 200333, - }, - { - date: "2016-05-03", - name: "王小虎", - province: "上海", - city: "普陀区", - address: "上海市普陀区金沙江路 1516 弄", - zip: 200333, + value: 1, + label: "B级要素", }, ], - options: [{ - value: '选项1', - label: '黄金糕' - }, { - value: '选项2', - label: '双皮奶' - }, { - value: '选项3', - label: '蚵仔煎' - }, { - value: '选项4', - label: '龙须面' - }, { - value: '选项5', - label: '北京烤鸭' - }], - value: '' + parent: [ + { + value: 0, + label: "法律法规和标准", + }, + { + value: 1, + label: "机构和职责", + }, + ], + rules: { + name: [ + { required: true, message: "预案名称不能为空", trigger: "change" }, + ], + type: [ + { required: true, message: "预案名称不能为空", trigger: "change" }, + ], + parentId: [ + { required: true, message: "预案名称不能为空", trigger: "change" }, + ], + remark: [ + { required: true, message: "责任人不能为空", trigger: "blur" }, + ], + }, }; + }, + created() { + this.elementManagementL(); + }, + methods: { + async elementManagementL() { + var res = await elementManagementList(this.listQuery); + console.log(res); + if (res.data.code == 200) { + this.list = res.data.result.records; + this.recordTotal = res.data.result.total + this.pageSize=res.data.result.size; + this.currentPage = res.data.result.current + } + }, + handleClick(value, type) { + this.dialogVisible = true; + this.$nextTick(() => { + this.$refs["form"].clearValidate(); + }); + if (type == "新增") { + this.title = "新增"; + this.form = { + name: "", + type: "", + parentId: "", + remark: "", + }; + } else { + this.title = "编辑"; + this.form = value; + } + }, + AddelementManagement() { + this.$refs["form"].validate((valid) => { + if (valid) { + if (this.title == "新增") { + elementManagementAdd(this.form).then((res) => { + if (res.data.code == 200) { + this.dialogVisible = false; + this.elementManagementL(); + this.$notify({ + type: "success", + duration: 2000, + message: "新增成功", + title: "成功", + }); + } else { + this.$message({ + type: "warning", + message: res.data.message, + }); + } + }); + } else { + elementManagementMod(this.form).then((res) => { + if (res.data.code == 200) { + this.dialogVisible = false; + this.elementManagementL(); + this.$notify({ + type: "success", + duration: 2000, + message: "编辑成功", + title: "成功", + }); + } else { + his.$message({ + type: "warning", + message: res.data.message, + }); + } + }); + } + } + }); + }, + deleteById(val) { + elementManagementDel({id:val}).then((res) => { + if (res.data.code == 200) { + this.elementManagementL(); + this.$notify({ + title: "成功", + message: "删除成功", + type: "success", + duration: 2000, + }); + } + }); + }, + find(){ + this.elementManagementL(); + }, + handleSizeChange(val){ + this.listQuery.pageSize = val + this.elementManagementL(); + }, + handleCurrentChange(val){ + this.listQuery.pageIndex = val + this.elementManagementL(); + }, }, }; </script> <style scoped> -.btns{ - background-color: #034EA2; - border: 1px solid #034EA2; +.btns { + background-color: #034ea2; + border: 1px solid #034ea2; } </style> \ No newline at end of file -- Gitblit v1.9.2