From aa05304d221b1883d746e686f390d6f3fba598a7 Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期五, 24 五月 2024 09:36:09 +0800 Subject: [PATCH] feat:动态数据中心 --- src/views/system/point/index.vue | 374 +++++++++++++++++++++++++---------------------------- 1 files changed, 176 insertions(+), 198 deletions(-) diff --git a/src/views/system/point/index.vue b/src/views/system/point/index.vue index 6098420..6d51e3f 100644 --- a/src/views/system/point/index.vue +++ b/src/views/system/point/index.vue @@ -2,28 +2,7 @@ <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px"> <el-form-item label="鐐逛綅鍚嶇О" prop="pointName"> - <el-input - v-model="queryParams.pointName" - placeholder="璇疯緭鍏ョ偣浣嶅悕绉�" - clearable - @keyup.enter.native="handleQuery" - /> - </el-form-item> - <el-form-item label="鐐逛綅寮�濮嬫椂闂�" prop="startTime"> - <el-date-picker clearable - v-model="queryParams.startTime" - type="date" - value-format="yyyy-MM-dd" - placeholder="璇烽�夋嫨鐐逛綅寮�濮嬫椂闂�"> - </el-date-picker> - </el-form-item> - <el-form-item label="鐐逛綅缁撴潫鏃堕棿" prop="endTime"> - <el-date-picker clearable - v-model="queryParams.endTime" - type="date" - value-format="yyyy-MM-dd" - placeholder="璇烽�夋嫨鐐逛綅缁撴潫鏃堕棿"> - </el-date-picker> + <el-input v-model="queryParams.pointName" placeholder="璇疯緭鍏ョ偣浣嶅悕绉�" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button> @@ -32,135 +11,100 @@ </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="handleAdd"--> + <!-- >鏂板</el-button>--> + <!-- </el-col>--> <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="el-icon-plus" - size="mini" - @click="handleAdd" - >鏂板</el-button> + <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" + v-hasPermi="['point:edit']">淇敼</el-button> </el-col> <el-col :span="1.5"> - <el-button - type="success" - plain - icon="el-icon-edit" - size="mini" - :disabled="single" - @click="handleUpdate" - >淇敼</el-button> + <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" + v-hasPermi="['point:remove']">鍒犻櫎</el-button> </el-col> <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="el-icon-delete" - size="mini" - :disabled="multiple" - @click="handleDelete" - >鍒犻櫎</el-button> + <el-button type="warning" plain icon="el-icon-top" size="mini" @click="handleImportPoint" + v-hasPermi="['point:import']">瀵煎叆鐐逛綅</el-button> </el-col> <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="el-icon-download" - size="mini" - @click="handleExport" - v-hasPermi="['x:point:export']" - >瀵煎嚭</el-button> + <el-button type="danger" plain icon="el-icon-receiving" size="mini" @click="handleEditBatch" + v-hasPermi="['point:edit']">鎵归噺淇敼</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="pointList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="鐐逛綅鍚嶇О" align="center" prop="pointName" /> - <el-table-column label="鐐逛綅寮�濮嬫椂闂�" align="center" prop="startTime" width="180"> + <el-table-column label="鐐逛綅鍚嶇О" prop="pointName" width="200" /> + <el-table-column label="鏍囩" align="center" width="90"> <template slot-scope="scope"> - <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span> + <dict-tag :options="dict.type.point_tag" :value="scope.row.pointTags" /> </template> </el-table-column> - <el-table-column label="鐐逛綅缁撴潫鏃堕棿" align="center" prop="endTime" width="180"> + <el-table-column label="杩愮淮鍗曚綅" align="center" prop="unitName" /> + <el-table-column label="鐩戠閮ㄩ棬" align="center" prop="deptName" /> + <el-table-column label="杩愮淮绫诲埆" align="center" prop="category"> <template slot-scope="scope"> - <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span> + <div v-if="scope.row.category === 1">瑙嗛鐩戞帶</div> + <div v-else-if="scope.row.category === 2">杞﹁締璇嗗埆</div> + <div v-else-if="scope.row.category === 3">浜鸿劯璇嗗埆</div> </template> </el-table-column> - <el-table-column label="杩愮淮鍗曚綅" align="center" prop="unitId" /> - <el-table-column label="杩愮淮鐘舵��" align="center" prop="status" /> <el-table-column label="澶囨敞" align="center" prop="remark" /> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <el-table-column label="鎿嶄綔" align="center" fixed="right" class-name="small-padding fixed-width"> <template slot-scope="scope"> - <el-button - size="mini" - type="text" - icon="el-icon-edit" - @click="handleUpdate(scope.row)" - >淇敼</el-button> - <el-button - size="mini" - type="text" - icon="el-icon-delete" - @click="handleDelete(scope.row)" - >鍒犻櫎</el-button> + <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" + v-hasPermi="['point:edit']">淇敼</el-button> + <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" + v-hasPermi="['point:remove']">鍒犻櫎</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" - /> + <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" + @pagination="getList" /> <!-- 娣诲姞杩愮淮鐐逛綅瀵硅瘽妗� --> - <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> - <el-form ref="form" :model="tempForm" :rules="rules" label-width="120px"> + <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> + <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="鐐逛綅鍚嶇О" prop="pointName"> - <el-input v-model="tempForm.pointName" placeholder="璇疯緭鍏ョ偣浣嶅悕绉�" /> + <el-input v-model="form.pointName" placeholder="璇疯緭鍏ョ偣浣嶅悕绉�" /> + </el-form-item> + <el-form-item label="鐐逛綅鏍囩" prop="pointTag"> + <el-select v-model="form.pointTag" placeholder="鐐逛綅鏍囩" multiple clearable> + <el-option v-for="dict in dict.type.point_tag" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <!-- <el-form-item label="鐐逛綅鎵�鍦ㄥ湴" prop="region">--> + <!-- <el-cascader v-model="form.region" :options="regionList" placeholder="鐐逛綅鎵�鍦ㄥ湴" :props="props" collapse-tags></el-cascader>--> + <!-- </el-form-item>--> + <el-form-item label="璁惧绫诲瀷" prop="category"> + <el-select v-model="form.category" placeholder="璁惧绫诲瀷"> + <el-option label="浜鸿劯璇嗗埆" value="2" /> + <el-option label="瑙嗛鐩戞帶" value="1" /> + <el-option label="杞﹁締鐩戞帶" value="3" /> + </el-select> + </el-form-item> + <el-form-item label="鐩戠閮ㄩ棬" prop="deptId"> + <el-cascader v-model="form.deptId" :options="deptOptions" :show-all-levels="false" clearable + :props="{ checkStrictly: true }"> + </el-cascader> </el-form-item> <el-form-item label="杩愮淮鍗曚綅" prop="unitId"> - <el-select :disabled="title === '淇敼杩愮淮鐐逛綅'" v-model="tempForm.unitId" placeholder="杩愮淮鍗曚綅"> - <el-option - v-for="item in unitList" - :key="item.id" - :label="item.value" - :value="item.id"> + <el-select v-model="form.unitId" placeholder="杩愮淮鍗曚綅"> + <el-option v-for="item in unitList" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> </el-form-item> - <el-form-item label="鐐逛綅鏃跺尯" prop="timezone"> - <el-date-picker - :disabled="title === '淇敼杩愮淮鐐逛綅'" - @change="dateChange" - v-model="tempForm.timezone" - type="daterange" - align="right" - unlink-panels - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - > - </el-date-picker> + <el-form-item label="鐐逛綅澶囨敞" prop="remark"> + <el-input type="textarea" v-model="form.remark"/> </el-form-item> - <el-form-item> - <div style="display: flex;flex-direction: row-reverse"> - <el-button @click="nextAdd" type="primary" plain>娣诲姞鐐逛綅</el-button> - </div> - </el-form-item> - <el-row style="min-height: 200px;max-height: 400px; overflow-y: auto"> - <el-col class="col-item" v-for="(point) in tempFormList" :span="8"> - <div style="margin-right: 5px"> - <el-cascader v-model="point.region" :options="regionList" placeholder="璇烽�夋嫨鍖哄煙" :show-all-levels="false"></el-cascader> - </div> - <div v-if="title === '淇敼杩愮淮鐐逛綅'"> - <el-button @click="removeRegion(point)" type="danger" icon="el-icon-delete" circle></el-button> - </div> - </el-col> - </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> @@ -168,21 +112,51 @@ </div> </el-dialog> + <!-- 鎵归噺淇敼杩愮淮鍗曚綅 --> + <el-dialog title="鎵归噺淇敼杩愮淮鍗曚綅" :visible.sync="batchOpen" width="600px" append-to-body> + <el-form ref="form" :model="batchEditForm" :rules="batchRules" label-width="120px"> + <el-form-item label="鐐逛綅閫夋嫨" prop="ids"> + <el-cascader @change="cos" v-model="batchEditForm.ids" :options="regionList" placeholder="璇烽�夋嫨鍖哄煙" + :props="props" collapse-tags></el-cascader> + </el-form-item> + <el-form-item label="杩愮淮鍗曚綅" prop="unitId"> + <el-select v-model="batchEditForm.unitId" placeholder="閫夋嫨杩愮淮鍗曚綅"> + <el-option v-for="item in unitList" :key="item.id" :label="item.value" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button type="primary" @click="submitBatchEdit">纭� 瀹�</el-button> + <el-button @click="cancelBatchEdit">鍙� 娑�</el-button> + </div> + </el-dialog> + </div> </template> <script> -import { listPoint, getPoint, delPoint, addPoint, addPointBatch, updatePoint } from "@/api/platform/point"; +import { listPoint, getPoint, delPoint, addPoint, batchEdit, updatePoint } from "@/api/platform/point"; import { unitSelect } from "@/api/platform/unit"; -import { getCascader } from '../../../api/platform/region' +import { getCascader } from '@/api/platform/region' +import { cascader } from '@/api/system/dept' export default { name: "Point", + dicts: ['point_tag'], data() { return { + deptOptions: [], + // 鎵归噺淇敼琛ㄥ崟 + batchEditForm: { + ids: [], + unitId: null, + timezone: null, + }, + // 鎵归噺淇敼寮圭獥 + batchOpen: false, + props: { multiple: true }, regionList: [], - // 姝e湪淇敼绗嚑涓� - editingIndex: null, // 閬僵灞� loading: true, // 閫変腑鏁扮粍 @@ -205,82 +179,88 @@ editOpen: false, // 杩愮淮鍗曚綅 unitList: [], - // 杩愮淮鏃跺尯 - timezone:[], // 鏌ヨ鍙傛暟 queryParams: { pageNum: 1, pageSize: 10, pointName: null, - startTime: null, - endTime: null, unitId: null, status: null, }, // 琛ㄥ崟鍙傛暟 - form: {}, - // 鎵归噺琛ㄥ崟鍐呭 - formList:[], - // 涓存椂琛ㄥ崟鏁版嵁 - tempForm: {}, - // 涓存椂琛ㄥ崟鏁版嵁鍒楄〃 - tempFormList: [], + form: { + }, // 琛ㄥ崟鏍¢獙 rules: { pointName: [ { required: true, message: "鐐逛綅鍚嶇О涓嶈兘涓虹┖", trigger: "blur" } ], - timezone: [ - { required: true, message: "鐐逛綅鏃跺尯涓嶈兘涓虹┖", trigger: "blur" } + pointTag: [ + { required: true, message: "鐐逛綅鏍囩涓嶈兘涓虹┖", trigger: "change" } ], - unitId: [ - { required: true, message: "杩愮淮鍗曚綅涓嶈兘涓虹┖", trigger: "change" } + deptId: [ + { required: true, message: "鐩戠閮ㄩ棬涓嶈兘涓虹┖", trigger: "change" } ], + category: [ + { required: true, message: "璁惧绫诲瀷", trigger: "change" } + ], + }, + // 鎵归噺琛ㄥ崟鏍¢獙 + batchRules: { + ids: [ + { required: true, message: "璇烽�夋嫨鐐逛綅", trigger: "change" } + ] } }; }, created() { this.getList(); this.getUnitSelect(); - this.getCascader(); + // this.getCascader(); + this.getDeptCascader(); }, methods: { - removeRegion(item) { - this.tempFormList = this.tempFormList.filter(data => data !== item) + // 鐐逛綅瀵煎叆 + handleImportPoint() { + }, + cos(value) { + console.log(value) + }, + // 鎻愪氦鎵归噺淇敼 + submitBatchEdit() { + this.batchEditForm.ids = this.batchEditForm.ids.map(array => array[array.length - 1]); + if (this.batchEditForm.timezone) { + this.batchEditForm.startTime = this.batchEditForm.timezone[0]; + this.batchEditForm.endTime = this.batchEditForm.timezone[1]; + } + }, + // 鍙栨秷鎵归噺淇敼 + cancelBatchEdit() { + this.batchOpen = false; + }, + // 鎵归噺淇敼 + handleEditBatch() { + this.batchOpen = true; + }, + // 鑾峰彇鍖哄幙绾ц仈 getCascader() { getCascader().then(res => { this.regionList = res.data; }) }, - // 鐐逛綅椤逛慨鏀瑰畬鎴� - editFinishItem(index) { - this.editingIndex = null; - let form = this.tempFormList[index]; - form.startTime = form.timezone[0]; - form.endTime = form.timezone[1]; - this.formList[index] = form; + // 鑾峰彇閮ㄩ棬绾ц仈 + getDeptCascader() { + cascader().then(res => { + this.deptOptions = res.data; + }) }, - // 鐐逛綅椤逛慨鏀� - editPointItem(index) { - if (this.editingIndex !== index && this.editingIndex !== null) { - this.$modal.msgWarning("璇峰厛瀹屾垚涓婁竴涓慨鏀�"); - } else { - this.editingIndex = index; - this.tempFormList[index] = this.formList[index]; - } - }, + // 鏃堕棿閫夋嫨鍙戠敓鍙樺寲 dateChange() { this.tempForm.startTime = this.tempForm.timezone[0]; this.tempForm.endTime = this.tempForm.timezone[1]; - }, - // 缁х画娣诲姞鐐逛綅 - nextAdd() { - let item = {} - this.formList.push(item); - this.tempFormList.push(item); }, getUnitSelect() { // 杩愮淮鍗曚綅涓嬫媺鍒楄〃 @@ -302,23 +282,19 @@ this.open = false; this.reset(); }, - updateCancel() { - this.editOpen = false; - this.reset(); - }, // 琛ㄥ崟閲嶇疆 reset() { this.form = { id: null, pointName: null, - startTime: null, - endTime: null, unitId: null, + deptId: [], status: null, remark: null, createTime: null, updateTime: null, - deleted: null + deleted: null, + pointTag: [] }; this.resetForm("form"); }, @@ -335,7 +311,7 @@ // 澶氶�夋閫変腑鏁版嵁 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) - this.single = selection.length!==1 + this.single = selection.length !== 1 this.multiple = !selection.length }, /** 鏂板鎸夐挳鎿嶄綔 */ @@ -350,51 +326,53 @@ const id = row.id || this.ids getPoint(id).then(response => { this.form = response.data; - this.form.timezone = [this.form.startTime, this.form.endTime] + this.form.pointTag = response.data.pointTags; + this.form.deptId = response.data.deptIds + this.form.category = this.form.category + '' this.open = true; this.title = "淇敼杩愮淮鐐逛綅"; }); }, /** 鎻愪氦鎸夐挳 */ submitForm() { - if (this.formList.length > 0) { - // 鎵归噺澧炲姞 - if (this.formList.every(item => !item.hasOwnProperty("id"))) { - addPointBatch(this.formList).then(response => { - this.$modal.msgSuccess("鏂板鎴愬姛"); - this.open = false; - // 閲嶇疆 - this.tempForm = {}; - this.tempFormList = []; - this.formList = []; - this.getList(); - }); - } - }else { - if (this.form.id != null) { - updatePoint(this.form).then(response => { - this.$modal.msgSuccess("淇敼鎴愬姛"); - this.editOpen = false; - this.getList(); - }); + this.$refs['form'].validate(valid => { + if (valid) { + if (this.form.deptId && this.form.deptId.length > 0) { + this.form.deptId = this.form.deptId[this.form.deptId.length - 1] + } + let temp = { + ...this.form, + category: parseInt(this.form.category) + }; + if (temp.id != null) { + updatePoint(temp).then(response => { + this.$modal.msgSuccess("淇敼鎴愬姛"); + this.open = false; + this.getList(); + }); + } else { + addPoint(temp).then(response => { + this.$modal.msgSuccess("鏂板鎴愬姛"); + this.open = false; + this.reset() + this.getList(); + }); + } } else { - addPoint(this.form).then(response => { - this.$modal.msgSuccess("鏂板鎴愬姛"); - this.open = false; - this.getList(); - }); + console.log("error") } - } + }) }, /** 鍒犻櫎鎸夐挳鎿嶄綔 */ handleDelete(row) { const ids = row.id || this.ids; - this.$modal.confirm('鏄惁纭鍒犻櫎杩愮淮鐐逛綅缂栧彿涓�"' + ids + '"鐨勬暟鎹」锛�').then(function() { + this.$modal.confirm('鏄惁纭鍒犻櫎杩愮淮鐐逛綅缂栧彿涓�"' + ids + '"鐨勬暟鎹」锛�').then(function () { return delPoint(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + }).catch(() => { + }); }, /** 瀵煎嚭鎸夐挳鎿嶄綔 */ handleExport() { -- Gitblit v1.8.0