src/api/platform/region.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/system/point/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/system/region/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/api/platform/region.js
New file @@ -0,0 +1,61 @@ import request from '@/utils/request' // 查询地域列表 export function listRegion(query) { return request({ url: '/region/page', method: 'post', data: query }) } // 查询地域详细 export function getRegion(id) { return request({ url: '/region/' + id, method: 'get' }) } // 新增地域 export function addRegion(data) { return request({ url: '/region', method: 'post', data: data }) } // 修改地域 export function updateRegion(data) { return request({ url: '/region', method: 'put', data: data }) } // 删除地域 export function delRegion(id) { return request({ url: '/region/' + id, method: 'delete' }) } // 获取区县列表 export function getCountyList() { return request({ url: '/region/counties', method: 'get' }) } // 获取区县级联选择 export function getCascader() { return request({ url: '/region/cascader', method: 'get' }) } src/views/system/point/index.vue
@@ -87,7 +87,7 @@ <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="运维单位" align="center" prop="unitId" /> <el-table-column label="运维单位" align="center" prop="unitName" /> <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"> @@ -118,85 +118,12 @@ <!-- 添加运维点位对话框 --> <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> <el-form ref="form" :model="tempForm" :rules="rules" label-width="120px"> <el-form-item label="点位名称" prop="pointName"> <el-input v-model="tempForm.pointName" placeholder="请输入点位名称" /> </el-form-item> <el-form-item label="运维单位" prop="unitId"> <el-select v-model="tempForm.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 @change="dateChange" v-model="tempForm.timezone" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </el-date-picker> </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> <div class="point-row" v-for="(point,index) in tempFormList"> <div class="row-item"> <el-input :disabled="editingIndex!==index" v-model="point.pointName" placeholder="点位名称"></el-input> </div> <div class="row-item"> <el-select :disabled="editingIndex!==index" v-model="point.unitId" placeholder="运维单位"> <el-option v-for="item in unitList" :key="item.id" :label="item.value" :value="item.id"> </el-option> </el-select> </div> <div class="row-item"> <el-date-picker :disabled="editingIndex!==index" v-model="point.timezone" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </el-date-picker> </div> <div class="row-item"> <el-button v-show="editingIndex!==index" @click="editPointItem(index)" type="danger" size="small" plain>修改</el-button> <el-button v-show="editingIndex===index" @click="editFinishItem(index)" type="success" size="small" plain>完成</el-button> </div> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> <!-- 修改运维点位对话框 --> <el-dialog :title="title" :visible.sync="editOpen" 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="form.pointName" placeholder="请输入点位名称" /> </el-form-item> <el-form-item label="运维单位" prop="unitId"> <el-select v-model="form.unitId" placeholder="运维单位"> <el-select :disabled="title === '修改运维点位'" v-model="form.unitId" placeholder="运维单位"> <el-option v-for="item in unitList" :key="item.id" @@ -207,6 +134,7 @@ </el-form-item> <el-form-item label="点位时区" prop="timezone"> <el-date-picker :disabled="title === '修改运维点位'" @change="dateChange" v-model="form.timezone" type="daterange" @@ -218,23 +146,41 @@ > </el-date-picker> </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> <el-button @click="updateCancel">取 消</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listPoint, getPoint, delPoint, addPoint, addPointBatch, updatePoint } from "@/api/platform/point"; import { unitSelect } from "@/api/platform/unit"; import { getCascader } from '../../../api/platform/region' export default { name: "Point", data() { return { regionList: [], // 正在修改第几个 editingIndex: null, // 遮罩层 @@ -296,8 +242,18 @@ created() { this.getList(); this.getUnitSelect(); this.getCascader(); }, methods: { removeRegion(item) { this.tempFormList = this.tempFormList.filter(data => data !== item) }, // 获取区县级联 getCascader() { getCascader().then(res => { this.regionList = res.data; }) }, // 点位项修改完成 editFinishItem(index) { this.editingIndex = null; @@ -322,9 +278,9 @@ }, // 继续添加点位 nextAdd() { this.formList.push(this.tempForm); this.tempFormList.push(this.tempForm); this.tempForm = {}; let item = {} // this.formList.push(item); this.tempFormList.push(item); }, getUnitSelect() { // 运维单位下拉列表 @@ -362,7 +318,8 @@ remark: null, createTime: null, updateTime: null, deleted: null deleted: null, pointDetail: "" }; this.resetForm("form"); }, @@ -395,39 +352,31 @@ getPoint(id).then(response => { this.form = response.data; this.form.timezone = [this.form.startTime, this.form.endTime] this.editOpen = true; if (this.form.pointDetail) { this.tempFormList = JSON.parse(this.form.pointDetail) } 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(); }); if (this.tempFormList) { this.form.pointDetail = JSON.stringify(this.tempFormList) } }else { if (this.form.id != null) { updatePoint(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.editOpen = false; this.open = false; this.getList(); }); } else { addPoint(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.reset() this.getList(); }); } } }, /** 删除按钮操作 */ @@ -438,7 +387,8 @@ }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => {}); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { @@ -451,16 +401,11 @@ </script> <style scoped> .point-row { .col-item { margin: 5px 0; display: flex; flex-direction: row; align-content: center; justify-content: center; align-items: center; } .row-item { margin-right: 5px; } .row-item:nth-last-child { margin-right: 0; } </style> src/views/system/region/index.vue
New file @@ -0,0 +1,351 @@ <template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="地方全称" prop="fullName"> <el-input v-model="queryParams.fullName" placeholder="请输入地方全称" clearable @clear="handleQuery" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="地方简称" prop="simpleName"> <el-input v-model="queryParams.simpleName" placeholder="请输入地方简称" clearable @clear="handleQuery" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="区县" prop="county"> <el-select v-model="queryParams.parentId" clearable @change="handleQuery" placeholder="请选择区县"> <el-option v-for="item in countyList" :label="item.value" :value="item.id" :key="item.id"/> </el-select> </el-form-item> <el-form-item label="地方级别" prop="county"> <el-select v-model="queryParams.regionLevel" clearable @change="handleQuery" placeholder="请选择区县"> <el-option label="市" value="city" /> <el-option label="区县" value="county" /> <el-option label="街道" value="street" /> </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="handleAdd" v-hasPermi="['system:region:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:region:edit']" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:region:remove']" >删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:region:export']" >导出</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="regionList" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="区域全称" align="center" prop="fullName" /> <el-table-column label="区域简称" align="center" prop="simpleName" /> <el-table-column label="地域级别" align="center"> <template slot-scope="scope"> <el-tag :type="typeByLevel(scope.row.regionLevel)" size="medium">{{ scope.row.regionLevel }}</el-tag> </template> </el-table-column> <el-table-column label="市" align="center" prop="city" /> <el-table-column label="区县" align="center" prop="county" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:region:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:region: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" /> <!-- 添加或修改地域对话框 --> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="市" prop="city"> <el-input v-model="form.city" disabled /> </el-form-item> <el-form-item label="区县" prop="county"> <el-select v-model="form.parentId" @change="changeCounty" placeholder="请选择区县"> <el-option v-for="item in countyList" :label="item.value" :value="item.id" :key="item.id"/> </el-select> </el-form-item> <el-form-item label="地方全称" prop="fullName"> <el-input v-model="form.fullName" type="textarea" placeholder="请输入地方全称" /> </el-form-item> <el-form-item label="地方简称" prop="simpleName"> <el-input v-model="form.simpleName" placeholder="请输入地方简称" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listRegion, getRegion, delRegion, addRegion, updateRegion, getCountyList } from "@/api/platform/region"; export default { name: "Region", data() { return { // 区县列表 countyList: [], // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 地域表格数据 regionList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 父级id时间范围 daterangeCreateTime: [], // 查询参数 queryParams: { pageNum: 1, pageSize: 10, fullName: null, simpleName: null, regionLevel: null, parentId: null, }, // 表单参数 form: { id: null, fullName: null, simpleName: null, regionLevel: null, city: "自贡市", county: null, parentId: null, createTime: null, updateTime: null, deleted: null }, // 表单校验 rules: { fullName: [ { required: true, message: "区域全称不能为空", trigger: "blur" } ], simpleName: [ { required: true, message: "区域简称不能为空", trigger: "blur" } ], countyId: [ { required: true, message: "请选择区县", trigger: "change" } ], } }; }, created() { this.getList(); this.getCountyList(); }, methods: { typeByLevel(level) { if (level === "市") { return "danger" } if (level === "区县") { return "success" } }, //改变区县时,修改parentId changeCounty(value) { this.form.county = this.countyList.filter(item => item.id === value)[0].value }, // 获取区县列表 getCountyList() { getCountyList().then(res => { this.countyList = res.data; }) }, /** 查询地域列表 */ getList() { this.loading = true; this.queryParams.params = {}; if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) { this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0]; this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1]; } listRegion(this.queryParams).then(response => { this.regionList = response.data; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, fullName: null, simpleName: null, regionLevel: null, city: "自贡市", county: null, parentId: null, createTime: null, updateTime: null, deleted: null }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.daterangeCreateTime = []; this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length!==1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = "添加地域"; }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getRegion(id).then(response => { this.form = response.data; this.open = true; this.title = "修改地域"; }); }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateRegion(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addRegion(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$modal.confirm('是否确认删除地域编号为"' + ids + '"的数据项?').then(function() { return delRegion(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => {}); }, /** 导出按钮操作 */ handleExport() { this.download('system/region/export', { ...this.queryParams }, `region_${new Date().getTime()}.xlsx`) } } }; </script>