From ddad886321455b5f5569ec6335eea478ae7fe7df Mon Sep 17 00:00:00 2001 From: zhitan-cloud <394600+ustcyc@user.noreply.gitee.com> Date: 星期五, 14 二月 2025 19:27:38 +0800 Subject: [PATCH] !78 全系统按钮列表等优化 Merge pull request !78 from Alioo/develop_alioo --- zhitan-vue/src/views/powerquality/threephase/index.vue | 24 zhitan-vue/src/views/system/role/index.vue | 807 ++-- zhitan-vue/src/views/modelconfiguration/indexwarehouse/components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue | 239 zhitan-vue/src/views/tool/gen/index.vue | 455 +- zhitan-vue/src/views/system/config/index.vue | 459 +- zhitan-vue/src/views/energyanalysis/comprehensive/comprehensive.vue | 400 - zhitan-vue/src/views/policy/knowledgebase/knowledgeBase.vue | 35 zhitan-vue/src/views/modelconfiguration/setpeakvalley/setPeakValley.vue | 381 + zhitan-vue/src/assets/styles/index.scss | 3 zhitan-vue/src/views/modelconfiguration/energytype/energyType.vue | 338 - zhitan-vue/src/views/system/name/name.vue | 98 zhitan-vue/src/views/system/user/index.vue | 1075 +++-- zhitan-vue/src/views/dataMonitoring/historyDataTrend/index.vue | 2 zhitan-vue/src/views/modelconfiguration/businessmodel/businessModel.vue | 607 +- zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue | 6 zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue | 6 zhitan-vue/src/views/carbonemission/carbonEmission.vue | 6 zhitan-vue/src/views/modelconfiguration/collectindicator/collectIndicator.vue | 153 zhitan-vue/src/views/system/dict/index.vue | 484 +- zhitan-vue/src/views/modelconfiguration/energyvarieties/energyVarieties.vue | 190 zhitan-vue/src/views/monitor/job/index.vue | 778 ++-- zhitan-vue/src/views/monitor/online/index.vue | 178 zhitan-vue/src/views/system/post/index.vue | 407 +- zhitan-vue/src/views/businessconfiguration/prealarmmanage/prealarmmanage.vue | 201 zhitan-vue/src/views/system/dept/index.vue | 413 +- zhitan-vue/src/views/auxiliaryentry/productoutput/productOutput.vue | 278 - zhitan-vue/src/views/modelconfiguration/calculationformula/calculationFormula.vue | 33 zhitan-vue/src/components/Echarts/LineChart.vue | 3 zhitan-vue/src/views/comprehensive/dailyComprehensive/index.vue | 26 zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue | 6 zhitan-vue/src/views/system/menu/index.vue | 701 +- zhitan-vue/src/views/energyconservation/policyrule/policyRule.vue | 53 zhitan-vue/src/views/energyconservation/projectmanage/projectmanage/projectManage.vue | 61 zhitan-vue/src/assets/styles/page.scss | 7 zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue | 7 zhitan-vue/src/views/comprehensive/comps/LineChart.vue | 4 zhitan-vue/src/views/system/user/profile/index.vue | 152 zhitan-vue/src/views/system/user/profile/userInfo.vue | 98 zhitan-vue/src/views/energyanalysis/equipment/equipment.vue | 338 zhitan-vue/src/views/monitor/operlog/index.vue | 503 +- zhitan-vue/src/views/system/user/profile/resetPwd.vue | 71 zhitan-vue/src/views/alarmmanage/alarmrecord/alarmRecord.vue | 129 zhitan-vue/src/views/energyanalysis/department/department.vue | 323 zhitan-vue/src/views/modelconfiguration/indexwarehouse/indexWarehouse.vue | 6 zhitan-vue/src/views/monitor/logininfor/index.vue | 372 + zhitan-vue/src/views/businessconfiguration/gatewayledger/gatewayLedger.vue | 9 zhitan-vue/src/views/system/user/profile/userAvatar.vue | 101 47 files changed, 5,621 insertions(+), 5,405 deletions(-) diff --git a/zhitan-vue/src/assets/styles/index.scss b/zhitan-vue/src/assets/styles/index.scss index a99aaef..7a592be 100644 --- a/zhitan-vue/src/assets/styles/index.scss +++ b/zhitan-vue/src/assets/styles/index.scss @@ -135,7 +135,8 @@ //main-container鍏ㄥ眬鏍峰紡 .app-container { - padding: 20px; + // padding: 0 12px; + padding-right: 12px; } .components-container { diff --git a/zhitan-vue/src/assets/styles/page.scss b/zhitan-vue/src/assets/styles/page.scss index 6b2a8b1..7a600a2 100644 --- a/zhitan-vue/src/assets/styles/page.scss +++ b/zhitan-vue/src/assets/styles/page.scss @@ -33,6 +33,7 @@ } .table-bg-style { + margin-top: 12px; .theme-dark-mt20 { margin-top: 20px; } @@ -56,7 +57,7 @@ } .table-box { - margin: 20px; + margin: 0; .table-title-box { font-weight: bold; @@ -106,10 +107,12 @@ .form-card { background: #fff; + // background: #F7F8FA; border-radius: 0px 0px 0px 0px; // border: 1px solid #000000; padding: 18px 0 0 15px; } + .table-bg-style { background-color: #fff; padding-top: 12px; @@ -134,7 +137,7 @@ } .table-box { - margin: 20px; + margin: 10px 20px; .table-title-box { font-weight: bold; diff --git a/zhitan-vue/src/components/Echarts/LineChart.vue b/zhitan-vue/src/components/Echarts/LineChart.vue index 8703363..c4c0de6 100644 --- a/zhitan-vue/src/components/Echarts/LineChart.vue +++ b/zhitan-vue/src/components/Echarts/LineChart.vue @@ -74,7 +74,8 @@ color: "#2979ff", }, }, - color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], + color: ["#4dadf8", "#19be6b", "#ff9900", "#3d8a32", "#e8463a", "#ff4e3f"], + // color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], tooltip: { trigger: "axis", axisPointer: { diff --git a/zhitan-vue/src/views/alarmmanage/alarmrecord/alarmRecord.vue b/zhitan-vue/src/views/alarmmanage/alarmrecord/alarmRecord.vue index 801fffe..1ff3b79 100644 --- a/zhitan-vue/src/views/alarmmanage/alarmrecord/alarmRecord.vue +++ b/zhitan-vue/src/views/alarmmanage/alarmrecord/alarmRecord.vue @@ -6,7 +6,7 @@ </div> <div class="page-container-right"> <div class="form-card"> - <el-form :model="form" ref="queryRef" :inline="true" label-width="85px"> + <el-form :model="form" ref="queryRef" :inline="true" label-width="68px"> <el-form-item prop="eierarchyFlag"> <el-radio-group v-model="form.eierarchyFlag"> <el-radio label="B" name="eierarchyFlag">鏈骇</el-radio> @@ -14,14 +14,25 @@ </el-radio-group> </el-form-item> <el-form-item label="鏃堕棿閫夋嫨"> - <el-date-picker v-model="form.dataTime" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" - value-format="YYYY-MM-DD HH:mm:ss" placeholder="鏃堕棿" style="width: 370px" unlink-panels - time-format="HH:mm:ss" /> + <el-date-picker + v-model="form.dataTime" + type="datetimerange" + format="YYYY-MM-DD HH:mm:ss" + value-format="YYYY-MM-DD HH:mm:ss" + placeholder="鏃堕棿" + style="width: 340px" + unlink-panels + time-format="HH:mm:ss" + /> </el-form-item> <el-form-item label="鎶ヨ绫诲埆" prop="indexType"> <el-select v-model="form.indexType" placeholder="璇烽�夋嫨鎶ヨ绫诲埆" style="width: 200px"> - <el-option v-for="dict in alarm_record_category" :key="dict.value" :label="dict.label" - :value="dict.value" /> + <el-option + v-for="dict in alarm_record_category" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> </el-select> </el-form-item> <!-- <el-form-item label="鑳芥簮绫诲瀷" prop="energyType"> @@ -39,18 +50,26 @@ </el-form-item> </el-form> </div> - <BaseCard :title="currentNode ? currentNode.label + '--鑺傜偣閰嶇疆' : '鏆傛棤鑺傜偣閰嶇疆' - "> + <BaseCard :title="currentNode ? currentNode.label + '--鑺傜偣閰嶇疆' : '鏆傛棤鑺傜偣閰嶇疆'"> <div class="table-box"> <el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)"> <el-table-column type="index" label="搴忓彿" width="70" /> <el-table-column label="鐢ㄨ兘鍗曞厓" prop="modelName" align="center" show-overflow-tooltip /> <el-table-column label="鎸囨爣鍚嶇О" prop="indexName" align="center" show-overflow-tooltip /> - <el-table-column label="鎶ヨ绫诲埆" prop="indexType" align="center" show-overflow-tooltip :formatter="(row, column) => - proxy.selectDictLabel(alarm_record_category, row.indexType) - " /> - <el-table-column label="鑳芥簮绫诲瀷" prop="energyId" align="center" show-overflow-tooltip :formatter="(row, column) => formatterLabel(energyTypeList, row.energyId) - " /> + <el-table-column + label="鎶ヨ绫诲埆" + prop="indexType" + align="center" + show-overflow-tooltip + :formatter="(row, column) => proxy.selectDictLabel(alarm_record_category, row.indexType)" + /> + <el-table-column + label="鑳芥簮绫诲瀷" + prop="energyId" + align="center" + show-overflow-tooltip + :formatter="(row, column) => formatterLabel(energyTypeList, row.energyId)" + /> <el-table-column label="棰勮鍊�" prop="energyType" align="center" show-overflow-tooltip /> <el-table-column label="鎶ヨ鍊�" prop="alarmValue" align="center" show-overflow-tooltip /> <el-table-column label="鎶ヨ鏃堕棿" prop="alarmBeginTime" align="center" show-overflow-tooltip /> @@ -58,17 +77,22 @@ </div> </BaseCard> - <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" @pagination="getList(currentNode)" /> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList(currentNode)" + /> </div> </div> </div> </template> <script setup name="alarmRecord"> -import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"; -const { proxy } = getCurrentInstance(); -let { alarm_record_category } = proxy.useDict("alarm_record_category"); -import { historicalAlarm } from "@/api/alarmManage/alarmManage"; +import { listEnergyTypeList } from "@/api/modelConfiguration/energyType" +const { proxy } = getCurrentInstance() +let { alarm_record_category } = proxy.useDict("alarm_record_category") +import { historicalAlarm } from "@/api/alarmManage/alarmManage" let form = ref({ eierarchyFlag: "B", dataTime: [ @@ -79,74 +103,77 @@ indexType: "", // energyType: '', indexName: "", -}); -const energyTypeList = ref(); +}) +const energyTypeList = ref() function getEnergyTypeList() { listEnergyTypeList().then((res) => { - energyTypeList.value = res.data; - form.value.indexType = alarm_record_category.value[0].value; + energyTypeList.value = res.data + form.value.indexType = alarm_record_category.value[0].value // form.value.energyType = energyTypeList.value[0].enersno - getList(); - }); + getList() + }) } // getEnergyTypeList() -let currentNode = ref(); +let currentNode = ref() function handleNodeClick(data) { - currentNode.value = data; - getEnergyTypeList(); + currentNode.value = data + getEnergyTypeList() } -let tableData = ref([]); -let total = ref(0); -let loading = ref(false); +let tableData = ref([]) +let total = ref(0) +let loading = ref(false) let queryParams = ref({ pageNum: 1, pageSize: 10, -}); +}) function formatterLabel(list, value) { - let dict = list.find((item) => item.enersno == value); - return dict ? dict.enername : ""; + let dict = list.find((item) => item.enersno == value) + return dict ? dict.enername : "" } function getList() { - form.value.nodeId = currentNode.value.id; - loading.value = true; + form.value.nodeId = currentNode.value.id + loading.value = true historicalAlarm({ ...form.value, ...queryParams.value, beginTime: form.value.dataTime[0], endTime: form.value.dataTime[1], }).then((response) => { - console.log(11, response); + console.log(11, response) if (response.code === 200) { - tableData.value = response.rows; - total.value = response.total; - loading.value = false; + tableData.value = response.rows + total.value = response.total + loading.value = false } else { - proxy.$modal.msgError(response.msg); + proxy.$modal.msgError(response.msg) } - }); + }) } function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } function resetQuery() { form.value = { - eierarchyFlag: 'B', - dataTime: [proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"), proxy.dayjs(new Date()).format("YYYY-MM-DD 23:59:59")], - nodeId: '', + eierarchyFlag: "B", + dataTime: [ + proxy.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"), + proxy.dayjs(new Date()).format("YYYY-MM-DD 23:59:59"), + ], + nodeId: "", indexType: alarm_record_category.value[0].value, // energyType: '', - indexName: '', + indexName: "", } queryParams.value = { pageNum: 1, pageSize: 10, - }; - getList(); + } + getList() } </script> @@ -190,4 +217,4 @@ .table-box { height: calc(100vh - 464px); } -</style> \ No newline at end of file +</style> diff --git a/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue b/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue index e832fe5..0a7c725 100644 --- a/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue +++ b/zhitan-vue/src/views/auxiliaryentry/electricityinput/electricityinput.vue @@ -40,12 +40,12 @@ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="Plus" @click="handleAdd"> 鏂板 </el-button> + </el-form-item> </el-form> </div> <div class="table-bg-style"> - <div class="theme-dark-mt20 mb20 ml20"> - <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button> - </div> <div class="table-box"> <el-table :data="tableData" v-loading="loading"> <el-table-column prop="time" label="鏃堕棿" show-overflow-tooltip align="center" /> diff --git a/zhitan-vue/src/views/auxiliaryentry/productoutput/productOutput.vue b/zhitan-vue/src/views/auxiliaryentry/productoutput/productOutput.vue index 8f3de9a..8d1f378 100644 --- a/zhitan-vue/src/views/auxiliaryentry/productoutput/productOutput.vue +++ b/zhitan-vue/src/views/auxiliaryentry/productoutput/productOutput.vue @@ -6,12 +6,7 @@ </div> <div class="page-container-right"> <div class="form-card"> - <el-form - :model="queryParams" - ref="queryRef" - :inline="true" - v-show="showSearch" - > + <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> <el-form-item label="鏈熼棿" prop="timeType"> <el-select v-model="queryParams.timeType" @@ -19,12 +14,7 @@ style="width: 120px" @change="handleTimeType" > - <el-option - v-for="dict in period" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> + <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="鏃堕棿"> @@ -58,33 +48,20 @@ /> </el-form-item> <el-form-item label="浜у搧绫诲瀷"> - <el-select - v-model="queryParams.productType" - placeholder="浜у搧绫诲瀷" - style="width: 100%" - > - <el-option - v-for="dict in product_type" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> + <el-select v-model="queryParams.productType" placeholder="浜у搧绫诲瀷" style="width: 100%"> + <el-option v-for="dict in product_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> <el-button icon="Refresh" @click="resetQuery"> 閲嶇疆 </el-button> + </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="Plus" @click="handleAdd"> 鏂板 </el-button> </el-form-item> </el-form> </div> <div class="table-box"> - <div class="mt20 mb20"> - <el-button type="primary" icon="Plus" @click="handleAdd"> - 鏂板 - </el-button> - </div> <el-table v-loading="loading" :data="productoutputList"> <el-table-column label="鐢ㄨ兘鍗曞厓" @@ -93,13 +70,7 @@ prop="nodeName" :show-overflow-tooltip="true" /> - <el-table-column - label="鏈熼棿" - align="center" - key="timeType" - prop="timeType" - :show-overflow-tooltip="true" - > + <el-table-column label="鏈熼棿" align="center" key="timeType" prop="timeType" :show-overflow-tooltip="true"> <template #default="scope"> <dict-tag :options="period" :value="scope.row.timeType" /> </template> @@ -120,10 +91,7 @@ :show-overflow-tooltip="true" > <template #default="scope"> - <dict-tag - :options="product_type" - :value="scope.row.productType" - /> + <dict-tag :options="product_type" :value="scope.row.productType" /> </template> </el-table-column> <!-- <el-table-column @@ -133,24 +101,12 @@ prop="name" :show-overflow-tooltip="true" /> --> - <el-table-column - label="鍗曚綅" - align="center" - key="unit" - prop="unit" - :show-overflow-tooltip="true" - > + <el-table-column label="鍗曚綅" align="center" key="unit" prop="unit" :show-overflow-tooltip="true"> <template #default="scope"> <dict-tag :options="sys_unit" :value="scope.row.unit" /> </template> </el-table-column> - <el-table-column - label="浜ч噺" - align="center" - key="number" - prop="number" - :show-overflow-tooltip="true" - /> + <el-table-column label="浜ч噺" align="center" key="number" prop="number" :show-overflow-tooltip="true" /> <el-table-column label="鎻愪氦鏃堕棿" align="center" @@ -158,32 +114,13 @@ :show-overflow-tooltip="true" width="200" /> - <el-table-column - label="鎿嶄綔" - align="center" - class-name="small-padding fixed-width" - width="200" - > + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" width="200"> <template #default="scope"> <el-tooltip content="缂栬緫" placement="top"> - <el-button - link - type="primary" - icon="Edit" - @click="handleUpdate(scope.row)" - > - 缂栬緫 - </el-button> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 缂栬緫 </el-button> </el-tooltip> <el-tooltip content="鍒犻櫎" placement="top"> - <el-button - link - type="primary" - icon="Delete" - @click="handleDelete(scope.row)" - > - 鍒犻櫎 - </el-button> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 鍒犻櫎 </el-button> </el-tooltip> </template> </el-table-column> @@ -203,11 +140,7 @@ <el-row> <el-col :span="12"> <el-form-item label="鐢ㄨ兘鍗曞厓" prop="nodeName"> - <el-input - v-model="form.nodeName" - placeholder="璇疯緭鍏ョ敤鑳藉崟鍏�" - disabled - /> + <el-input v-model="form.nodeName" placeholder="璇疯緭鍏ョ敤鑳藉崟鍏�" disabled /> </el-form-item> </el-col> <el-col :span="12"> @@ -219,12 +152,7 @@ style="width: 100%" @change="handleTimeTypeAdd" > - <el-option - v-for="dict in period" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> + <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> @@ -261,18 +189,8 @@ </el-col> <el-col :span="12"> <el-form-item label="浜у搧绫诲瀷" prop="productType"> - <el-select - v-model="form.productType" - placeholder="浜у搧绫诲瀷" - clearable - style="width: 100%" - > - <el-option - v-for="dict in product_type" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> + <el-select v-model="form.productType" placeholder="浜у搧绫诲瀷" clearable style="width: 100%"> + <el-option v-for="dict in product_type" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> @@ -287,18 +205,8 @@ </el-col> --> <el-col :span="12"> <el-form-item label="鍗曚綅" prop="unit"> - <el-select - v-model="form.unit" - placeholder="璇烽�夋嫨鍗曚綅" - clearable - style="width: 100%" - > - <el-option - v-for="dict in sys_unit" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> + <el-select v-model="form.unit" placeholder="璇烽�夋嫨鍗曚綅" clearable style="width: 100%"> + <el-option v-for="dict in sys_unit" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> </el-col> @@ -331,19 +239,15 @@ addProductoutput, updateProductoutput, delProductoutput, -} from "@/api/auxiliaryEntry/productOutput"; -const { proxy } = getCurrentInstance(); -import { useRoute } from "vue-router"; -const { period, sys_unit, product_type } = proxy.useDict( - "period", - "sys_unit", - "product_type" -); -const productoutputList = ref([]); -const open = ref(false); -const loading = ref(false); -const showSearch = ref(true); -const title = ref(""); +} from "@/api/auxiliaryEntry/productOutput" +const { proxy } = getCurrentInstance() +import { useRoute } from "vue-router" +const { period, sys_unit, product_type } = proxy.useDict("period", "sys_unit", "product_type") +const productoutputList = ref([]) +const open = ref(false) +const loading = ref(false) +const showSearch = ref(true) +const title = ref("") const data = reactive({ form: {}, queryParams: { @@ -358,12 +262,8 @@ }, query: { ...useRoute().query }, rules: { - timeType: [ - { required: true, message: "鏈熼棿涓嶈兘涓虹┖", trigger: ["blur", "change"] }, - ], - dataTime: [ - { required: true, message: "鏃堕棿涓嶈兘涓虹┖", trigger: ["blur", "change"] }, - ], + timeType: [{ required: true, message: "鏈熼棿涓嶈兘涓虹┖", trigger: ["blur", "change"] }], + dataTime: [{ required: true, message: "鏃堕棿涓嶈兘涓虹┖", trigger: ["blur", "change"] }], productType: [ { required: true, @@ -373,78 +273,74 @@ ], // name: [{ required: true, message: "浜у搧鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], unit: [{ required: true, message: "鍗曚綅涓嶈兘涓虹┖", trigger: "blur" }], - number: [ - { required: true, message: "浜ч噺涓嶈兘涓虹┖", trigger: ["blur", "change"] }, - ], + number: [{ required: true, message: "浜ч噺涓嶈兘涓虹┖", trigger: ["blur", "change"] }], }, -}); -const { queryParams, query, form, rules } = toRefs(data); +}) +const { queryParams, query, form, rules } = toRefs(data) /** 鑺傜偣鍗曞嚮浜嬩欢 */ function handleNodeClick(data) { - queryParams.value.nodeId = data.id; - queryParams.value.nodeName = data.label; - queryParams.value.productType = null; - handleTimeType(period.value[0].value); - handleQuery(); + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label + queryParams.value.productType = null + handleTimeType(period.value[0].value) + handleQuery() } function handleTimeType(e) { - queryParams.value.timeType = e; + queryParams.value.timeType = e queryParams.value.dataTime = proxy .dayjs(new Date()) - .format(e == "YEAR" ? "YYYY" : e == "MONTH" ? "YYYY-MM" : "YYYY-MM-DD"); + .format(e == "YEAR" ? "YYYY" : e == "MONTH" ? "YYYY-MM" : "YYYY-MM-DD") } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-鍒楄〃 function getList() { - loading.value = true; + loading.value = true listProductoutput( proxy.addDateRange({ ...queryParams.value, ...query.value, }) ).then((res) => { - loading.value = false; - productoutputList.value = res.rows; - queryParams.value.total = res.total; - }); + loading.value = false + productoutputList.value = res.rows + queryParams.value.total = res.total + }) } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-鎼滅储 function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - queryParams.value.pageNum = 1; - queryParams.value.pageSize = 10; - queryParams.value.total = 0; - queryParams.value.timeType = null; - queryParams.value.dataTime = null; - queryParams.value.productType = null; - handleTimeType(period.value[0].value); - handleQuery(); + proxy.resetForm("queryRef") + queryParams.value.pageNum = 1 + queryParams.value.pageSize = 10 + queryParams.value.total = 0 + queryParams.value.timeType = null + queryParams.value.dataTime = null + queryParams.value.productType = null + handleTimeType(period.value[0].value) + handleQuery() } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-鏂板 function handleAdd() { - reset(); - form.value.nodeId = queryParams.value.nodeId; - form.value.nodeName = queryParams.value.nodeName; - handleTimeTypeAdd(period.value[0].value); - title.value = "鏂板浜у搧浜ч噺褰曞叆"; - open.value = true; + reset() + form.value.nodeId = queryParams.value.nodeId + form.value.nodeName = queryParams.value.nodeName + handleTimeTypeAdd(period.value[0].value) + title.value = "鏂板浜у搧浜ч噺褰曞叆" + open.value = true } function handleTimeTypeAdd(e) { - form.value.timeType = e; - form.value.dataTime = proxy - .dayjs(new Date()) - .format(e == "YEAR" ? "YYYY" : e == "MONTH" ? "YYYY-MM" : "YYYY-MM-DD"); + form.value.timeType = e + form.value.dataTime = proxy.dayjs(new Date()).format(e == "YEAR" ? "YYYY" : e == "MONTH" ? "YYYY-MM" : "YYYY-MM-DD") } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-缂栬緫 function handleUpdate(row) { - reset(); - form.value = { ...row }; - open.value = true; - title.value = "缂栬緫浜у搧浜ч噺褰曞叆"; + reset() + form.value = { ...row } + open.value = true + title.value = "缂栬緫浜у搧浜ч噺褰曞叆" } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-鏂板/缂栬緫-淇濆瓨 function submitForm() { @@ -452,24 +348,24 @@ if (valid) { if (form.value.productOutputId != undefined) { updateProductoutput(form.value).then((response) => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { addProductoutput(form.value).then((response) => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-鏂板/缂栬緫-鍙栨秷 function cancel() { - open.value = false; - reset(); + open.value = false + reset() } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-鏂板/缂栬緫-琛ㄥ崟閲嶇疆 function reset() { @@ -480,8 +376,8 @@ number: "1", timeType: "", unit: "", - }; - proxy.resetForm("formRef"); + } + proxy.resetForm("formRef") } // 杈呭姪褰曞叆-浜у搧浜ч噺褰曞叆-鍒犻櫎 function handleDelete(row) { @@ -489,13 +385,13 @@ .confirm('鏄惁纭鍒犻櫎鏃堕棿涓�"' + row.dataTime + '"鐨勬暟鎹」锛�') // .confirm('鏄惁纭鍒犻櫎浜у搧鍚嶇О涓�"' + row.name + '"鐨勬暟鎹」锛�') .then(function () { - return delProductoutput(row.productOutputId); + return delProductoutput(row.productOutputId) }) .then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") }) - .catch(() => {}); + .catch(() => {}) } </script> <style scoped lang="scss"> diff --git a/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue b/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue index 5be2000..912affb 100644 --- a/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue +++ b/zhitan-vue/src/views/businessconfiguration/alarmmaintenance/alarmMaintenance.vue @@ -9,14 +9,13 @@ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> + </el-form-item> </el-form> </div> <div class="table-bg-style"> - <div class="theme-dark-mt20 mb20 ml20"> - <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> - <!-- <el-button type="primary" icon="Delete">鍒犻櫎</el-button> --> - </div> <div class="table-box"> <el-table :data="tableData" v-loading="loading"> <el-table-column prop="limitName" label="闄愬�肩被鍨嬪悕绉�" show-overflow-tooltip align="center" /> diff --git a/zhitan-vue/src/views/businessconfiguration/gatewayledger/gatewayLedger.vue b/zhitan-vue/src/views/businessconfiguration/gatewayledger/gatewayLedger.vue index a7f3304..b11dd9d 100644 --- a/zhitan-vue/src/views/businessconfiguration/gatewayledger/gatewayLedger.vue +++ b/zhitan-vue/src/views/businessconfiguration/gatewayledger/gatewayLedger.vue @@ -11,14 +11,13 @@ <el-form-item label="娴嬬偣鏁伴噺:" class="header-box"> <span class="count">{{ ptNum || 0 }}</span> </el-form-item> + <div class="mb20 ml20 mr20" style="float: right"> + <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> + <el-button type="primary" icon="Download" @click="handleExport">瀵煎嚭</el-button> + </div> </el-form> </div> <div class="table-bg-style"> - <div class="theme-dark-mt20 mb20 ml20"> - <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> - <el-button type="primary" icon="Download" @click="handleExport">瀵煎嚭</el-button> - </div> - <div class="table-box"> <el-table :data="tableData" v-loading="loading"> <el-table-column prop="gatewayNum" label="缃戝叧缂栧彿" show-overflow-tooltip align="center" /> diff --git a/zhitan-vue/src/views/businessconfiguration/prealarmmanage/prealarmmanage.vue b/zhitan-vue/src/views/businessconfiguration/prealarmmanage/prealarmmanage.vue index f8402c3..a3f48e8 100644 --- a/zhitan-vue/src/views/businessconfiguration/prealarmmanage/prealarmmanage.vue +++ b/zhitan-vue/src/views/businessconfiguration/prealarmmanage/prealarmmanage.vue @@ -1,140 +1,143 @@ <template> - <div class="page"> - <div class="page-container"> - <div class="page-container-left"> - <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" /> + <div class="page"> + <div class="page-container"> + <div class="page-container-left"> + <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" /> + </div> + <div class="page-container-right"> + <div class="page-container-right"> + <div class="tab-box"> + <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">閲囬泦鐐圭鐞�</div> + <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">缁熻鎸囨爣绠$悊</div> + </div> + <BaseCard :title="currentNode ? currentNode.label + '--鑺傜偣閰嶇疆' : '鏆傛棤鑺傜偣閰嶇疆'"> + <div> + <div class="content-box" v-if="tab == '1'"> + <CollectionPointManage ref="collectionPointManageRef" /> + </div> + <div class="content-box" v-if="tab == '2'"> + <StatisticalIndicatorsManage ref="statisticalIndicatorsManageRef" /> + </div> </div> - <div class="page-container-right"> - <div class="page-container-right"> - <div class="mb20 mt20 ml20 tab-box"> - <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')"> - 閲囬泦鐐圭鐞� - </div> - <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')"> - 缁熻鎸囨爣绠$悊 - </div> - </div> - <BaseCard :title="currentNode ? currentNode.label + '--鑺傜偣閰嶇疆' : '鏆傛棤鑺傜偣閰嶇疆'"> - <div> - <div class="content-box" v-if="tab == '1'"> - <CollectionPointManage ref="collectionPointManageRef" /> - </div> - <div class="content-box" v-if="tab == '2'"> - <StatisticalIndicatorsManage ref="statisticalIndicatorsManageRef" /> - </div> - </div> - </BaseCard> - </div> - </div> - + </BaseCard> </div> + </div> </div> + </div> </template> <script setup name="preAlarmManage"> -import CollectionPointManage from './components/collectionpointmanage/CollectionPointManage.vue' -import StatisticalIndicatorsManage from './components/statisticalindicatorsmanage/StatisticalIndicatorsManage.vue' +import CollectionPointManage from "./components/collectionpointmanage/CollectionPointManage.vue" +import StatisticalIndicatorsManage from "./components/statisticalindicatorsmanage/StatisticalIndicatorsManage.vue" let currentNode = ref() -let tab = ref('1') +let tab = ref("1") let collectionPointManageRef = ref() -let statisticalIndicatorsManageRef = ref('1') +let statisticalIndicatorsManageRef = ref("1") function handleTab(value) { - tab.value = value - nextTick(() => { - if (value == 1 && collectionPointManageRef.value) { - collectionPointManageRef.value.getList(currentNode.value) - } - if (value == 2 && statisticalIndicatorsManageRef.value) { - statisticalIndicatorsManageRef.value.getList(currentNode.value) - } - }); - + tab.value = value + nextTick(() => { + if (value == 1 && collectionPointManageRef.value) { + collectionPointManageRef.value.getList(currentNode.value) + } + if (value == 2 && statisticalIndicatorsManageRef.value) { + statisticalIndicatorsManageRef.value.getList(currentNode.value) + } + }) } function handleNodeClick(data) { - currentNode.value = data - handleTab(tab.value) - // handleQuery(); + currentNode.value = data + handleTab(tab.value) + // handleQuery(); } - </script> <style scoped lang="scss"> @import "@/assets/styles/page.scss"; - .page-box { - height: calc(100vh - 145px); + height: calc(100vh - 145px); - .tree-box { - height: calc(100% - 70px); - overflow-y: auto !important; + .tree-box { + height: calc(100% - 70px); + overflow-y: auto !important; + } + + .select-box { + display: flex; + align-items: center; + + :deep .el-icon { + color: #fff; + margin: 0 10px 0 15px; + font-size: 20px; + // &:hover{ + // color: #3371EB; + // } } + } - .select-box { - display: flex; - align-items: center; + .node-opt { + flex: 1; + text-align: right; + margin-right: 5px; - :deep .el-icon { - color: #fff; - margin: 0 10px 0 15px; - font-size: 20px; - // &:hover{ - // color: #3371EB; - // } - } + :deep .el-icon { + color: #fff; + margin-right: 5px; } - - .node-opt { - flex: 1; - text-align: right; - margin-right: 5px; - - :deep .el-icon { - color: #fff; - margin-right: 5px; - } - } - - + } } :deep .el-tabs__nav-wrap:after { - background: transparent; + background: transparent; } :deep .el-tabs__item { - color: #fff; - font-size: 20px; - padding: 0 20px; + color: #fff; + // font-size: 20px; + padding: 0 20px; - &.is-active, - &:hover { - color: #999 !important; - } + &.is-active, + &:hover { + color: #999 !important; + } } .tab-box { - display: flex; - align-items: center; + display: flex; + align-items: center; + color: #fff; + border-bottom: 1px solid #3371eb; + margin-right: 20px; + font-size: 15px; + margin-left: 15px; + + .tab-li { + cursor: pointer; + border: 1px solid #3371eb; + padding: 8px 20px; + border-radius: 5px 5px 0 0; + } + + .is-tab { + background: #3371eb; color: #fff; - border-bottom: 1px solid #3371EB; - margin-right: 20px; + } +} +.themeDark { + .tab-box { + color: #fff; + } +} - .tab-li { - cursor: pointer; - border: 1px solid #3371EB; - padding: 10px 25px; - border-radius: 5px 5px 0 0; - } - - .is-tab { - background: #3371EB; - } +.themeLight { + .tab-box { + color: #333; + } } .content-box { - height: calc(100vh - 317px) !important; - + height: calc(100vh - 317px) !important; } -</style> \ No newline at end of file +</style> diff --git a/zhitan-vue/src/views/carbonemission/carbonEmission.vue b/zhitan-vue/src/views/carbonemission/carbonEmission.vue index 550abd7..2beaf06 100644 --- a/zhitan-vue/src/views/carbonemission/carbonEmission.vue +++ b/zhitan-vue/src/views/carbonemission/carbonEmission.vue @@ -35,16 +35,16 @@ <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> <el-form-item> - <el-button type="primary" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button> + <el-button type="warning" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button> </el-form-item> </el-form> </div> <div style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto" > - <div class="card-list" v-if="listTop.length > 1"> + <!-- <div class="" v-if="listTop.length > 1" style="margin: 12px 0 0 18px"> <el-button @click="dialogVisible = true"> 鏌ョ湅鏇村 </el-button> - </div> + </div> --> <template v-for="(row, rowIndex) in listTop" :key="rowIndex" v-loading="loading"> <div class="card-list" v-if="rowIndex == 0"> <template v-for="(item, index) in row" :key="index"> diff --git a/zhitan-vue/src/views/comprehensive/comps/LineChart.vue b/zhitan-vue/src/views/comprehensive/comps/LineChart.vue index 891d8e5..75914f3 100644 --- a/zhitan-vue/src/views/comprehensive/comps/LineChart.vue +++ b/zhitan-vue/src/views/comprehensive/comps/LineChart.vue @@ -49,7 +49,7 @@ color: "#2979ff", }, }, - color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], + color: ["#40c2ff", "#2979ff", "#ff9900", "#fa3534"], tooltip: { trigger: "axis", axisPointer: { @@ -65,7 +65,7 @@ }, }, grid: { - top: "40", + top: "60", left: "50", right: "40", bottom: "20", diff --git a/zhitan-vue/src/views/comprehensive/dailyComprehensive/index.vue b/zhitan-vue/src/views/comprehensive/dailyComprehensive/index.vue index a3d5183..8ef4282 100644 --- a/zhitan-vue/src/views/comprehensive/dailyComprehensive/index.vue +++ b/zhitan-vue/src/views/comprehensive/dailyComprehensive/index.vue @@ -154,32 +154,6 @@ console.log(expectedData) lineChartData.value = { - // xData: [ - // "0鏃�", - // "1鏃�", - // "2鏃�", - // "3鏃�", - // "4鏃�", - // "5鏃�", - // "6鏃�", - // "7鏃�", - // "8鏃�", - // "9鏃�", - // "10鏃�", - // "11鏃�", - // "12鏃�", - // "13鏃�", - // "14鏃�", - // "15鏃�", - // "16鏃�", - // "17鏃�", - // "18鏃�", - // "19鏃�", - // "20鏃�", - // "21鏃�", - // "22鏃�", - // "23鏃�", - // ], xData: actualData, yData: expectedData, title, diff --git a/zhitan-vue/src/views/dataMonitoring/historyDataTrend/index.vue b/zhitan-vue/src/views/dataMonitoring/historyDataTrend/index.vue index 1f64bec..2686774 100644 --- a/zhitan-vue/src/views/dataMonitoring/historyDataTrend/index.vue +++ b/zhitan-vue/src/views/dataMonitoring/historyDataTrend/index.vue @@ -52,7 +52,7 @@ </div> </div> <div class="chart-box" v-loading="loading" v-show="activeKey === 1"> - <LineChart ref="LineChartRef" :chartData="lineChartData" /> + <LineChart ref="LineChartRef" :chartData="lineChartData" :chartType="'bar'" /> </div> <div style="margin-top: 16px" v-show="activeKey === 2"> <div class="" style="padding: 0 16px"> diff --git a/zhitan-vue/src/views/energyanalysis/comprehensive/comprehensive.vue b/zhitan-vue/src/views/energyanalysis/comprehensive/comprehensive.vue index 2983c5b..4b0a1c6 100644 --- a/zhitan-vue/src/views/energyanalysis/comprehensive/comprehensive.vue +++ b/zhitan-vue/src/views/energyanalysis/comprehensive/comprehensive.vue @@ -8,42 +8,40 @@ <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true"> <el-form-item label="鏈熼棿" prop="timeType"> - <el-select v-model="queryParams.timeType" placeholder="鏈熼棿" clearable style="width: 120px" - @change="handleTimeType"> + <el-select + v-model="queryParams.timeType" + placeholder="鏈熼棿" + clearable + style="width: 120px" + @change="handleTimeType" + > <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="鏃堕棿"> - <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR' - ? 'year' - : queryParams.timeType == 'MONTH' - ? 'month' - : 'date' - " :format="queryParams.timeType == 'YEAR' - ? 'YYYY' - : queryParams.timeType == 'MONTH' - ? 'YYYY-MM' - : 'YYYY-MM-DD' - " value-format="YYYY-MM-DD" placeholder="鏃堕棿" style="width: 100%" /> + <el-date-picker + v-model="queryParams.dataTime" + :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'" + :format=" + queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD' + " + value-format="YYYY-MM-DD" + placeholder="鏃堕棿" + style="width: 100%" + /> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> + <!-- <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> --> </el-form-item> <el-form-item> - <el-button type="primary" icon="Download" @click="handleExport"> - 瀵煎嚭 - </el-button> + <el-button type="warning" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button> </el-form-item> </el-form> </div> - <div style=" - height: calc(100vh - 220px) !important; - max-height: calc(100vh - 220px) !important; - overflow-y: auto; - "> + <div + style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto" + > <BaseCard :title="queryParams.nodeName + '-缁煎悎鑳借�楄秼鍔�'"> <div class="chart-box" v-loading="loading"> <div id="Chart1" /> @@ -53,13 +51,16 @@ <el-col :span="7"> <BaseCard :title="queryParams.nodeName + '-缁煎悎鑳借�楀悓姣旂幆姣�'"> <div class="card-list" v-loading="loading"> - <div class="card-list-item" v-show="settingsStore.sideTheme == 'theme-dark'" - :style="{ backgroundImage: 'url(' + item.bg + ')' }" v-for="item in comprehensiveTable" - :key="item.title"> + <div + class="card-list-item" + v-show="settingsStore.sideTheme == 'theme-dark'" + :style="{ backgroundImage: 'url(' + item.bg + ')' }" + v-for="item in comprehensiveTable" + :key="item.title" + > <div class="item-left"> {{ Math.abs(item.icon) }}% - <el-icon :color="item.icon > 0 ? 'green' : item.icon < 0 ? 'red' : '' - "> + <el-icon :color="item.icon > 0 ? 'green' : item.icon < 0 ? 'red' : ''"> <Top v-if="item.icon > 0" /> <Bottom v-if="item.icon < 0" /> </el-icon> @@ -72,18 +73,19 @@ <div class="item-right-bottom-left"> {{ node.label }} </div> - <div class="item-right-bottom-right"> - {{ Number(node.value.toFixed(2)) }} tce - </div> + <div class="item-right-bottom-right">{{ Number(node.value.toFixed(2)) }} tce</div> </div> </div> </div> - <div class="card-list-item" v-show="settingsStore.sideTheme == 'theme-light'" - v-for="item in comprehensiveTable" :key="item.title"> + <div + class="card-list-item" + v-show="settingsStore.sideTheme == 'theme-light'" + v-for="item in comprehensiveTable" + :key="item.title" + > <div class="item-left"> {{ Math.abs(item.icon) }} % - <el-icon :color="item.icon > 0 ? 'green' : item.icon < 0 ? 'red' : '' - "> + <el-icon :color="item.icon > 0 ? 'green' : item.icon < 0 ? 'red' : ''"> <Top v-if="item.icon > 0" /> <Bottom v-if="item.icon < 0" /> </el-icon> @@ -96,9 +98,7 @@ <div class="item-right-bottom-left"> {{ node.label }} </div> - <div class="item-right-bottom-right"> - {{ Number(node.value.toFixed(2)) }}tce - </div> + <div class="item-right-bottom-right">{{ Number(node.value.toFixed(2)) }}tce</div> </div> </div> </div> @@ -123,10 +123,20 @@ <BaseCard :title="queryParams.nodeName + '-缁煎悎鑳借�楃粺璁″垎鏋愯〃'" v-loading="loading"> <div class="table-box"> <el-table :data="comprehensiveList" show-summary> - <el-table-column label="鏃ユ湡" align="center" key="currentTime" prop="currentTime" - :show-overflow-tooltip="true" /> - <el-table-column label="缁煎悎鑳借�楅噺(tce)" align="center" key="currentValue" prop="currentValue" - :show-overflow-tooltip="true" /> + <el-table-column + label="鏃ユ湡" + align="center" + key="currentTime" + prop="currentTime" + :show-overflow-tooltip="true" + /> + <el-table-column + label="缁煎悎鑳借�楅噺(tce)" + align="center" + key="currentValue" + prop="currentValue" + :show-overflow-tooltip="true" + /> </el-table> </div> </BaseCard> @@ -137,26 +147,22 @@ </template> <script setup name="comprehensive"> -import { - listComprehensive, - listYoY, - listEnergyRanking, -} from "@/api/energyAnalysis/energyAnalysis"; -import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"; -import * as echarts from "echarts"; -const { proxy } = getCurrentInstance(); -const { period } = proxy.useDict("period"); -import { useRoute } from "vue-router"; -import useSettingsStore from "@/store/modules/settings"; -const settingsStore = useSettingsStore(); +import { listComprehensive, listYoY, listEnergyRanking } from "@/api/energyAnalysis/energyAnalysis" +import { listEnergyTypeList } from "@/api/modelConfiguration/energyType" +import * as echarts from "echarts" +const { proxy } = getCurrentInstance() +const { period } = proxy.useDict("period") +import { useRoute } from "vue-router" +import useSettingsStore from "@/store/modules/settings" +const settingsStore = useSettingsStore() watch( () => settingsStore.sideTheme, (val) => { - getList(); + getList() } -); -import index_card_1 from "@/assets/images/home/index-card-3.png"; -import index_card_2 from "@/assets/images/home/index-card-4.png"; +) +import index_card_1 from "@/assets/images/home/index-card-3.png" +import index_card_2 from "@/assets/images/home/index-card-4.png" const comprehensiveTable = ref([ { bg: index_card_1, @@ -188,9 +194,9 @@ }, ], }, -]); -const comprehensiveList = ref([]); -const loading = ref(false); +]) +const comprehensiveList = ref([]) +const loading = ref(false) const data = reactive({ queryParams: { nodeId: null, @@ -200,35 +206,35 @@ query: { modelCode: null, }, -}); -const { queryParams, query } = toRefs(data); +}) +const { queryParams, query } = toRefs(data) /** 鑺傜偣鍗曞嚮浜嬩欢 */ function handleNodeClick(data) { - queryParams.value.nodeId = data.id; - queryParams.value.nodeName = data.label; - handleTimeType(period.value[0].value); - handleQuery(); + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label + handleTimeType(period.value[0].value) + handleQuery() } function handleTimeType(e) { - queryParams.value.timeType = e; - queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD"); + queryParams.value.timeType = e + queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD") } // 鑳借�楀姣斿垎鏋�-缁煎悎鑳借�楀垎鏋�-鍒楄〃 function getList() { - loading.value = true; + loading.value = true // 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛dispose鏃х殑瀹炰緥 if (echarts.getInstanceByDom(document.getElementById("Chart1"))) { - echarts.dispose(document.getElementById("Chart1")); + echarts.dispose(document.getElementById("Chart1")) } if (echarts.getInstanceByDom(document.getElementById("Chart2"))) { - echarts.dispose(document.getElementById("Chart2")); + echarts.dispose(document.getElementById("Chart2")) } if (echarts.getInstanceByDom(document.getElementById("Chart3"))) { - echarts.dispose(document.getElementById("Chart3")); + echarts.dispose(document.getElementById("Chart3")) } - const myChart1 = echarts.init(document.getElementById("Chart1")); - const myChart2 = echarts.init(document.getElementById("Chart2")); - const myChart3 = echarts.init(document.getElementById("Chart3")); + const myChart1 = echarts.init(document.getElementById("Chart1")) + const myChart2 = echarts.init(document.getElementById("Chart2")) + const myChart3 = echarts.init(document.getElementById("Chart3")) listComprehensive( proxy.addDateRange({ ...queryParams.value, @@ -236,28 +242,24 @@ }) ).then((res) => { if (!!res.code && res.code == 200) { - loading.value = false; - let xdata = []; - let yvalue = []; - let ycompareValue = []; - let yqoq = []; + loading.value = false + let xdata = [] + let yvalue = [] + let ycompareValue = [] + let yqoq = [] if (!!res.data.chartDataList) { res.data.chartDataList.map((item) => { xdata.push( proxy .dayjs(item.xdata) .format( - queryParams.value.timeType == "YEAR" - ? "MM鏈�" - : queryParams.value.timeType == "MONTH" - ? "DD鏃�" - : "HH鏃�" + queryParams.value.timeType == "YEAR" ? "MM鏈�" : queryParams.value.timeType == "MONTH" ? "DD鏃�" : "HH鏃�" ) - ); - yvalue.push(!!item.yvalue ? item.yvalue : 0); - ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0); - yqoq.push(!!item.yqoq ? item.yqoq : 0); - }); + ) + yvalue.push(!!item.yvalue ? item.yvalue : 0) + ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0) + yqoq.push(!!item.yqoq ? item.yqoq : 0) + }) } setTimeout(() => { myChart1.setOption({ @@ -273,13 +275,12 @@ itemWidth: 14, itemHeight: 10, textStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, grid: { - top: "45", - left: "7%", + top: "60", + left: "5%", right: "5%", bottom: "10", containLabel: true, @@ -292,10 +293,7 @@ axisLine: { show: true, lineStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -308,8 +306,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [5, 0, 0, 0], // formatter: '{value} ml' @@ -321,10 +318,7 @@ type: "value", name: "tce", nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -335,10 +329,7 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -348,10 +339,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, }, @@ -363,7 +351,7 @@ barWidth: "16", tooltip: { valueFormatter: function (value) { - return value + "tce"; + return value + "tce" }, }, itemStyle: { @@ -383,7 +371,7 @@ barWidth: "16", tooltip: { valueFormatter: function (value) { - return value + "tce"; + return value + "tce" }, }, itemStyle: { @@ -398,29 +386,29 @@ }, }, ], - }); - }, 100); - let total = 0; - let seriesData = []; + }) + }, 100) + let total = 0 + let seriesData = [] if (!!res.data.energyProportion && res.data.energyProportion.length > 0) { res.data.energyProportion.map((item) => { seriesData.push({ name: item.energyName, value: Number(item.count).toFixed(2), - }); - }); + }) + }) seriesData.forEach(function (val) { - total += Number(val.value); - }); + total += Number(val.value) + }) } else { listEnergyTypeList().then((resEnergyTypeList) => { resEnergyTypeList.data.map((item) => { seriesData.push({ name: item.enername, value: Number(0), - }); - }); - }); + }) + }) + }) } setTimeout(() => { myChart2.setOption({ @@ -449,40 +437,30 @@ verticalAlign: "middle", rich: { name: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, value: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, rate: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, }, }, data: seriesData, formatter: (name) => { - let target, percent, muid; + let target, percent, muid for (let i = 0; i < seriesData.length; i++) { if (seriesData[i].name === name) { - target = seriesData[i].value; - muid = seriesData[i].muid; - percent = - total != 0 ? ((target / total) * 100).toFixed(2) : 0; + target = seriesData[i].value + muid = seriesData[i].muid + percent = total != 0 ? ((target / total) * 100).toFixed(2) : 0 } } - return `{name|${name}(tce) }{value| ${target}} {rate| ${percent}%}`; + return `{name|${name}(tce) }{value| ${target}} {rate| ${percent}%}` }, }, series: [ @@ -500,76 +478,54 @@ data: seriesData, }, ], - }); - }, 100); + }) + }, 100) - comprehensiveList.value = !!res.data.dataList ? res.data.dataList : []; + comprehensiveList.value = !!res.data.dataList ? res.data.dataList : [] window.addEventListener( "resize", () => { - myChart1.resize(); - myChart2.resize(); + myChart1.resize() + myChart2.resize() }, { passive: true } - ); + ) } - }); + }) listYoY( proxy.addDateRange({ ...queryParams.value, }) ).then((res) => { if (!!res.data.tongbi) { - comprehensiveTable.value[0].icon = !!res.data.tongbi.ratio - ? res.data.tongbi.ratio - : 0; - comprehensiveTable.value[0].data[0].label = !!res.data.tongbi.currentTime - ? res.data.tongbi.currentTime - : 0; - comprehensiveTable.value[0].data[0].value = !!res.data.tongbi.currentValue - ? res.data.tongbi.currentValue - : 0; - comprehensiveTable.value[0].data[1].label = !!res.data.tongbi.compareTime - ? res.data.tongbi.compareTime - : 0; - comprehensiveTable.value[0].data[1].value = !!res.data.tongbi.compareValue - ? res.data.tongbi.compareValue - : 0; + comprehensiveTable.value[0].icon = !!res.data.tongbi.ratio ? res.data.tongbi.ratio : 0 + comprehensiveTable.value[0].data[0].label = !!res.data.tongbi.currentTime ? res.data.tongbi.currentTime : 0 + comprehensiveTable.value[0].data[0].value = !!res.data.tongbi.currentValue ? res.data.tongbi.currentValue : 0 + comprehensiveTable.value[0].data[1].label = !!res.data.tongbi.compareTime ? res.data.tongbi.compareTime : 0 + comprehensiveTable.value[0].data[1].value = !!res.data.tongbi.compareValue ? res.data.tongbi.compareValue : 0 } if (!!res.data.huanbi) { - comprehensiveTable.value[1].icon = !!res.data.huanbi.ratio - ? res.data.huanbi.ratio - : 0; - comprehensiveTable.value[1].data[0].label = !!res.data.huanbi.currentTime - ? res.data.huanbi.currentTime - : 0; - comprehensiveTable.value[1].data[0].value = !!res.data.huanbi.currentValue - ? res.data.huanbi.currentValue - : 0; - comprehensiveTable.value[1].data[1].label = !!res.data.huanbi.compareTime - ? res.data.huanbi.compareTime - : 0; - comprehensiveTable.value[1].data[1].value = !!res.data.huanbi.compareValue - ? res.data.huanbi.compareValue - : 0; + comprehensiveTable.value[1].icon = !!res.data.huanbi.ratio ? res.data.huanbi.ratio : 0 + comprehensiveTable.value[1].data[0].label = !!res.data.huanbi.currentTime ? res.data.huanbi.currentTime : 0 + comprehensiveTable.value[1].data[0].value = !!res.data.huanbi.currentValue ? res.data.huanbi.currentValue : 0 + comprehensiveTable.value[1].data[1].label = !!res.data.huanbi.compareTime ? res.data.huanbi.compareTime : 0 + comprehensiveTable.value[1].data[1].value = !!res.data.huanbi.compareValue ? res.data.huanbi.compareValue : 0 } - }); + }) listEnergyRanking( proxy.addDateRange({ ...queryParams.value, }) ).then((res) => { - let nodeName = []; - let energyConsumption = []; - let maxenergyConsumption = []; + let nodeName = [] + let energyConsumption = [] + let maxenergyConsumption = [] if (!!res.data) { res.data.map((item, index) => { - nodeName.push(item.nodeName); - energyConsumption.push( - !!item.energyConsumption ? item.energyConsumption : 0 - ); - maxenergyConsumption[index] = res.data[0].energyConsumption; - }); + nodeName.push(item.nodeName) + energyConsumption.push(!!item.energyConsumption ? item.energyConsumption : 0) + maxenergyConsumption[index] = res.data[0].energyConsumption + }) } setTimeout(() => { myChart3.setOption({ @@ -586,7 +542,7 @@ type: "none", }, formatter: function (params) { - return params[0].name + " : " + params[0].value; + return params[0].name + " : " + params[0].value }, }, xAxis: { @@ -599,38 +555,17 @@ inverse: true, axisLabel: { interval: 0, - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000", fontSize: 14, formatter: function (value, index) { if (index == 0) { - return ( - "{idx0|" + - (1 + index + 0) + - "}{title|" + - value + - "}" - ); + return "{idx0|" + (1 + index + 0) + "}{title|" + value + "}" } else if (index == 1) { - return ( - "{idx1|" + - (1 + index + 0) + - "}{title|" + - value + - "}" - ); + return "{idx1|" + (1 + index + 0) + "}{title|" + value + "}" } else if (index == 2) { - return ( - "{idx2|" + - (1 + index + 0) + - "}{title|" + - value + - "}" - ); + return "{idx2|" + (1 + index + 0) + "}{title|" + value + "}" } else { - return ( - "{idx|" + (1 + index + 0) + "}{title|" + value + "}" - ); + return "{idx|" + (1 + index + 0) + "}{title|" + value + "}" } }, rich: { @@ -681,8 +616,7 @@ axisLine: "none", show: true, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#000", fontSize: "12", }, data: energyConsumption, @@ -721,27 +655,27 @@ data: energyConsumption, }, ], - }); - }, 100); + }) + }, 100) window.addEventListener( "resize", () => { - myChart3.resize(); + myChart3.resize() }, { passive: true } - ); - }); + ) + }) } // 鑳借�楀姣斿垎鏋�-缁煎悎鑳借�楀垎鏋�-鎼滅储 function handleQuery() { - getList(); + getList() } // 鑳借�楀姣斿垎鏋�-缁煎悎鑳借�楀垎鏋�-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - handleTimeType(period.value[0].value); - queryParams.value.analysisType = "YOY"; - handleQuery(); + proxy.resetForm("queryRef") + handleTimeType(period.value[0].value) + queryParams.value.analysisType = "YOY" + handleQuery() } // 鑳借�楀姣斿垎鏋�-缁煎悎鑳借�楀垎鏋�-瀵煎嚭 function handleExport() { @@ -752,7 +686,7 @@ ...query.value, }, `${queryParams.value.nodeName}-缁煎悎鑳借�楃粺璁″垎鏋愯〃_${new Date().getTime()}.xlsx` - ); + ) } </script> <style scoped lang="scss"> diff --git a/zhitan-vue/src/views/energyanalysis/department/department.vue b/zhitan-vue/src/views/energyanalysis/department/department.vue index 26a605c..95ceea7 100644 --- a/zhitan-vue/src/views/energyanalysis/department/department.vue +++ b/zhitan-vue/src/views/energyanalysis/department/department.vue @@ -8,58 +8,56 @@ <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true"> <el-form-item label="鏈熼棿" prop="timeType"> - <el-select v-model="queryParams.timeType" placeholder="鏈熼棿" clearable style="width: 120px" - @change="handleTimeType"> + <el-select + v-model="queryParams.timeType" + placeholder="鏈熼棿" + clearable + style="width: 120px" + @change="handleTimeType" + > <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="鏃堕棿"> - <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR' - ? 'year' - : queryParams.timeType == 'MONTH' - ? 'month' - : 'date' - " :format="queryParams.timeType == 'YEAR' - ? 'YYYY' - : queryParams.timeType == 'MONTH' - ? 'YYYY-MM' - : 'YYYY-MM-DD' - " value-format="YYYY-MM-DD" placeholder="鏃堕棿" style="width: 100%" /> + <el-date-picker + v-model="queryParams.dataTime" + :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'" + :format=" + queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD' + " + value-format="YYYY-MM-DD" + placeholder="鏃堕棿" + style="width: 100%" + /> </el-form-item> <el-form-item label="鑳芥簮绫诲瀷" prop="energyType"> <el-select v-model="queryParams.energyType" placeholder="鑳芥簮绫诲瀷" clearable style="width: 120px"> - <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList" - :key="item.enersno" @click="handleEnergyType(item)" /> + <el-option + :label="item.enername" + :value="item.enersno" + v-for="item in energyTypeList" + :key="item.enersno" + @click="handleEnergyType(item)" + /> </el-select> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> + <!-- <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> --> </el-form-item> <el-form-item> - <el-button :type="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')"> - 鍚屾瘮 - </el-button> - <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')"> - 鐜瘮 - </el-button> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Download" @click="handleExport"> - 瀵煎嚭 - </el-button> + <el-button type="warning" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button> </el-form-item> </el-form> </div> - <div style=" - height: calc(100vh - 220px) !important; - max-height: calc(100vh - 220px) !important; - overflow-y: auto; - " v-loading="loading"> - <!-- <el-row :gutter="24"> - <el-col :span="16"> --> + <div + style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto" + v-loading="loading" + > + <el-tabs v-model="queryParams.analysisType" type="card" @tab-change="handleAnalysisType"> + <el-tab-pane label="鍚屾瘮" name="YOY"> </el-tab-pane> + <el-tab-pane label="鐜瘮" name="MOM"> </el-tab-pane> + </el-tabs> <BaseCard :title="queryParams.nodeName + '-鍘傚尯鑳借�楀垎鏋�'"> <div class="chart-box"> <div id="Chart1" /> @@ -74,30 +72,45 @@ </BaseCard> </el-col> <el-col :span="24"> --> - <BaseCard :title="queryParams.nodeName + - '-鍘傚尯鑳借�楀垎鏋愮粺璁″垎鏋愯〃-' + - queryParams.enername - "> + <BaseCard :title="queryParams.nodeName + '-鍘傚尯鑳借�楀垎鏋愮粺璁″垎鏋愯〃-' + queryParams.enername"> <div class="table-box"> <el-table :data="departmentList" show-summary> - <el-table-column label="鏈湡鏃堕棿" align="center" key="currentTime" prop="currentTime" - :show-overflow-tooltip="true" /> - <el-table-column :label="'鏈湡鑰�' + - queryParams.enername + - '(' + - queryParams.muid + - ')' - " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" /> - <el-table-column label="鍚屾湡鏃堕棿" align="center" key="compareTime" prop="compareTime" - :show-overflow-tooltip="true" /> - <el-table-column :label="'鍚屾湡鑰�' + - queryParams.enername + - '(' + - queryParams.muid + - ')' - " align="center" key="compareValue" prop="compareValue" :show-overflow-tooltip="true" /> - <el-table-column :label="(queryParams.analysisType == 'YOY' ? '鍚�' : '鐜�') + '姣�(%)' - " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" /> + <el-table-column + label="鏈湡鏃堕棿" + align="center" + key="currentTime" + prop="currentTime" + :show-overflow-tooltip="true" + /> + <el-table-column + :label="'鏈湡鑰�' + queryParams.enername + '(' + queryParams.muid + ')'" + align="center" + key="currentValue" + prop="currentValue" + :show-overflow-tooltip="true" + /> + <el-table-column + label="鍚屾湡鏃堕棿" + align="center" + key="compareTime" + prop="compareTime" + :show-overflow-tooltip="true" + /> + <el-table-column + :label="'鍚屾湡鑰�' + queryParams.enername + '(' + queryParams.muid + ')'" + align="center" + key="compareValue" + prop="compareValue" + :show-overflow-tooltip="true" + /> + <el-table-column + :label="(queryParams.analysisType == 'YOY' ? '鍚�' : '鐜�') + '姣�(%)'" + align="center" + key="ratio" + prop="ratio" + :show-overflow-tooltip="true" + width="200" + /> </el-table> </div> </BaseCard> @@ -110,26 +123,23 @@ </template> <script setup name="department"> -import { - listRegion, - listDepartment, -} from "@/api/energyAnalysis/energyAnalysis"; -import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"; -import * as echarts from "echarts"; -const { proxy } = getCurrentInstance(); -const { period } = proxy.useDict("period"); -import { useRoute } from "vue-router"; -import useSettingsStore from "@/store/modules/settings"; -const settingsStore = useSettingsStore(); +import { listRegion, listDepartment } from "@/api/energyAnalysis/energyAnalysis" +import { listEnergyTypeList } from "@/api/modelConfiguration/energyType" +import * as echarts from "echarts" +const { proxy } = getCurrentInstance() +const { period } = proxy.useDict("period") +import { useRoute } from "vue-router" +import useSettingsStore from "@/store/modules/settings" +const settingsStore = useSettingsStore() watch( () => settingsStore.sideTheme, (val) => { - getList(); + getList() } -); -const energyTypeList = ref(undefined); -const departmentList = ref([]); -const loading = ref(false); +) +const energyTypeList = ref(undefined) +const departmentList = ref([]) +const loading = ref(false) const data = reactive({ queryParams: { nodeId: null, @@ -141,45 +151,45 @@ query: { modelCode: null, }, -}); -const { queryParams, query } = toRefs(data); +}) +const { queryParams, query } = toRefs(data) /** 鑺傜偣鍗曞嚮浜嬩欢 */ function handleNodeClick(data) { - queryParams.value.nodeId = data.id; - queryParams.value.nodeName = data.label; - handleTimeType(period.value[0].value); + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label + handleTimeType(period.value[0].value) listEnergyTypeList().then((res) => { - energyTypeList.value = res.data; - queryParams.value.energyType = energyTypeList.value[0].enersno; - queryParams.value.enername = energyTypeList.value[0].enername; - queryParams.value.muid = energyTypeList.value[0].muid; - handleQuery(); - }); + energyTypeList.value = res.data + queryParams.value.energyType = energyTypeList.value[0].enersno + queryParams.value.enername = energyTypeList.value[0].enername + queryParams.value.muid = energyTypeList.value[0].muid + handleQuery() + }) } function handleTimeType(e) { - queryParams.value.timeType = e; - queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD"); + queryParams.value.timeType = e + queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD") } function handleEnergyType(item) { - queryParams.value.enername = item.enername; - queryParams.value.muid = item.muid; - handleQuery(); + queryParams.value.enername = item.enername + queryParams.value.muid = item.muid + handleQuery() } function handleAnalysisType(analysisType) { - queryParams.value.analysisType = analysisType; - getList(); + queryParams.value.analysisType = analysisType + getList() } // 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-鍒楄〃 function getList() { - loading.value = true; + loading.value = true // 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛dispose鏃х殑瀹炰緥 if (echarts.getInstanceByDom(document.getElementById("Chart1"))) { - echarts.dispose(document.getElementById("Chart1")); + echarts.dispose(document.getElementById("Chart1")) } // if (echarts.getInstanceByDom(document.getElementById("Chart2"))) { // echarts.dispose(document.getElementById("Chart2")); // } - const myChart1 = echarts.init(document.getElementById("Chart1")); + const myChart1 = echarts.init(document.getElementById("Chart1")) // const myChart2 = echarts.init(document.getElementById("Chart2")); listRegion( proxy.addDateRange({ @@ -188,35 +198,31 @@ }) ).then((res) => { if (!!res.code && res.code == 200) { - loading.value = false; - let xdata = []; - let yvalue = []; - let ycompareValue = []; - let yqoq = []; + loading.value = false + let xdata = [] + let yvalue = [] + let ycompareValue = [] + let yqoq = [] if (!!res.data.chartDataList) { res.data.chartDataList.map((item) => { xdata.push( proxy .dayjs(item.xdata) .format( - queryParams.value.timeType == "YEAR" - ? "MM鏈�" - : queryParams.value.timeType == "MONTH" - ? "DD鏃�" - : "HH鏃�" + queryParams.value.timeType == "YEAR" ? "MM鏈�" : queryParams.value.timeType == "MONTH" ? "DD鏃�" : "HH鏃�" ) - ); - yvalue.push(!!item.yvalue ? item.yvalue : 0); - ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0); - yqoq.push(!!item.yqoq ? item.yqoq : 0); - }); + ) + yvalue.push(!!item.yvalue ? item.yvalue : 0) + ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0) + yqoq.push(!!item.yqoq ? item.yqoq : 0) + }) } setTimeout(() => { myChart1.setOption({ color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], grid: { - top: "45", - left: "7%", + top: "60", + left: "5%", right: "5%", bottom: "10", containLabel: true, @@ -232,8 +238,7 @@ itemWidth: 14, itemHeight: 10, textStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, xAxis: { @@ -244,10 +249,7 @@ axisLine: { show: true, lineStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -260,8 +262,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [5, 0, 0, 0], // formatter: '{value} ml' @@ -271,17 +272,9 @@ yAxis: [ { type: "value", - name: - "鑰�" + - queryParams.value.enername + - "閲�(" + - queryParams.value.muid + - ")", + name: "鑰�" + queryParams.value.enername + "閲�(" + queryParams.value.muid + ")", nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -292,10 +285,7 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -305,10 +295,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, }, @@ -317,10 +304,7 @@ name: queryParams.value.analysisType == "YOY" ? "鍚屾瘮(%)" : "鐜瘮(%)", alignTicks: true, nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -334,20 +318,14 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, splitArea: { show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, }, @@ -359,7 +337,7 @@ barWidth: "8", tooltip: { valueFormatter: function (value) { - return value + queryParams.value.muid; + return value + queryParams.value.muid }, }, itemStyle: { @@ -379,7 +357,7 @@ barWidth: "8", tooltip: { valueFormatter: function (value) { - return value + queryParams.value.muid; + return value + queryParams.value.muid }, }, itemStyle: { @@ -400,24 +378,24 @@ symbol: "none", // 璁剧疆涓� 'none' 鍘绘帀鍦嗙偣 tooltip: { valueFormatter: function (value) { - return value + "%"; + return value + "%" }, }, data: yqoq, }, ], - }); - }, 100); - departmentList.value = !!res.data.dataList ? res.data.dataList : []; + }) + }, 100) + departmentList.value = !!res.data.dataList ? res.data.dataList : [] window.addEventListener( "resize", () => { - myChart1.resize(); + myChart1.resize() }, { passive: true } - ); + ) } - }); + }) // listDepartment( // proxy.addDateRange({ // ...queryParams.value, @@ -566,17 +544,17 @@ } // 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-鎼滅储 function handleQuery() { - getList(); + getList() } // 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - handleTimeType(period.value[0].value); - queryParams.value.energyType = energyTypeList.value[0].enersno; - queryParams.value.enername = energyTypeList.value[0].enername; - queryParams.value.muid = energyTypeList.value[0].muid; - queryParams.value.analysisType = "YOY"; - handleQuery(); + proxy.resetForm("queryRef") + handleTimeType(period.value[0].value) + queryParams.value.energyType = energyTypeList.value[0].enersno + queryParams.value.enername = energyTypeList.value[0].enername + queryParams.value.muid = energyTypeList.value[0].muid + queryParams.value.analysisType = "YOY" + handleQuery() } // 鑳借�楀姣斿垎鏋�-绉戝鑳借�楀垎鏋�-瀵煎嚭 function handleExport() { @@ -587,9 +565,16 @@ ...query.value, }, `${queryParams.value.nodeName}-鍘傚尯鑳借�楀垎鏋恄${new Date().getTime()}.xlsx` - ); + ) } </script> <style scoped lang="scss"> @import "@/assets/styles/page.scss"; +.el-tabs { + padding: 0 12px; + margin-top: 12px; + :deep(.el-tabs__header) { + margin: 0; + } +} </style> diff --git a/zhitan-vue/src/views/energyanalysis/equipment/equipment.vue b/zhitan-vue/src/views/energyanalysis/equipment/equipment.vue index a829067..c0c200e 100644 --- a/zhitan-vue/src/views/energyanalysis/equipment/equipment.vue +++ b/zhitan-vue/src/views/energyanalysis/equipment/equipment.vue @@ -8,97 +8,101 @@ <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true"> <el-form-item label="鏈熼棿" prop="timeType"> - <el-select v-model="queryParams.timeType" placeholder="鏈熼棿" clearable style="width: 120px" - @change="handleTimeType"> + <el-select + v-model="queryParams.timeType" + placeholder="鏈熼棿" + clearable + style="width: 120px" + @change="handleTimeType" + > <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="鏃堕棿"> - <el-date-picker v-model="queryParams.dataTime" :type="queryParams.timeType == 'YEAR' - ? 'year' - : queryParams.timeType == 'MONTH' - ? 'month' - : 'date' - " :format="queryParams.timeType == 'YEAR' - ? 'YYYY' - : queryParams.timeType == 'MONTH' - ? 'YYYY-MM' - : 'YYYY-MM-DD' - " value-format="YYYY-MM-DD" placeholder="鏃堕棿" style="width: 100%" /> + <el-date-picker + v-model="queryParams.dataTime" + :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'" + :format=" + queryParams.timeType == 'YEAR' ? 'YYYY' : queryParams.timeType == 'MONTH' ? 'YYYY-MM' : 'YYYY-MM-DD' + " + value-format="YYYY-MM-DD" + placeholder="鏃堕棿" + style="width: 100%" + /> </el-form-item> <el-form-item label="鑳芥簮绫诲瀷" prop="timeType"> <el-select v-model="queryParams.energyType" placeholder="鑳芥簮绫诲瀷" clearable style="width: 120px"> - <el-option :label="item.enername" :value="item.enersno" v-for="item in energyTypeList" - :key="item.enersno" @click="handleEnergyType(item)" /> + <el-option + :label="item.enername" + :value="item.enersno" + v-for="item in energyTypeList" + :key="item.enersno" + @click="handleEnergyType(item)" + /> </el-select> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> + <!-- <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> --> </el-form-item> <el-form-item> - <el-button :type="queryParams.analysisType == 'YOY' ? 'primary' : ''" @click="handleAnalysisType('YOY')"> - 鍚屾瘮 - </el-button> - <el-button :type="queryParams.analysisType == 'MOM' ? 'primary' : ''" @click="handleAnalysisType('MOM')"> - 鐜瘮 - </el-button> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Download" @click="handleExport"> - 瀵煎嚭 - </el-button> + <el-button type="warning" icon="Download" @click="handleExport"> 瀵煎嚭 </el-button> </el-form-item> </el-form> </div> - <div style=" - height: calc(100vh - 220px) !important; - max-height: calc(100vh - 220px) !important; - overflow-y: auto; - " v-loading="loading"> - <!-- <el-row :gutter="24"> - <el-col :span="16"> --> + <div + style="height: calc(100vh - 220px) !important; max-height: calc(100vh - 220px) !important; overflow-y: auto" + v-loading="loading" + > + <el-tabs v-model="queryParams.analysisType" type="card" @tab-change="handleAnalysisType"> + <el-tab-pane label="鍚屾瘮" name="YOY"> </el-tab-pane> + <el-tab-pane label="鐜瘮" name="MOM"> </el-tab-pane> + </el-tabs> <BaseCard :title="queryParams.nodeName + '-璁惧鑳借�楄秼鍔�'"> - <div class="chart-box"> + <div class="chart-box" style="padding: 12px 0 0"> <div id="Chart1" /> </div> </BaseCard> - <!-- </el-col> - <el-col :span="8"> - <BaseCard title="璁惧鑳借�楄秼鍔�"> - <div class="chart-box"> - <div id="Chart2" /> - </div> - </BaseCard> - </el-col> - <el-col :span="24"> --> - <BaseCard :title="queryParams.nodeName + - '-璁惧鑳借�楃粺璁″垎鏋愯〃-' + - queryParams.enername - "> + <BaseCard :title="queryParams.nodeName + '-璁惧鑳借�楃粺璁″垎鏋愯〃-' + queryParams.enername"> <div class="table-box"> <el-table :data="departmentList" show-summary> - <el-table-column label="鏈湡鏃堕棿" align="center" key="currentTime" prop="currentTime" - :show-overflow-tooltip="true" /> - <el-table-column :label="'鏈湡鑰�' + - queryParams.enername + - '(' + - queryParams.muid + - ')' - " align="center" key="currentValue" prop="currentValue" :show-overflow-tooltip="true" /> - <el-table-column label="鍚屾湡鏃堕棿" align="center" key="compareTime" prop="compareTime" - :show-overflow-tooltip="true" /> - <el-table-column :label="'鍚屾湡鑰�' + - queryParams.enername + - '(' + - queryParams.muid + - ')' - " align="center" key="compareValue" prop="compareValue" :show-overflow-tooltip="true" /> - <el-table-column :label="(queryParams.analysisType == 'YOY' ? '鍚�' : '鐜�') + '姣�(%)' - " align="center" key="ratio" prop="ratio" :show-overflow-tooltip="true" width="200" /> + <el-table-column + label="鏈湡鏃堕棿" + align="center" + key="currentTime" + prop="currentTime" + :show-overflow-tooltip="true" + /> + <el-table-column + :label="'鏈湡鑰�' + queryParams.enername + '(' + queryParams.muid + ')'" + align="center" + key="currentValue" + prop="currentValue" + :show-overflow-tooltip="true" + /> + <el-table-column + label="鍚屾湡鏃堕棿" + align="center" + key="compareTime" + prop="compareTime" + :show-overflow-tooltip="true" + /> + <el-table-column + :label="'鍚屾湡鑰�' + queryParams.enername + '(' + queryParams.muid + ')'" + align="center" + key="compareValue" + prop="compareValue" + :show-overflow-tooltip="true" + /> + <el-table-column + :label="(queryParams.analysisType == 'YOY' ? '鍚�' : '鐜�') + '姣�(%)'" + align="center" + key="ratio" + prop="ratio" + :show-overflow-tooltip="true" + width="200" + /> </el-table> </div> </BaseCard> @@ -111,26 +115,23 @@ </template> <script setup name="equipment"> -import { - listRegion, - listDepartment, -} from "@/api/energyAnalysis/energyAnalysis"; -import { listEnergyTypeList } from "@/api/modelConfiguration/energyType"; -import * as echarts from "echarts"; -const { proxy } = getCurrentInstance(); -const { period } = proxy.useDict("period"); -import { useRoute } from "vue-router"; -import useSettingsStore from "@/store/modules/settings"; -const settingsStore = useSettingsStore(); +import { listRegion, listDepartment } from "@/api/energyAnalysis/energyAnalysis" +import { listEnergyTypeList } from "@/api/modelConfiguration/energyType" +import * as echarts from "echarts" +const { proxy } = getCurrentInstance() +const { period } = proxy.useDict("period") +import { useRoute } from "vue-router" +import useSettingsStore from "@/store/modules/settings" +const settingsStore = useSettingsStore() watch( () => settingsStore.sideTheme, (val) => { - getList(); + getList() } -); -const energyTypeList = ref(undefined); -const departmentList = ref([]); -const loading = ref(false); +) +const energyTypeList = ref(undefined) +const departmentList = ref([]) +const loading = ref(false) const data = reactive({ queryParams: { nodeId: null, @@ -142,45 +143,45 @@ query: { modelCode: null, }, -}); -const { queryParams, query } = toRefs(data); +}) +const { queryParams, query } = toRefs(data) /** 鑺傜偣鍗曞嚮浜嬩欢 */ function handleNodeClick(data) { - queryParams.value.nodeId = data.id; - queryParams.value.nodeName = data.label; - handleTimeType(period.value[0].value); + queryParams.value.nodeId = data.id + queryParams.value.nodeName = data.label + handleTimeType(period.value[0].value || "DAY") listEnergyTypeList().then((res) => { - energyTypeList.value = res.data; - queryParams.value.energyType = energyTypeList.value[0].enersno; - queryParams.value.enername = energyTypeList.value[0].enername; - queryParams.value.muid = energyTypeList.value[0].muid; - handleQuery(); - }); + energyTypeList.value = res.data + queryParams.value.energyType = energyTypeList.value[0].enersno + queryParams.value.enername = energyTypeList.value[0].enername + queryParams.value.muid = energyTypeList.value[0].muid + handleQuery() + }) } function handleTimeType(e) { - queryParams.value.timeType = e; - queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD"); + queryParams.value.timeType = e + queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD") } function handleEnergyType(item) { - queryParams.value.enername = item.enername; - queryParams.value.muid = item.muid; - handleQuery(); + queryParams.value.enername = item.enername + queryParams.value.muid = item.muid + handleQuery() } function handleAnalysisType(analysisType) { - queryParams.value.analysisType = analysisType; - getList(); + queryParams.value.analysisType = analysisType + getList() } // 鑳借�楀姣斿垎鏋�-璁惧鑳借�楀垎鏋�-鍒楄〃 function getList() { - loading.value = true; + loading.value = true // 鍦ㄥ垵濮嬪寲涔嬪墠锛屽厛dispose鏃х殑瀹炰緥 if (echarts.getInstanceByDom(document.getElementById("Chart1"))) { - echarts.dispose(document.getElementById("Chart1")); + echarts.dispose(document.getElementById("Chart1")) } // if (echarts.getInstanceByDom(document.getElementById("Chart2"))) { // echarts.dispose(document.getElementById("Chart2")); // } - const myChart1 = echarts.init(document.getElementById("Chart1")); + const myChart1 = echarts.init(document.getElementById("Chart1")) // const myChart2 = echarts.init(document.getElementById("Chart2")); listRegion( proxy.addDateRange({ @@ -189,35 +190,31 @@ }) ).then((res) => { if (!!res.code && res.code == 200) { - loading.value = false; - let xdata = []; - let yvalue = []; - let ycompareValue = []; - let yqoq = []; + loading.value = false + let xdata = [] + let yvalue = [] + let ycompareValue = [] + let yqoq = [] if (!!res.data.chartDataList) { res.data.chartDataList.map((item) => { xdata.push( proxy .dayjs(item.xdata) .format( - queryParams.value.timeType == "YEAR" - ? "MM鏈�" - : queryParams.value.timeType == "MONTH" - ? "DD鏃�" - : "HH鏃�" + queryParams.value.timeType == "YEAR" ? "MM鏈�" : queryParams.value.timeType == "MONTH" ? "DD鏃�" : "HH鏃�" ) - ); - yvalue.push(!!item.yvalue ? item.yvalue : 0); - ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0); - yqoq.push(!!item.yqoq ? item.yqoq : 0); - }); + ) + yvalue.push(!!item.yvalue ? item.yvalue : 0) + ycompareValue.push(!!item.ycompareValue ? item.ycompareValue : 0) + yqoq.push(!!item.yqoq ? item.yqoq : 0) + }) } setTimeout(() => { myChart1.setOption({ color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"], grid: { - top: "45", - left: "7%", + top: "60", + left: "5%", right: "5%", bottom: "10", containLabel: true, @@ -233,8 +230,7 @@ itemWidth: 14, itemHeight: 10, textStyle: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, xAxis: { @@ -245,10 +241,7 @@ axisLine: { show: true, lineStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -261,8 +254,7 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [5, 0, 0, 0], // formatter: '{value} ml' @@ -272,17 +264,9 @@ yAxis: [ { type: "value", - name: - "鑰�" + - queryParams.value.enername + - "閲�(" + - queryParams.value.muid + - ")", + name: "鑰�" + queryParams.value.enername + "閲�(" + queryParams.value.muid + ")", nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -293,10 +277,7 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, axisTick: { @@ -306,23 +287,16 @@ show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, }, { type: "value", - name: - queryParams.value.analysisType == "YOY" ? "鍚屾瘮(%)" : "鐜瘮(%)", + name: queryParams.value.analysisType == "YOY" ? "鍚屾瘮(%)" : "鐜瘮(%)", alignTicks: true, nameTextStyle: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, padding: [0, 0, 5, 0], }, @@ -336,20 +310,14 @@ show: true, lineStyle: { type: "dashed", - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", }, }, splitArea: { show: false, }, axisLabel: { - color: - settingsStore.sideTheme == "theme-dark" - ? "#FFFFFF" - : "#222222", + color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222", fontSize: 14, }, }, @@ -361,7 +329,7 @@ barWidth: "8", tooltip: { valueFormatter: function (value) { - return value + queryParams.value.muid; + return value + queryParams.value.muid }, }, itemStyle: { @@ -381,7 +349,7 @@ barWidth: "8", tooltip: { valueFormatter: function (value) { - return value + queryParams.value.muid; + return value + queryParams.value.muid }, }, itemStyle: { @@ -402,24 +370,24 @@ symbol: "none", // 璁剧疆涓� 'none' 鍘绘帀鍦嗙偣 tooltip: { valueFormatter: function (value) { - return value + "%"; + return value + "%" }, }, data: yqoq, }, ], - }); - }, 100); - departmentList.value = !!res.data.dataList ? res.data.dataList : []; + }) + }, 100) + departmentList.value = !!res.data.dataList ? res.data.dataList : [] window.addEventListener( "resize", () => { - myChart1.resize(); + myChart1.resize() }, { passive: true } - ); + ) } - }); + }) // listDepartment( // proxy.addDateRange({ // ...queryParams.value, @@ -568,17 +536,17 @@ } // 鑳借�楀姣斿垎鏋�-璁惧鑳借�楀垎鏋�-鎼滅储 function handleQuery() { - getList(); + getList() } // 鑳借�楀姣斿垎鏋�-璁惧鑳借�楀垎鏋�-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - handleTimeType(period.value[0].value); - queryParams.value.energyType = energyTypeList.value[0].enersno; - queryParams.value.enername = energyTypeList.value[0].enername; - queryParams.value.muid = energyTypeList.value[0].muid; - queryParams.value.analysisType = "YOY"; - handleQuery(); + proxy.resetForm("queryRef") + handleTimeType(period.value[0].value) + queryParams.value.energyType = energyTypeList.value[0].enersno + queryParams.value.enername = energyTypeList.value[0].enername + queryParams.value.muid = energyTypeList.value[0].muid + queryParams.value.analysisType = "YOY" + handleQuery() } // 鑳借�楀姣斿垎鏋�-璁惧鑳借�楀垎鏋�-瀵煎嚭 function handleExport() { @@ -589,9 +557,17 @@ ...query.value, }, `${queryParams.value.nodeName}-璁惧鑳借�楃粺璁″垎鏋愯〃-${queryParams.enername}_${new Date().getTime()}.xlsx` - ); + ) } </script> <style scoped lang="scss"> @import "@/assets/styles/page.scss"; + +.el-tabs { + padding: 0 12px; + margin-top: 12px; + :deep(.el-tabs__header) { + margin: 0; + } +} </style> diff --git a/zhitan-vue/src/views/energyconservation/policyrule/policyRule.vue b/zhitan-vue/src/views/energyconservation/policyrule/policyRule.vue index 558747a..ade43bd 100644 --- a/zhitan-vue/src/views/energyconservation/policyrule/policyRule.vue +++ b/zhitan-vue/src/views/energyconservation/policyrule/policyRule.vue @@ -14,35 +14,36 @@ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="Plus" @click="handleAdd"> 鏂板 </el-button> + </el-form-item> </el-form> </div> - <div class="table-box"> - <div class="mt20 mb20"> - <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> - <!-- <el-button type="primary" icon="Delete">鍒犻櫎</el-button> --> + <div class="table-bg-style"> + <div class="table-box"> + <el-table :data="tableData" v-loading="loading"> + <el-table-column prop="title" label="鏂囦欢鏍囬" show-overflow-tooltip align="center" /> + <el-table-column prop="typeName" label="鏂囦欢绫诲埆" show-overflow-tooltip align="center" /> + <el-table-column prop="dept" label="鍗板彂閮ㄩ棬" show-overflow-tooltip align="center" /> + <el-table-column prop="issuingTime" label="鍗板彂鏃堕棿" show-overflow-tooltip align="center" /> + <el-table-column label="鎿嶄綔" width="300" align="center"> + <template #default="scope"> + <el-button v-if="scope.row.url" link type="primary" icon="Files" @click="handleFile(scope.row.url)"> + 闄勪欢 + </el-button> + <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 淇敼 </el-button> + <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button> + </template> + </el-table-column> + </el-table> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> </div> - <el-table :data="tableData" v-loading="loading"> - <el-table-column prop="title" label="鏂囦欢鏍囬" show-overflow-tooltip align="center" /> - <el-table-column prop="typeName" label="鏂囦欢绫诲埆" show-overflow-tooltip align="center" /> - <el-table-column prop="dept" label="鍗板彂閮ㄩ棬" show-overflow-tooltip align="center" /> - <el-table-column prop="issuingTime" label="鍗板彂鏃堕棿" show-overflow-tooltip align="center" /> - <el-table-column label="鎿嶄綔" width="300" align="center"> - <template #default="scope"> - <el-button v-if="scope.row.url" link type="primary" icon="Files" @click="handleFile(scope.row.url)"> - 闄勪欢 - </el-button> - <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 淇敼 </el-button> - <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button> - </template> - </el-table-column> - </el-table> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> </div> <EditModal ref="editModalRef" @get-list="getList" /> </div> diff --git a/zhitan-vue/src/views/energyconservation/projectmanage/projectmanage/projectManage.vue b/zhitan-vue/src/views/energyconservation/projectmanage/projectmanage/projectManage.vue index 0e76221..72cb99b 100644 --- a/zhitan-vue/src/views/energyconservation/projectmanage/projectmanage/projectManage.vue +++ b/zhitan-vue/src/views/energyconservation/projectmanage/projectmanage/projectManage.vue @@ -22,40 +22,41 @@ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> + </el-form-item> </el-form> </div> - <div class="table-box"> - <div class="mt20 mb20"> - <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> - <!-- <el-button type="primary" icon="Download" @click="handleAdd"> 瀵煎嚭 </el-button> --> - </div> - <el-table :data="tableData" v-loading="loading"> - <el-table-column prop="plan" label="鎬讳綋璁″垝" show-overflow-tooltip align="center" /> - <el-table-column prop="implementationPlan" label="瀹炴柦璁″垝" show-overflow-tooltip align="center" /> - <el-table-column prop="savingAmount" label="鑺傜害閲�" show-overflow-tooltip align="center" /> - <!-- <el-table-column prop="value4" label="寮�濮嬫椂闂�" show-overflow-tooltip align="center" /> + <div class="table-bg-style"> + <div class="table-box"> + <el-table :data="tableData" v-loading="loading"> + <el-table-column prop="plan" label="鎬讳綋璁″垝" show-overflow-tooltip align="center" /> + <el-table-column prop="implementationPlan" label="瀹炴柦璁″垝" show-overflow-tooltip align="center" /> + <el-table-column prop="savingAmount" label="鑺傜害閲�" show-overflow-tooltip align="center" /> + <!-- <el-table-column prop="value4" label="寮�濮嬫椂闂�" show-overflow-tooltip align="center" /> <el-table-column prop="value5" label="缁撴潫鏃堕棿" show-overflow-tooltip align="center" /> --> - <el-table-column prop="currentWork" label="褰撳墠宸ヤ綔" show-overflow-tooltip align="center" /> - <el-table-column prop="liablePerson" label="璐熻矗浜�" show-overflow-tooltip align="center" /> - <el-table-column prop="completionTime" label="瀹屾垚鏃堕棿" show-overflow-tooltip align="center" /> - <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" show-overflow-tooltip align="center" /> - <el-table-column prop="remark" label="澶囨敞" show-overflow-tooltip align="center" /> + <el-table-column prop="currentWork" label="褰撳墠宸ヤ綔" show-overflow-tooltip align="center" /> + <el-table-column prop="liablePerson" label="璐熻矗浜�" show-overflow-tooltip align="center" /> + <el-table-column prop="completionTime" label="瀹屾垚鏃堕棿" show-overflow-tooltip align="center" /> + <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" show-overflow-tooltip align="center" /> + <el-table-column prop="remark" label="澶囨敞" show-overflow-tooltip align="center" /> - <el-table-column label="鎿嶄綔" width="300" align="center"> - <template #default="scope"> - <!-- <el-button link type="primary" icon="Files" @click=""> 闄勪欢 </el-button> --> - <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 淇敼 </el-button> - <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button> - </template> - </el-table-column> - </el-table> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> + <el-table-column label="鎿嶄綔" width="300" align="center"> + <template #default="scope"> + <!-- <el-button link type="primary" icon="Files" @click=""> 闄勪欢 </el-button> --> + <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 淇敼 </el-button> + <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button> + </template> + </el-table-column> + </el-table> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> </div> <edit-modal ref="EditModalRef" @getList="getList" /> </div> diff --git a/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue b/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue index f5f8e00..a5596cf 100644 --- a/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue +++ b/zhitan-vue/src/views/measuringinstruments/distributionroom/distributionroom.vue @@ -12,12 +12,12 @@ <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> + </el-form-item> </el-form> </div> <div class="table-bg-style"> - <div class="ml20 mb20 theme-dark-mt20"> - <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button> - </div> <div class="table-box"> <el-table v-loading="loading" :data="energyTypeList"> <el-table-column label="缂栧彿" align="center" key="code" prop="code" :show-overflow-tooltip="true" /> diff --git a/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue b/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue index c99bef1..7e7f9ec 100644 --- a/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue +++ b/zhitan-vue/src/views/measuringinstruments/maintain/maintain.vue @@ -17,12 +17,12 @@ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> + </el-form-item> </el-form> </div> <div class="table-bg-style"> - <div class="ml20 mb20 theme-dark-mt20"> - <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button> - </div> <div class="table-box"> <el-table :data="tableData" v-loading="loading"> <el-table-column prop="code" label="缂栫爜" show-overflow-tooltip align="center" /> diff --git a/zhitan-vue/src/views/modelconfiguration/businessmodel/businessModel.vue b/zhitan-vue/src/views/modelconfiguration/businessmodel/businessModel.vue index 9ae49db..9598c1d 100644 --- a/zhitan-vue/src/views/modelconfiguration/businessmodel/businessModel.vue +++ b/zhitan-vue/src/views/modelconfiguration/businessmodel/businessModel.vue @@ -1,158 +1,171 @@ <template> - <div class="page"> - <div class="page-container"> - <div class="page-container-left"> - <div class="tree page-box"> - <!-- <CardHeader class="mb20">鏁版嵁妯″瀷绠$悊</CardHeader> --> - <div class="select-box mb20"> - <el-select v-model="modelData" placeholder="璇烽�夋嫨妯″瀷" filterable @change="changeModel"> - <el-option v-for="model in modelInfoOptions" :key="model.modelCode" :label="model.modelName" - :value="model.modelCode" /> - </el-select> - <el-icon @click="handleModel"> - <Setting /> - </el-icon> - </div> - <!-- <el-input v-model="filterText" style="width: 240px" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" class="mb10" /> --> - <div class="tree-box" v-loading="treeLoading"> - <el-link icon="el-icon-plus" style="margin-top: 8px;width:100%" @click="addNode" - v-if="treeData.length === 0">娣诲姞鏍硅妭鐐� - </el-link> - <template v-else> - <el-tree ref="treeRef" :props="defaultProps" :data="treeData" node-key="id" - highlight-current :filter-node-method="filterNode" - :default-expanded-keys="treeExpandData" :expand-on-click-node="false" - @node-click="changeNode" accordion> - <template #default="{ node, data }"> - <span> - <el-tooltip v-if="node.label.length > 6" class="item" effect="dark" - :content="node.label" placement="top-end"> - <span>{{ node.label.slice(0, 6) + "..." }}</span> - </el-tooltip> - <span v-else id="b">{{ node.label }}</span> - </span> - <span class="node-opt"> - <el-link title="鏂板涓嬬骇鑺傜偣" icon="Plus" @click="() => addNode(node, data)"> - </el-link> - <el-link title="淇敼鑺傜偣" icon="EditPen" @click="() => editNode(node, data)"> - </el-link> - <el-link title="鍒犻櫎鑺傜偣" icon="Delete" @click="() => delNode(node, data)"> - </el-link> - </span> - </template> - </el-tree> - </template> - </div> - </div> - </div> - <div class="page-container-right"> - <div class="mb20 mt20 ml20 tab-box"> - <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')"> - 璁¢噺鍣ㄥ叿閰嶇疆淇℃伅 - </div> - <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')"> - 缁熻鎸囨爣 - </div> - <div class="tab-li" :class="tab == 3 ? 'is-tab' : ''" @click="handleTab('3')"> - 閲囬泦鎸囨爣 - </div> - <!-- <el-radio-group v-model="tab"> + <div class="page"> + <div class="page-container"> + <div class="page-container-left"> + <div class="tree page-box"> + <!-- <CardHeader class="mb20">鏁版嵁妯″瀷绠$悊</CardHeader> --> + <div class="select-box mb20"> + <el-select v-model="modelData" placeholder="璇烽�夋嫨妯″瀷" filterable @change="changeModel"> + <el-option + v-for="model in modelInfoOptions" + :key="model.modelCode" + :label="model.modelName" + :value="model.modelCode" + /> + </el-select> + <el-icon @click="handleModel"> + <Setting /> + </el-icon> + </div> + <!-- <el-input v-model="filterText" style="width: 240px" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" class="mb10" /> --> + <div class="tree-box" v-loading="treeLoading"> + <el-link + icon="el-icon-plus" + style="margin-top: 8px; width: 100%" + @click="addNode" + v-if="treeData.length === 0" + >娣诲姞鏍硅妭鐐� + </el-link> + <template v-else> + <el-tree + ref="treeRef" + :props="defaultProps" + :data="treeData" + node-key="id" + highlight-current + :filter-node-method="filterNode" + :default-expanded-keys="treeExpandData" + :expand-on-click-node="false" + @node-click="changeNode" + accordion + > + <template #default="{ node, data }"> + <span> + <el-tooltip + v-if="node.label.length > 6" + class="item" + effect="dark" + :content="node.label" + placement="top-end" + > + <span>{{ node.label.slice(0, 6) + "..." }}</span> + </el-tooltip> + <span v-else id="b">{{ node.label }}</span> + </span> + <span class="node-opt"> + <el-link title="鏂板涓嬬骇鑺傜偣" icon="Plus" @click="() => addNode(node, data)"> </el-link> + <el-link title="淇敼鑺傜偣" icon="EditPen" @click="() => editNode(node, data)"> </el-link> + <el-link title="鍒犻櫎鑺傜偣" icon="Delete" @click="() => delNode(node, data)"> </el-link> + </span> + </template> + </el-tree> + </template> + </div> + </div> + </div> + <div class="page-container-right"> + <div class="tab-box"> + <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">璁¢噺鍣ㄥ叿閰嶇疆淇℃伅</div> + <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">缁熻鎸囨爣</div> + <div class="tab-li" :class="tab == 3 ? 'is-tab' : ''" @click="handleTab('3')">閲囬泦鎸囨爣</div> + <!-- <el-radio-group v-model="tab"> <el-radio-button label="1" @click="handleTab('1')"> 璁惧閰嶇疆</el-radio-button> <el-radio-button label="2" @click="handleTab('2')"> 閲囬泦鎸囨爣</el-radio-button> </el-radio-group>--> - </div> - <BaseCard :title="currentNode ? currentNode.label + '--鑺傜偣閰嶇疆' : '鏆傛棤鑺傜偣閰嶇疆'"> - <div> - <div class="content-box" v-if="tab == '1'"> - <deviceConfig ref='deviceConfigRef' /> - </div> - <div class="content-box" v-if="tab == '2'"> - <statisticalIndicators ref='statisticalIndicatorsRef' /> - </div> - <div class="content-box" v-if="tab == '3'"> - <collectIndicators ref='collectIndicatorsRef' /> - </div> - </div> - </BaseCard> - </div> </div> - - <treeNodeModal ref="treeNodeModalRef" @getList="getTreeList" :modelCode="modelData" - @addTreeList="addTreeList" @addTreeSelectList="addTreeSelectList" /> - <modelManagementModal ref="modelManagementModalRef" @selectTreeFun="searchList" /> - + <BaseCard :title="currentNode ? currentNode.label + '--鑺傜偣閰嶇疆' : '鏆傛棤鑺傜偣閰嶇疆'"> + <div> + <div class="content-box" v-if="tab == '1'"> + <deviceConfig ref="deviceConfigRef" /> + </div> + <div class="content-box" v-if="tab == '2'"> + <statisticalIndicators ref="statisticalIndicatorsRef" /> + </div> + <div class="content-box" v-if="tab == '3'"> + <collectIndicators ref="collectIndicatorsRef" /> + </div> + </div> + </BaseCard> + </div> </div> + + <treeNodeModal + ref="treeNodeModalRef" + @getList="getTreeList" + :modelCode="modelData" + @addTreeList="addTreeList" + @addTreeSelectList="addTreeSelectList" + /> + <modelManagementModal ref="modelManagementModalRef" @selectTreeFun="searchList" /> + </div> </template> <script setup> -import treeNodeModal from './components/TreeNodeModal.vue' -import modelManagementModal from './components/modelManagement/modelManagement' -import { listModel } from '@/api/modelConfiguration/businessModel' -import { treeList, delModelNode, hasEnergyIndex, } from '@/api/modelConfiguration/indexWarehouse' -import deviceConfig from './components/deviceConfig/DeviceConfig.vue' -import collectIndicators from './components/collectIndicators/CollectIndicators.vue' -import statisticalIndicators from './components/statisticalIndicators/statisticalIndicators.vue' -import { nextTick } from 'vue'; +import treeNodeModal from "./components/TreeNodeModal.vue" +import modelManagementModal from "./components/modelManagement/modelManagement" +import { listModel } from "@/api/modelConfiguration/businessModel" +import { treeList, delModelNode, hasEnergyIndex } from "@/api/modelConfiguration/indexWarehouse" +import deviceConfig from "./components/deviceConfig/DeviceConfig.vue" +import collectIndicators from "./components/collectIndicators/CollectIndicators.vue" +import statisticalIndicators from "./components/statisticalIndicators/statisticalIndicators.vue" +import { nextTick } from "vue" let { proxy } = getCurrentInstance() let modelManagementModalRef = ref(null) let treeLoading = ref(true) //妯″瀷绠$悊 function handleModel() { - if (modelManagementModalRef.value) { - modelManagementModalRef.value.handleOpen() - } + if (modelManagementModalRef.value) { + modelManagementModalRef.value.handleOpen() + } } let modelData = ref(null) let modelInfoOptions = ref([]) //涓嬫媺鍒楄〃 //鑾峰彇涓嬫媺鍒楄〃 function searchList(flag) { - listModel({ isShow: 1 }).then(response => { - modelInfoOptions.value = response.data; - if (flag) { - if (modelInfoOptions.value.length > 0) { - modelData.value = modelInfoOptions.value[0].modelCode; - getTreeList(modelData.value) - } - } - }); + listModel({ isShow: 1 }).then((response) => { + modelInfoOptions.value = response.data + if (flag) { + if (modelInfoOptions.value.length > 0) { + modelData.value = modelInfoOptions.value[0].modelCode + getTreeList(modelData.value) + } + } + }) } searchList(true) - //涓嬫媺閫変腑瑙﹀彂鏍戝垪琛� function changeModel(item) { - // console.log('changeModel', item) - getTreeList(item) + // console.log('changeModel', item) + getTreeList(item) } let treeRef = ref(null) let treeData = ref([]) const defaultProps = ref({ - children: 'children', - label: 'label', + children: "children", + label: "label", }) //妫�绱㈡爲 -let filterText = ref('') +let filterText = ref("") const filterNode = (value, data) => { - if (!value) return true - return data.label.includes(value) + if (!value) return true + return data.label.includes(value) } watch(filterText, (val) => { - // 妫�鏌reeRef.value鏄惁鏄竴涓湁鏁堢殑ElTree瀹炰緥 - if (treeRef.value && typeof treeRef.value.filter === 'function') { - // 璋冪敤filter鏂规硶 - treeRef.value.filter(val); - } else { - // treeRef.value鏃犳晥锛屽鐞嗛敊璇� - console.error('error'); - } -}); - - + // 妫�鏌reeRef.value鏄惁鏄竴涓湁鏁堢殑ElTree瀹炰緥 + if (treeRef.value && typeof treeRef.value.filter === "function") { + // 璋冪敤filter鏂规硶 + treeRef.value.filter(val) + } else { + // treeRef.value鏃犳晥锛屽鐞嗛敊璇� + console.error("error") + } +}) let currentNode = ref(null) let treeExpandData = ref([]) @@ -163,156 +176,153 @@ //鑾峰彇鏍戝垪琛� function getTreeList(modelCode) { - treeLoading.value = true - treeList({ modelCode }).then(res => { - treeLoading.value = false - let { data } = res - treeData.value = data; - let chooseNode = null; - if (data.length > 0) { - if (data[0].children && data[0].children.length !== 0 && isFirstLeafNode.value) { - if (data[0].children[0].children && data[0].children[0].children.length !== 0) { - chooseNode = data[0].children[0].children[0]; - } else { - chooseNode = data[0].children[0]; - } - } else { - chooseNode = data[0]; - } - currentNode.value = chooseNode; - treeExpandData.value.push(chooseNode.id); - nextTick(() => { - treeRef.value.setCurrentKey(chooseNode.id); - if (tab.value == 1 && deviceConfigRef.value) { - deviceConfigRef.value.getList(chooseNode) - } - if (tab.value == 2 && statisticalIndicatorsRef.value) { - statisticalIndicatorsRef.value.getList(chooseNode) - } - if (tab.value == 3 && collectIndicatorsRef.value) { - collectIndicatorsRef.value.getList(chooseNode) - } - }); + treeLoading.value = true + treeList({ modelCode }).then((res) => { + treeLoading.value = false + let { data } = res + treeData.value = data + let chooseNode = null + if (data.length > 0) { + if (data[0].children && data[0].children.length !== 0 && isFirstLeafNode.value) { + if (data[0].children[0].children && data[0].children[0].children.length !== 0) { + chooseNode = data[0].children[0].children[0] + } else { + chooseNode = data[0].children[0] } - }) + } else { + chooseNode = data[0] + } + currentNode.value = chooseNode + treeExpandData.value.push(chooseNode.id) + nextTick(() => { + treeRef.value.setCurrentKey(chooseNode.id) + if (tab.value == 1 && deviceConfigRef.value) { + deviceConfigRef.value.getList(chooseNode) + } + if (tab.value == 2 && statisticalIndicatorsRef.value) { + statisticalIndicatorsRef.value.getList(chooseNode) + } + if (tab.value == 3 && collectIndicatorsRef.value) { + collectIndicatorsRef.value.getList(chooseNode) + } + }) + } + }) } //鏂板鍚庢洿鏂版爲鍒楄〃 function addTreeList(newChild) { - treeData.value.push(newChild) + treeData.value.push(newChild) } //鏂板鎴愬姛鍚庢洿鏂伴粯璁ら�変腑,骞惰Е鍙戞柟娉� function addTreeSelectList(addedNode, newChild) { - treeExpandData.value.push(addedNode.nodeId) - nextTick(() => { - treeRef.value.setCurrentNode(newChild) - currentNode.value = newChild; - if (tab.value == 1) { - if (deviceConfigRef.value) { - deviceConfigRef.value.getList(newChild) - } - } - if (tab.value == 2) { - if (statisticalIndicatorsRef.value) { - statisticalIndicatorsRef.value.getList(newChild) - } - } - if (tab.value == 3) { - - if (collectIndicatorsRef.value) { - collectIndicatorsRef.value.getList(newChild) - } - } - }) - + treeExpandData.value.push(addedNode.nodeId) + nextTick(() => { + treeRef.value.setCurrentNode(newChild) + currentNode.value = newChild + if (tab.value == 1) { + if (deviceConfigRef.value) { + deviceConfigRef.value.getList(newChild) + } + } + if (tab.value == 2) { + if (statisticalIndicatorsRef.value) { + statisticalIndicatorsRef.value.getList(newChild) + } + } + if (tab.value == 3) { + if (collectIndicatorsRef.value) { + collectIndicatorsRef.value.getList(newChild) + } + } + }) } //鏍戠偣鍑� function changeNode(data, node, ev) { - console.log('鏍戠偣鍑�', data) - currentNode.value = data; - if (tab.value == 1) { - if (deviceConfigRef.value) { - deviceConfigRef.value.getList(data) - } + console.log("鏍戠偣鍑�", data) + currentNode.value = data + if (tab.value == 1) { + if (deviceConfigRef.value) { + deviceConfigRef.value.getList(data) } - if (tab.value == 2) { - if (statisticalIndicatorsRef.value) { - statisticalIndicatorsRef.value.getList(data) - } + } + if (tab.value == 2) { + if (statisticalIndicatorsRef.value) { + statisticalIndicatorsRef.value.getList(data) } - if (tab.value == 3) { - if (collectIndicatorsRef.value) { - collectIndicatorsRef.value.getList(data) - } + } + if (tab.value == 3) { + if (collectIndicatorsRef.value) { + collectIndicatorsRef.value.getList(data) } + } } let treeNodeModalRef = ref(null) function addNode(node, data) { - if (treeNodeModalRef.value) { - console.log('treeNodeModalRef', node, data) - treeNodeModalRef.value.handleOpen(node, data, true) - } + if (treeNodeModalRef.value) { + console.log("treeNodeModalRef", node, data) + treeNodeModalRef.value.handleOpen(node, data, true) + } } function editNode(node, data) { - if (treeNodeModalRef.value) { - treeNodeModalRef.value.handleOpen(node, data, false) - } + if (treeNodeModalRef.value) { + treeNodeModalRef.value.handleOpen(node, data, false) + } } function delNode(node, data) { - if (data.children && data.children.length > 0) { - proxy.$modal.msgWarning('鍖呭惈瀛愯妭鐐癸紝涓嶈兘杩涜鍒犻櫎锛�') - return + if (data.children && data.children.length > 0) { + proxy.$modal.msgWarning("鍖呭惈瀛愯妭鐐癸紝涓嶈兘杩涜鍒犻櫎锛�") + return + } + + hasEnergyIndex(data.id).then((response) => { + if (response.data) { + proxy.$modal.msgWarning("褰撳墠鑺傜偣涓嬪瓨鍦ㄦ寚鏍囷紝涓嶈兘杩涜鍒犻櫎锛�") + } else { + proxy.$modal + .confirm('鏄惁纭鍒犻櫎鍚嶄负"' + data.label + '"鐨勮妭鐐�?', "璀﹀憡", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + }) + .then(function () { + return delModelNode(data.id) + }) + .then(() => { + let parent = node.parent + let children = parent.data.children || parent.data + let index = children.findIndex((d) => d.id === data.id) + children.splice(index, 1) + + nextTick(() => { + if (parent.data && parent.data.id) { + changeNode(parent.data) + } else { + changeNode(null) + } + }) + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(function () {}) } - - hasEnergyIndex(data.id).then(response => { - if (response.data) { - proxy.$modal.msgWarning('褰撳墠鑺傜偣涓嬪瓨鍦ㄦ寚鏍囷紝涓嶈兘杩涜鍒犻櫎锛�') - } else { - proxy.$modal.confirm('鏄惁纭鍒犻櫎鍚嶄负"' + data.label + '"鐨勮妭鐐�?', '璀﹀憡', { - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - type: 'warning' - }) - .then(function () { - return delModelNode(data.id) - }) - .then(() => { - let parent = node.parent - let children = parent.data.children || parent.data - let index = children.findIndex(d => d.id === data.id) - children.splice(index, 1) - - nextTick(() => { - if (parent.data && parent.data.id) { - changeNode(parent.data) - } else { - changeNode(null) - } - }) - proxy.$modal.msgSuccess('鍒犻櫎鎴愬姛') - }) - .catch(function () { - }) - } - }) + }) } -let tab = ref('1') +let tab = ref("1") function handleTab(value) { - tab.value = value - nextTick(() => { - if (value == 1 && deviceConfigRef.value) { - deviceConfigRef.value.getList(currentNode.value) - } - if (value == 2 && statisticalIndicatorsRef.value) { - statisticalIndicatorsRef.value.getList(currentNode.value) - } - if (value == 3 && collectIndicatorsRef.value) { - collectIndicatorsRef.value.getList(currentNode.value) - } - }); - + tab.value = value + nextTick(() => { + if (value == 1 && deviceConfigRef.value) { + deviceConfigRef.value.getList(currentNode.value) + } + if (value == 2 && statisticalIndicatorsRef.value) { + statisticalIndicatorsRef.value.getList(currentNode.value) + } + if (value == 3 && collectIndicatorsRef.value) { + collectIndicatorsRef.value.getList(currentNode.value) + } + }) } </script> @@ -320,77 +330,88 @@ @import "@/assets/styles/page.scss"; .page-box { - height: calc(100vh - 145px); + height: calc(100vh - 145px); - .tree-box { - height: calc(100% - 70px); - overflow-y: auto !important; + .tree-box { + height: calc(100% - 70px); + overflow-y: auto !important; + } + + .select-box { + display: flex; + align-items: center; + + :deep .el-icon { + color: #fff; + margin: 0 10px 0 15px; + font-size: 20px; + // &:hover{ + // color: #3371EB; + // } } + } - .select-box { - display: flex; - align-items: center; + .node-opt { + flex: 1; + text-align: right; + margin-right: 5px; - :deep .el-icon { - color: #fff; - margin: 0 10px 0 15px; - font-size: 20px; - // &:hover{ - // color: #3371EB; - // } - } + :deep .el-icon { + color: #fff; + margin-right: 5px; } - - .node-opt { - flex: 1; - text-align: right; - margin-right: 5px; - - :deep .el-icon { - color: #fff; - margin-right: 5px; - } - } - - + } } :deep .el-tabs__nav-wrap:after { - background: transparent; + background: transparent; } :deep .el-tabs__item { - color: #fff; - font-size: 20px; - padding: 0 20px; + color: #fff; + font-size: 20px; + padding: 0 20px; - &.is-active, - &:hover { - color: #999 !important; - } + &.is-active, + &:hover { + color: #999 !important; + } } .tab-box { - display: flex; - align-items: center; + display: flex; + align-items: center; + color: #fff; + border-bottom: 1px solid #3371eb; + margin-right: 20px; + margin-left: 15px; + font-size: 15px; + + .tab-li { + cursor: pointer; + border: 1px solid #3371eb; + padding: 8px 20px; + border-radius: 5px 5px 0 0; + } + + .is-tab { + background: #3371eb; color: #fff; - border-bottom: 1px solid #3371EB; - margin-right: 20px; + } +} +.themeDark { + .tab-box { + color: #fff; + } +} - .tab-li { - cursor: pointer; - border: 1px solid #3371EB; - padding: 10px 25px; - border-radius: 5px 5px 0 0; - } - - .is-tab { - background: #3371EB; - } +.themeLight { + .tab-box { + color: #333; + } } .content-box { - height: calc(100vh - 306px) !important; - + height: calc(100vh - 306px) !important; } </style> diff --git a/zhitan-vue/src/views/modelconfiguration/calculationformula/calculationFormula.vue b/zhitan-vue/src/views/modelconfiguration/calculationformula/calculationFormula.vue index 4035a00..5488048 100644 --- a/zhitan-vue/src/views/modelconfiguration/calculationformula/calculationFormula.vue +++ b/zhitan-vue/src/views/modelconfiguration/calculationformula/calculationFormula.vue @@ -9,28 +9,33 @@ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <!-- <el-form-item style="float: right"> + <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> + </el-form-item> --> </el-form> </div> - <div class="table-box"> - <el-table :data="tableData" style="width: 100%"> - <el-table-column prop="funcName" label="鍑芥暟鍚�" show-overflow-tooltip align="center"> </el-table-column> - <el-table-column prop="funcText" label="鍑芥暟鏂囨湰" show-overflow-tooltip align="center"> </el-table-column> - <el-table-column prop="info" label="浠嬬粛" show-overflow-tooltip align="center"> </el-table-column> - <!-- <el-table-column prop="prop" label="鎿嶄綔" width="150" align="center"> + <div class="table-bg-style"> + <div class="table-box"> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="funcName" label="鍑芥暟鍚�" show-overflow-tooltip align="center"> </el-table-column> + <el-table-column prop="funcText" label="鍑芥暟鏂囨湰" show-overflow-tooltip align="center"> </el-table-column> + <el-table-column prop="info" label="浠嬬粛" show-overflow-tooltip align="center"> </el-table-column> + <!-- <el-table-column prop="prop" label="鎿嶄綔" width="150" align="center"> <template #default="scope"> <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button> </template> </el-table-column> --> - </el-table> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> + </el-table> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> </div> </div> </template> diff --git a/zhitan-vue/src/views/modelconfiguration/collectindicator/collectIndicator.vue b/zhitan-vue/src/views/modelconfiguration/collectindicator/collectIndicator.vue index 7ba4ec1..38c0dc4 100644 --- a/zhitan-vue/src/views/modelconfiguration/collectindicator/collectIndicator.vue +++ b/zhitan-vue/src/views/modelconfiguration/collectindicator/collectIndicator.vue @@ -17,37 +17,44 @@ <el-button type="primary" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> + </el-form-item> </el-form> </div> - <div class="table-box"> - <div class=" mt20 mb20"> - <el-button type="primary" icon="Plus" @click="handleDialog('add')">鏂板</el-button> + <div class="table-bg-style"> + <div class="table-box"> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="code" label="鍙傛暟缂栫爜" align="center" show-overflow-tooltip /> + <el-table-column prop="name" label="鍙傛暟鍚嶇О" align="center" show-overflow-tooltip /> + <el-table-column + prop="unit" + label="鍗曚綅" + align="center" + show-overflow-tooltip + :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unit)" + /> + <el-table-column prop="deviceType" label="璁惧绫诲瀷" align="center" show-overflow-tooltip> + <template #default="scope"> + <dict-tag :options="sys_device_type" :value="scope.row.deviceType" /> + </template> + </el-table-column> + <el-table-column fixed="right" label="鎿嶄綔" width="180" align="center" show-overflow-tooltip> + <template #default="scope"> + <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row.id)"> 淇敼 </el-button> + + <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button> + </template> + </el-table-column> + </el-table> + <pagination + v-show="pageTotal > 0" + :total="pageTotal" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> </div> - <el-table :data="tableData" style="width: 100%"> - <el-table-column prop="code" label="鍙傛暟缂栫爜" align="center" show-overflow-tooltip /> - <el-table-column prop="name" label="鍙傛暟鍚嶇О" align="center" show-overflow-tooltip /> - <el-table-column prop="unit" label="鍗曚綅" align="center" show-overflow-tooltip - :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unit)" /> - <el-table-column prop="deviceType" label="璁惧绫诲瀷" align="center" show-overflow-tooltip> - <template #default="scope"> - <dict-tag :options="sys_device_type" :value="scope.row.deviceType" /> - </template> - </el-table-column> - <el-table-column fixed="right" label="鎿嶄綔" width="180" align="center" show-overflow-tooltip> - <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row.id)"> - 淇敼 - </el-button> - - <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> - 鍒犻櫎 - </el-button> - </template> - - </el-table-column> - </el-table> - <pagination v-show="pageTotal > 0" :total="pageTotal" v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" @pagination="getList" /> </div> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500"> <el-form ref="formRef" :model="form" :rules="rules" label-width="auto"> @@ -71,9 +78,7 @@ <template #footer> <div class="dialog-footer"> <el-button @click="handleClose">鍙栨秷</el-button> - <el-button type="primary" @click="handleOk"> - 纭 - </el-button> + <el-button type="primary" @click="handleOk"> 纭 </el-button> </div> </template> </el-dialog> @@ -81,14 +86,18 @@ </template> <script setup name="collect"> -import { listTemplate, addTemplate, getTempById, putTemplate, delTempById } from '@/api/modelConfiguration/collectIndicator.js' -import { reactive, ref } from 'vue'; -import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue' -const { proxy } = getCurrentInstance(); -const { sys_device_type } = proxy.useDict("sys_device_type"); -const { sys_unit } = proxy.useDict("sys_unit"); - - +import { + listTemplate, + addTemplate, + getTempById, + putTemplate, + delTempById, +} from "@/api/modelConfiguration/collectIndicator.js" +import { reactive, ref } from "vue" +import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue" +const { proxy } = getCurrentInstance() +const { sys_device_type } = proxy.useDict("sys_device_type") +const { sys_unit } = proxy.useDict("sys_unit") let queryParams = ref({ pageNum: 1, @@ -96,16 +105,16 @@ }) let pageTotal = ref(0) let dialogVisible = ref(false) -let dialogTitle = ref('') +let dialogTitle = ref("") let queryForm = ref({}) let form = ref({}) let tableData = ref([]) const rules = { - code: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' },], - name: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' },], - unit: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' },], - deviceType: [{ required: true, message: '璇烽�夋嫨', trigger: 'change' },], + code: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + name: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }], + unit: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], + deviceType: [{ required: true, message: "璇烽�夋嫨", trigger: "change" }], } function handleQuery() { @@ -113,14 +122,13 @@ getList() } - function resetQuery() { queryForm.value = {} queryParams.value.pageNum = 1 getList() } function handleEdit(id) { - getTempById({ id }).then(res => { + getTempById({ id }).then((res) => { if (res.code == 200) { handleDialog() form.value = JSON.parse(JSON.stringify(res.data)) @@ -129,62 +137,62 @@ } function handleDel(row) { - proxy.$modal.confirm('鏄惁纭鍒犻櫎鎸囨爣鍚嶄负"' + row.name + '"鐨勬暟鎹」?', '璀﹀憡', { - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - type: 'warning' - }).then(() => { - return delTempById(row.id) - }).then(() => { - getList() - proxy.$modal.msgSuccess('鍒犻櫎鎴愬姛') - }).catch(function () { - }) - + proxy.$modal + .confirm('鏄惁纭鍒犻櫎鎸囨爣鍚嶄负"' + row.name + '"鐨勬暟鎹」?', "璀﹀憡", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + }) + .then(() => { + return delTempById(row.id) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(function () {}) } function getList() { let params = { ...queryParams.value, - ...queryForm.value + ...queryForm.value, } - listTemplate(params).then(res => { - tableData.value = res.rows; + listTemplate(params).then((res) => { + tableData.value = res.rows pageTotal.value = res.total - }); + }) } function handleDialog(type) { - if (type == 'add') { - dialogTitle = '鏂板閲囬泦鍙傛暟妯$増' + if (type == "add") { + dialogTitle = "鏂板閲囬泦鍙傛暟妯$増" } else { - dialogTitle = '淇敼閲囬泦鍙傛暟妯$増' + dialogTitle = "淇敼閲囬泦鍙傛暟妯$増" } dialogVisible.value = true } function handleOk() { - proxy.$refs.formRef.validate(valid => { - console.log('valid===>', valid); + proxy.$refs.formRef.validate((valid) => { + console.log("valid===>", valid) if (valid) { if (form.value.id) { - putTemplate(form.value).then(res => { + putTemplate(form.value).then((res) => { proxy.$modal.msgSuccess(res.msg) dialogVisible.value = false getList() }) } else { - addTemplate(form.value).then(res => { - console.log('res===>鏂板', res); + addTemplate(form.value).then((res) => { + console.log("res===>鏂板", res) proxy.$modal.msgSuccess(res.msg) dialogVisible.value = false getList() }) } - } }) - } function handleClose() { @@ -194,7 +202,6 @@ } getList() - </script> <style lang="scss" scoped> diff --git a/zhitan-vue/src/views/modelconfiguration/energytype/energyType.vue b/zhitan-vue/src/views/modelconfiguration/energytype/energyType.vue index 8319cfa..a13c75f 100644 --- a/zhitan-vue/src/views/modelconfiguration/energytype/energyType.vue +++ b/zhitan-vue/src/views/modelconfiguration/energytype/energyType.vue @@ -1,25 +1,12 @@ <template> <div class="page"> <div class="form-card"> - <el-form - :model="queryParams" - ref="queryRef" - :inline="true" - label-width="80px" - > + <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px"> <el-form-item label="鑳芥簮绫诲瀷"> - <el-input - v-model="queryParams.enername" - placeholder="鑳芥簮绫诲瀷" - maxlength="30" - /> + <el-input v-model="queryParams.enername" placeholder="鑳芥簮绫诲瀷" maxlength="30" /> </el-form-item> <el-form-item label="鑳芥簮鍝佺"> - <el-select - v-model="queryParams.enerclassid" - placeholder="鑳芥簮鍝佺" - style="width: 100%" - > + <el-select v-model="queryParams.enerclassid" placeholder="鑳芥簮鍝佺" style="width: 100%"> <el-option v-for="dict in energyVarietiesList" :key="dict.enerclassid" @@ -29,121 +16,77 @@ </el-select> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery" - >鎼滅储</el-button - > + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="Plus" @click="handleAdd"> 鏂板 </el-button> </el-form-item> </el-form> </div> - <div class="table-box"> - <div class="mt20 mb20"> - <el-button type="primary" icon="Plus" @click="handleAdd" - >鏂板</el-button - > + <div class="table-bg-style"> + <div class="table-box"> + <el-table v-loading="loading" :data="energyTypeList"> + <el-table-column + label="鑳芥簮绫诲瀷" + align="center" + key="enername" + prop="enername" + :show-overflow-tooltip="true" + /> + <el-table-column label="璁¢噺鍗曚綅" align="center" key="muid" prop="muid" :show-overflow-tooltip="true" /> + <el-table-column + label="鑳芥簮鍝佺" + align="center" + key="enerclassname" + prop="enerclassname" + :show-overflow-tooltip="true" + /> + <el-table-column label="鑳芥簮缂栧彿" align="center" key="enersno" prop="enersno" :show-overflow-tooltip="true" /> + <el-table-column + label="鏄惁瀛樺偍" + align="center" + key="isstorage" + prop="isstorage" + :show-overflow-tooltip="true" + /> + <el-table-column label="鍗曚环" align="center" key="price" prop="price" :show-overflow-tooltip="true" /> + <el-table-column + label="鎶樻爣绯绘暟" + align="center" + key="coefficient" + prop="coefficient" + :show-overflow-tooltip="true" + /> + <el-table-column + label="鎺掓斁鍥犲瓙" + align="center" + key="emissionFactors" + prop="emissionFactors" + :show-overflow-tooltip="true" + /> + <el-table-column label="澶囨敞" align="center" key="note" prop="note" :show-overflow-tooltip="true" /> + <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="缂栬緫" placement="top"> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 缂栬緫 </el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 鍒犻櫎 </el-button> + </el-tooltip> + </template> + </el-table-column> + </el-table> + <pagination + v-show="queryParams.total > 0" + :total="queryParams.total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> </div> - <el-table v-loading="loading" :data="energyTypeList"> - <el-table-column - label="鑳芥簮绫诲瀷" - align="center" - key="enername" - prop="enername" - :show-overflow-tooltip="true" - /> - <el-table-column - label="璁¢噺鍗曚綅" - align="center" - key="muid" - prop="muid" - :show-overflow-tooltip="true" - /> - <el-table-column - label="鑳芥簮鍝佺" - align="center" - key="enerclassname" - prop="enerclassname" - :show-overflow-tooltip="true" - /> - <el-table-column - label="鑳芥簮缂栧彿" - align="center" - key="enersno" - prop="enersno" - :show-overflow-tooltip="true" - /> - <el-table-column - label="鏄惁瀛樺偍" - align="center" - key="isstorage" - prop="isstorage" - :show-overflow-tooltip="true" - /> - <el-table-column - label="鍗曚环" - align="center" - key="price" - prop="price" - :show-overflow-tooltip="true" - /> - <el-table-column - label="鎶樻爣绯绘暟" - align="center" - key="coefficient" - prop="coefficient" - :show-overflow-tooltip="true" - /> - <el-table-column - label="鎺掓斁鍥犲瓙" - align="center" - key="emissionFactors" - prop="emissionFactors" - :show-overflow-tooltip="true" - /> - <el-table-column - label="澶囨敞" - align="center" - key="note" - prop="note" - :show-overflow-tooltip="true" - /> - <el-table-column - label="鎿嶄綔" - align="center" - width="200" - class-name="small-padding fixed-width" - > - <template #default="scope"> - <el-tooltip content="缂栬緫" placement="top"> - <el-button - link - type="primary" - icon="Edit" - @click="handleUpdate(scope.row)" - > - 缂栬緫 - </el-button> - </el-tooltip> - <el-tooltip content="鍒犻櫎" placement="top"> - <el-button - link - type="primary" - icon="Delete" - @click="handleDelete(scope.row)" - > - 鍒犻櫎 - </el-button> - </el-tooltip> - </template> - </el-table-column> - </el-table> - <pagination - v-show="queryParams.total > 0" - :total="queryParams.total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> </div> + <el-dialog :title="title" v-model="open" width="600px" append-to-body> <el-form :model="form" :rules="rules" ref="formRef" label-width="90px"> <el-row> @@ -154,12 +97,7 @@ </el-col> <el-col :span="12"> <el-form-item label="璁¢噺鍗曚綅" prop="muid"> - <el-select - v-model="form.muid" - placeholder="璇烽�夐」璁¢噺鍗曚綅" - clearable - style="width: 100%" - > + <el-select v-model="form.muid" placeholder="璇烽�夐」璁¢噺鍗曚綅" clearable style="width: 100%"> <el-option v-for="dict in sys_unit" :key="dict.value" @@ -177,11 +115,7 @@ </el-col> <el-col :span="12"> <el-form-item label="鑳芥簮鍝佺" prop="enerclassid"> - <el-select - v-model="form.enerclassid" - placeholder="璇烽�夐」鑳芥簮鍝佺" - style="width: 100%" - > + <el-select v-model="form.enerclassid" placeholder="璇烽�夐」鑳芥簮鍝佺" style="width: 100%"> <el-option v-for="dict in energyVarietiesList" :key="dict.enerclassid" @@ -193,11 +127,7 @@ </el-col> <el-col :span="12"> <el-form-item label="鏄惁瀛樺偍" prop="isstorage"> - <el-select - v-model="form.isstorage" - placeholder="璇烽�夐」鏄惁瀛樺偍" - style="width: 100%" - > + <el-select v-model="form.isstorage" placeholder="璇烽�夐」鏄惁瀛樺偍" style="width: 100%"> <el-option v-for="dict in sys_yes_no" :key="dict.value" @@ -248,11 +178,7 @@ <el-row> <el-col :span="24"> <el-form-item label="澶囨敞" prop="note"> - <el-input - v-model="form.note" - placeholder="璇疯緭鍏ュ娉�" - type="textarea" - /> + <el-input v-model="form.note" placeholder="璇疯緭鍏ュ娉�" type="textarea" /> </el-form-item> </el-col> </el-row> @@ -273,15 +199,15 @@ getEnergyType, updateEnergyType, delEnergyType, -} from "@/api/modelConfiguration/energyType"; -import { listEnergyVarietiesList } from "@/api/modelConfiguration/energyVarieties"; -const { proxy } = getCurrentInstance(); -const { sys_unit, sys_yes_no } = proxy.useDict("sys_unit", "sys_yes_no"); -const energyVarietiesList = ref([]); -const energyTypeList = ref([]); -const open = ref(false); -const loading = ref(false); -const title = ref(""); +} from "@/api/modelConfiguration/energyType" +import { listEnergyVarietiesList } from "@/api/modelConfiguration/energyVarieties" +const { proxy } = getCurrentInstance() +const { sys_unit, sys_yes_no } = proxy.useDict("sys_unit", "sys_yes_no") +const energyVarietiesList = ref([]) +const energyTypeList = ref([]) +const open = ref(false) +const loading = ref(false) +const title = ref("") const data = reactive({ form: {}, queryParams: { @@ -292,76 +218,68 @@ enerclassname: null, }, rules: { - enername: [ - { required: true, message: "鑳芥簮绫诲瀷涓嶈兘涓虹┖", trigger: "blur" }, - ], + enername: [{ required: true, message: "鑳芥簮绫诲瀷涓嶈兘涓虹┖", trigger: "blur" }], enersno: [ { required: true, message: "鑳芥簮缂栧彿涓嶈兘涓虹┖", trigger: "blur" }, { pattern: /^[a-z0-9]*$/, message: "鑳芥簮缂栧彿蹇呴』涓烘暟瀛�/灏忓啓瀛楁瘝" }, ], - enerclassid: [ - { required: true, message: "鑳芥簮鍝佺涓嶈兘涓虹┖", trigger: "blur" }, - ], - isstorage: [ - { required: true, message: "鏄惁瀛樺偍涓嶈兘涓虹┖", trigger: "blur" }, - ], + enerclassid: [{ required: true, message: "鑳芥簮鍝佺涓嶈兘涓虹┖", trigger: "blur" }], + isstorage: [{ required: true, message: "鏄惁瀛樺偍涓嶈兘涓虹┖", trigger: "blur" }], price: [{ required: true, message: "鍗曚环涓嶈兘涓虹┖", trigger: "blur" }], - coefficient: [ - { required: true, message: "鎶樻爣绯绘暟涓嶈兘涓虹┖", trigger: "blur" }, - ], + coefficient: [{ required: true, message: "鎶樻爣绯绘暟涓嶈兘涓虹┖", trigger: "blur" }], }, -}); -const { queryParams, form, rules } = toRefs(data); -getList(); -getEnergyVarietiesList(); +}) +const { queryParams, form, rules } = toRefs(data) +getList() +getEnergyVarietiesList() // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-鍒楄〃 function getList() { - loading.value = true; + loading.value = true listEnergyType(proxy.addDateRange(queryParams.value)).then((res) => { - loading.value = false; - energyTypeList.value = res.rows; - queryParams.value.total = res.total; - }); + loading.value = false + energyTypeList.value = res.rows + queryParams.value.total = res.total + }) } function getEnergyVarietiesList() { listEnergyVarietiesList().then((res) => { - energyVarietiesList.value = res.data; - }); + energyVarietiesList.value = res.data + }) } // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-鎼滅储 function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); + proxy.resetForm("queryRef") queryParams.value = { pageNum: 1, pageSize: 10, total: 0, enerclassname: null, - }; - getList(); + } + getList() } // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-鏂板 function handleAdd() { - reset(); - open.value = true; - title.value = "鏂板鑳芥簮绫诲瀷"; + reset() + open.value = true + title.value = "鏂板鑳芥簮绫诲瀷" } function handleClick(label, value) { - form.value[label] = value; - console.log(form.value, label, value); + form.value[label] = value + console.log(form.value, label, value) } // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-缂栬緫 function handleUpdate(row) { - reset(); + reset() getEnergyType(row.enerid).then((response) => { - form.value = response.data; - open.value = true; - title.value = "缂栬緫鑳芥簮绫诲瀷"; - }); + form.value = response.data + open.value = true + title.value = "缂栬緫鑳芥簮绫诲瀷" + }) } // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-鏂板/缂栬緫-淇濆瓨 function submitForm() { @@ -369,24 +287,24 @@ if (valid) { if (form.value.enerid != undefined) { updateEnergyType(form.value).then((response) => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { addEnergyType(form.value).then((response) => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-鏂板/缂栬緫-鍙栨秷 function cancel() { - open.value = false; - reset(); + open.value = false + reset() } // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-鏂板/缂栬緫-琛ㄥ崟閲嶇疆 function reset() { @@ -401,21 +319,21 @@ muidString: null, note: null, price: null, - }; - proxy.resetForm("formRef"); + } + proxy.resetForm("formRef") } // 妯″瀷閰嶇疆绠$悊-鑳芥簮绫诲瀷绠$悊-鍒犻櫎 function handleDelete(row) { proxy.$modal .confirm('鏄惁纭鍒犻櫎鑳芥簮绫诲瀷涓�"' + row.enername + '"鐨勬暟鎹」锛�') .then(function () { - return delEnergyType(row.enerid); + return delEnergyType(row.enerid) }) .then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") }) - .catch(() => {}); + .catch(() => {}) } </script> <style scoped lang="scss"> diff --git a/zhitan-vue/src/views/modelconfiguration/energyvarieties/energyVarieties.vue b/zhitan-vue/src/views/modelconfiguration/energyvarieties/energyVarieties.vue index d1ba49c..9d5e639 100644 --- a/zhitan-vue/src/views/modelconfiguration/energyvarieties/energyVarieties.vue +++ b/zhitan-vue/src/views/modelconfiguration/energyvarieties/energyVarieties.vue @@ -1,6 +1,5 @@ <template> <div class="page"> - <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="80px" @submit.prevent> <el-form-item label="鑳芥簮鍝佺"> @@ -10,36 +9,73 @@ <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button> + </el-form-item> </el-form> </div> - <div class="table-box"> - <div class="mt20 mb20"> - <el-button type="primary" icon="Plus" @click="handleAdd">鏂板</el-button> + <div class="table-bg-style"> + <div class="table-box"> + <el-table v-loading="loading" :data="energyVarietiesList"> + <el-table-column + label="鑳芥簮鍝佺" + align="center" + key="enerclassname" + prop="enerclassname" + :show-overflow-tooltip="true" + /> + <el-table-column label="澶囨敞" align="center" key="note" prop="note" :show-overflow-tooltip="true" /> + <el-table-column + label="鍒涘缓浜�" + align="center" + key="createBy" + prop="createBy" + :show-overflow-tooltip="true" + width="100" + /> + <el-table-column + label="鍒涘缓鏃堕棿" + align="center" + key="createTime" + prop="createTime" + :show-overflow-tooltip="true" + width="200" + /> + <el-table-column + label="鏇存柊浜�" + align="center" + key="updateBy" + prop="updateBy" + :show-overflow-tooltip="true" + width="100" + /> + <el-table-column + label="鏇存柊鏃堕棿" + align="center" + key="updateTime" + prop="updateTime" + :show-overflow-tooltip="true" + width="200" + /> + <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="缂栬緫" placement="top"> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 缂栬緫 </el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 鍒犻櫎 </el-button> + </el-tooltip> + </template> + </el-table-column> + </el-table> + <pagination + v-show="queryParams.total > 0" + :total="queryParams.total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> </div> - <el-table v-loading="loading" :data="energyVarietiesList"> - <el-table-column label="鑳芥簮鍝佺" align="center" key="enerclassname" prop="enerclassname" :show-overflow-tooltip="true" /> - <el-table-column label="澶囨敞" align="center" key="note" prop="note" :show-overflow-tooltip="true" /> - <el-table-column label="鍒涘缓浜�" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" width="100"/> - <el-table-column label="鍒涘缓鏃堕棿" align="center" key="createTime" prop="createTime" :show-overflow-tooltip="true" width="200"/> - <el-table-column label="鏇存柊浜�" align="center" key="updateBy" prop="updateBy" :show-overflow-tooltip="true" width="100"/> - <el-table-column label="鏇存柊鏃堕棿" align="center" key="updateTime" prop="updateTime" :show-overflow-tooltip="true" width="200"/> - <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-tooltip content="缂栬緫" placement="top"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> - 缂栬緫 - </el-button> - </el-tooltip> - <el-tooltip content="鍒犻櫎" placement="top"> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> - 鍒犻櫎 - </el-button> - </el-tooltip> - </template> - </el-table-column> - </el-table> - <pagination v-show="queryParams.total > 0" :total="queryParams.total" v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" @pagination="getList" /> </div> <el-dialog :title="title" v-model="open" width="600px" append-to-body> <el-form :model="form" :rules="rules" ref="formRef" label-width="100px"> @@ -72,12 +108,12 @@ getEnergyVarieties, updateEnergyVarieties, delEnergyVarieties, -} from "@/api/modelConfiguration/energyVarieties"; -const { proxy } = getCurrentInstance(); -const energyVarietiesList = ref([]); -const open = ref(false); -const loading = ref(false); -const title = ref(""); +} from "@/api/modelConfiguration/energyVarieties" +const { proxy } = getCurrentInstance() +const energyVarietiesList = ref([]) +const open = ref(false) +const loading = ref(false) +const title = ref("") const data = reactive({ form: {}, queryParams: { @@ -89,41 +125,39 @@ rules: { enerclassname: [{ required: true, message: "鑳芥簮鍝佺涓嶈兘涓虹┖", trigger: "blur" }], }, -}); -const { queryParams, form, rules } = toRefs(data); -getList(); +}) +const { queryParams, form, rules } = toRefs(data) +getList() // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-鍒楄〃 function getList() { - loading.value = true; - listEnergyVarieties( - proxy.addDateRange(queryParams.value) - ).then((res) => { - loading.value = false; - energyVarietiesList.value = res.rows; - queryParams.value.total = res.total; - }); + loading.value = true + listEnergyVarieties(proxy.addDateRange(queryParams.value)).then((res) => { + loading.value = false + energyVarietiesList.value = res.rows + queryParams.value.total = res.total + }) } // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-鎼滅储 function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); + proxy.resetForm("queryRef") queryParams.value = { pageNum: 1, pageSize: 10, total: 0, enerclassname: null, } - getList(); + getList() } // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-鏂板 function handleAdd() { - reset(); - open.value = true; - title.value = "鏂板鑳芥簮鍝佺绠$悊"; + reset() + open.value = true + title.value = "鏂板鑳芥簮鍝佺绠$悊" } // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-缂栬緫 // function handleUpdate(row) { @@ -133,58 +167,58 @@ // title.value = "缂栬緫鑳芥簮鍝佺绠$悊"; // } function handleUpdate(row) { - reset(); - getEnergyVarieties(row.enerclassid).then(response => { - form.value = response.data; - open.value = true; - title.value = "缂栬緫鑳芥簮鍝佺绠$悊"; - }); -}; + reset() + getEnergyVarieties(row.enerclassid).then((response) => { + form.value = response.data + open.value = true + title.value = "缂栬緫鑳芥簮鍝佺绠$悊" + }) +} // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-鏂板/缂栬緫-淇濆瓨 function submitForm() { proxy.$refs["formRef"].validate((valid) => { if (valid) { if (form.value.enerclassid != undefined) { updateEnergyVarieties(form.value).then((response) => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { addEnergyVarieties(form.value).then((response) => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-鏂板/缂栬緫-鍙栨秷 function cancel() { - open.value = false; - reset(); + open.value = false + reset() } // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-鏂板/缂栬緫-琛ㄥ崟閲嶇疆 function reset() { form.value = { - enerclassname: '', - note: '' - }; - proxy.resetForm("formRef"); + enerclassname: "", + note: "", + } + proxy.resetForm("formRef") } // 妯″瀷閰嶇疆绠$悊-鑳芥簮鍝佺璁剧疆-鍒犻櫎 function handleDelete(row) { proxy.$modal .confirm('鏄惁纭鍒犻櫎鑳芥簮鍝佺涓�"' + row.enerclassname + '"鐨勬暟鎹」锛�') .then(function () { - return delEnergyVarieties(row.enerclassid); + return delEnergyVarieties(row.enerclassid) }) .then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") }) - .catch(() => { }); + .catch(() => {}) } </script> <style scoped lang="scss"> diff --git a/zhitan-vue/src/views/modelconfiguration/indexwarehouse/components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue b/zhitan-vue/src/views/modelconfiguration/indexwarehouse/components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue index d2e49b8..94799d3 100644 --- a/zhitan-vue/src/views/modelconfiguration/indexwarehouse/components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue +++ b/zhitan-vue/src/views/modelconfiguration/indexwarehouse/components/statisticalIndicatorManagement/statisticalIndicatorManagement.vue @@ -1,101 +1,116 @@ <template> - <div class="page-box"> - <div class="form-card"> - <el-form :model="form" ref="queryRef" :inline="true" label-width="70px"> - <el-form-item label="缂栫爜" prop="indexCategory"> - <el-select v-model="form.indexCategory" placeholder="璇烽�夋嫨鎸囨爣鍒嗙被" style="width: 200px"> - <el-option v-for="dict in sys_index_category" :key="dict.value" :label="dict.label" - :value="dict.value" /> - </el-select> - </el-form-item> - <el-form-item label="鍏抽敭瀛�" prop="name"> - <el-input v-model="form.name" placeholder="璇疯緭鍏ユ寚鏍囧悕绉�/缂栫爜" /> - </el-form-item> + <div class="page-box"> + <div class="form-card"> + <el-form :model="form" ref="queryRef" :inline="true" label-width="70px"> + <el-form-item label="缂栫爜" prop="indexCategory"> + <el-select v-model="form.indexCategory" placeholder="璇烽�夋嫨鎸囨爣鍒嗙被" style="width: 200px"> + <el-option v-for="dict in sys_index_category" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鍏抽敭瀛�" prop="name"> + <el-input v-model="form.name" placeholder="璇疯緭鍏ユ寚鏍囧悕绉�/缂栫爜" /> + </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - <el-button icon="Plus" type="primary" @click="handleAdd">鏂板</el-button> - <el-button icon="Delete" :disabled="multiple" @click="handleDel">鍒犻櫎</el-button> - </el-form-item> - </el-form> - </div> - <!-- <div class="ml20 mt20 mb20"> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + <el-button icon="Plus" type="primary" @click="handleAdd">鏂板</el-button> + <el-button icon="Delete" :disabled="multiple" @click="handleDel">鍒犻櫎</el-button> + </el-form-item> + </el-form> + </div> + <!-- <div class="ml20 mt20 mb20"> <el-button icon="Plus" type="primary" @click="handleAdd">鏂板</el-button> <el-button icon="Delete" :disabled="multiple" @click="handleDel">鍒犻櫎</el-button> <el-button icon="Upload">瀵煎叆</el-button> </div> --> - <div class="table-box"> - <el-table :data="tableData" v-loading="loading" height="calc(100vh - 450px)" - @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" show-overflow-tooltip /> - <el-table-column prop="code" label="鎸囨爣缂栫爜" align="center" show-overflow-tooltip /> - <el-table-column prop="name" label="鎸囨爣鍚嶇О" align="center" show-overflow-tooltip /> - <el-table-column prop="indexCategory" label="绯荤粺鎸囨爣鍒嗙被" align="center" show-overflow-tooltip - :formatter="(row, column) => proxy.selectDictLabel(sys_index_category, row.indexCategory)" /> - <el-table-column prop="unitId" label="鍗曚綅" align="center" show-overflow-tooltip - :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unitId)" /> - <el-table-column label="鎿嶄綔" width="230" align="center"> - <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> - 淇敼 - </el-button> - <el-button link type="primary" icon="Edit" @click="handleSave(scope.row)"> - 瀛樺偍 - </el-button> - <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> - 鍒犻櫎 - </el-button> - </template> - </el-table-column> - </el-table> - </div> - <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" @pagination="getList(currentNode)" /> - <edit-modal ref="EditModalRef" :indexType="indexType" :sys_index_category='sys_index_category' - :sys_unit='sys_unit' @getList="getList(currentNode)" /> - <storageModal ref="storageModalRef" /> - - + <div class="table-box" style="margin-top: 0"> + <el-table + :data="tableData" + v-loading="loading" + height="calc(100vh - 450px)" + @selection-change="handleSelectionChange" + > + <el-table-column type="selection" width="55" align="center" show-overflow-tooltip /> + <el-table-column prop="code" label="鎸囨爣缂栫爜" align="center" show-overflow-tooltip /> + <el-table-column prop="name" label="鎸囨爣鍚嶇О" align="center" show-overflow-tooltip /> + <el-table-column + prop="indexCategory" + label="绯荤粺鎸囨爣鍒嗙被" + align="center" + show-overflow-tooltip + :formatter="(row, column) => proxy.selectDictLabel(sys_index_category, row.indexCategory)" + /> + <el-table-column + prop="unitId" + label="鍗曚綅" + align="center" + show-overflow-tooltip + :formatter="(row, column) => proxy.selectDictLabel(sys_unit, row.unitId)" + /> + <el-table-column label="鎿嶄綔" width="230" align="center"> + <template #default="scope"> + <el-button link type="primary" icon="Edit" @click="handleAdd(scope.row)"> 淇敼 </el-button> + <el-button link type="primary" icon="Edit" @click="handleSave(scope.row)"> 瀛樺偍 </el-button> + <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)"> 鍒犻櫎 </el-button> + </template> + </el-table-column> + </el-table> </div> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList(currentNode)" + /> + <edit-modal + ref="EditModalRef" + :indexType="indexType" + :sys_index_category="sys_index_category" + :sys_unit="sys_unit" + @getList="getList(currentNode)" + /> + <storageModal ref="storageModalRef" /> + </div> </template> <script setup> -import storageModal from './components/storage/StorageModal.vue'; -import EditModal from './components/EditModal.vue' -import { listEnergyindex, delEnergyindex } from '@/api/modelConfiguration/indexWarehouse' +import storageModal from "./components/storage/StorageModal.vue" +import EditModal from "./components/EditModal.vue" +import { listEnergyindex, delEnergyindex } from "@/api/modelConfiguration/indexWarehouse" const { proxy } = getCurrentInstance() -const { sys_index_category } = proxy.useDict("sys_index_category"); -const { sys_unit } = proxy.useDict("sys_unit"); +const { sys_index_category } = proxy.useDict("sys_index_category") +const { sys_unit } = proxy.useDict("sys_unit") -const props = defineProps(['indexType']) +const props = defineProps(["indexType"]) let loading = ref(false) let form = ref({ - indexCategory: null, - name: null + indexCategory: null, + name: null, }) let tableData = ref([]) -let total = ref(0); +let total = ref(0) let queryParams = ref({ - pageNum: 1, - pageSize: 10, + pageNum: 1, + pageSize: 10, }) let currentNode = ref(null) function getList(modelNode) { - currentNode.value = modelNode; + currentNode.value = modelNode - console.log(111, currentNode.value) - if (modelNode) { - loading.value = true; - form.value.nodeId = modelNode.id; - form.value.indexType = props.indexType; - listEnergyindex({ ...queryParams.value, ...form.value }).then(response => { - tableData.value = response.rows; - total.value = response.total; - loading.value = false; - }); - } else { - tableData.value = []; - } + console.log(111, currentNode.value) + if (modelNode) { + loading.value = true + form.value.nodeId = modelNode.id + form.value.indexType = props.indexType + listEnergyindex({ ...queryParams.value, ...form.value }).then((response) => { + tableData.value = response.rows + total.value = response.total + loading.value = false + }) + } else { + tableData.value = [] + } } // // 鍥炴樉鏁版嵁瀛楀吀 @@ -116,51 +131,54 @@ // 闈炲涓鐢� let multiple = ref(true) function handleSelectionChange(selection) { - ids.value = selection.map(item => item.indexId); - names.value = selection.map(item => item.name); - multiple.value = !selection.length + ids.value = selection.map((item) => item.indexId) + names.value = selection.map((item) => item.name) + multiple.value = !selection.length } function handleQuery() { - getList(currentNode.value) + getList(currentNode.value) } function resetQuery() { - form.value = { - indexCategory: null, - name: null - } - getList(currentNode.value) + form.value = { + indexCategory: null, + name: null, + } + getList(currentNode.value) } -let EditModalRef = ref('') +let EditModalRef = ref("") function handleAdd(row) { - if (EditModalRef.value) { - EditModalRef.value.handleOpen(row, currentNode.value) - } + if (EditModalRef.value) { + EditModalRef.value.handleOpen(row, currentNode.value) + } } function handleDel(row) { - const indexIds = row.indexId || ids.value - const indexNames = row.name || names.value - proxy.$modal.confirm('鏄惁纭鍒犻櫎鎸囨爣鍚嶄负"' + indexNames + '"鐨勬暟鎹」?', '璀﹀憡', { - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - type: 'warning' - }).then(() => { - return delEnergyindex(currentNode.value.id, indexIds) - }).then(() => { - getList(currentNode.value) - proxy.$modal.msgError('鍒犻櫎鎴愬姛') - }).catch(function () { + const indexIds = row.indexId || ids.value + const indexNames = row.name || names.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎鎸囨爣鍚嶄负"' + indexNames + '"鐨勬暟鎹」?', "璀﹀憡", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", }) + .then(() => { + return delEnergyindex(currentNode.value.id, indexIds) + }) + .then(() => { + getList(currentNode.value) + proxy.$modal.msgError("鍒犻櫎鎴愬姛") + }) + .catch(function () {}) } -let storageModalRef = ref('') +let storageModalRef = ref("") function handleSave(row) { - if (storageModalRef.value) { - storageModalRef.value.handleOpen(row, currentNode.value) - storageModalRef.value.getIndexStorageFun(row.indexId) - } + if (storageModalRef.value) { + storageModalRef.value.handleOpen(row, currentNode.value) + storageModalRef.value.getIndexStorageFun(row.indexId) + } } defineExpose({ getList }) @@ -170,11 +188,10 @@ @import "@/assets/styles/page.scss"; .page-box { - height: calc(100vh - 115px); - + height: calc(100vh - 115px); } .table-box { - height: calc(100vh - 455px); + height: calc(100vh - 455px); } </style> diff --git a/zhitan-vue/src/views/modelconfiguration/indexwarehouse/indexWarehouse.vue b/zhitan-vue/src/views/modelconfiguration/indexwarehouse/indexWarehouse.vue index 82f3ef3..39fe733 100644 --- a/zhitan-vue/src/views/modelconfiguration/indexwarehouse/indexWarehouse.vue +++ b/zhitan-vue/src/views/modelconfiguration/indexwarehouse/indexWarehouse.vue @@ -40,7 +40,7 @@ </div> </div> <div class="page-container-right"> - <div class="mb20 mt20 ml20 tab-box"> + <div class="tab-box"> <div class="tab-li" :class="tab == 1 ? 'is-tab' : ''" @click="handleTab('1')">璁¢噺鍣ㄥ叿閰嶇疆淇℃伅</div> <div class="tab-li" :class="tab == 2 ? 'is-tab' : ''" @click="handleTab('2')">缁熻鎸囨爣</div> <!-- <el-radio-group v-model="tab"> @@ -303,11 +303,13 @@ color: #333; border-bottom: 1px solid #3371eb; margin-right: 20px; + margin-left: 15px; + font-size: 15px; .tab-li { cursor: pointer; border: 1px solid #3371eb; - padding: 10px 25px; + padding: 8px 20px; border-radius: 5px 5px 0 0; } diff --git a/zhitan-vue/src/views/modelconfiguration/setpeakvalley/setPeakValley.vue b/zhitan-vue/src/views/modelconfiguration/setpeakvalley/setPeakValley.vue index 5eef2db..2ce4615 100644 --- a/zhitan-vue/src/views/modelconfiguration/setpeakvalley/setPeakValley.vue +++ b/zhitan-vue/src/views/modelconfiguration/setpeakvalley/setPeakValley.vue @@ -6,52 +6,70 @@ <el-input v-model="queryParams.remark" placeholder="璇疯緭鍏ュ娉�" /> </el-form-item> <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery"> - 鎼滅储 - </el-button> + <el-button type="primary" icon="Search" @click="handleQuery"> 鎼滅储 </el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="Plus" @click="handleAdd"> 鏃舵閰嶇疆 </el-button> </el-form-item> </el-form> </div> - <div class="table-box"> - <div class="mt20 mb20"> - <el-button type="primary" icon="Plus" @click="handleAdd"> - 鏃舵閰嶇疆 - </el-button> + <div class="table-bg-style"> + <div class="table-box"> + <el-table v-loading="loading" :data="productoutputList" style="width: 100%" row-key="id"> + <el-table-column + label="鐢熸晥寮�濮嬫棩鏈�" + align="center" + key="beginDate" + prop="beginDate" + :show-overflow-tooltip="true" + /> + <el-table-column + label="鐢熸晥缁撴潫鏃ユ湡" + align="center" + key="endDate" + prop="endDate" + :show-overflow-tooltip="true" + /> + <el-table-column label="澶囨敞" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" /> + <el-table-column + label="鍒涘缓鏃堕棿" + align="center" + key="createTime" + prop="createTime" + :show-overflow-tooltip="true" + /> + <el-table-column label="鎿嶄綔" align="center" width="300" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="鐢典环閰嶇疆" placement="top"> + <el-button link type="primary" icon="Plus" @click="handleExpandChange(scope.row)"> 鐢典环閰嶇疆 </el-button> + </el-tooltip> + <el-tooltip content="缂栬緫" placement="top"> + <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> 缂栬緫 </el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> 鍒犻櫎 </el-button> + </el-tooltip> + </template> + </el-table-column> + </el-table> </div> - <el-table v-loading="loading" :data="productoutputList" style="width: 100%" row-key="id"> - <el-table-column label="鐢熸晥寮�濮嬫棩鏈�" align="center" key="beginDate" prop="beginDate" :show-overflow-tooltip="true" /> - <el-table-column label="鐢熸晥缁撴潫鏃ユ湡" align="center" key="endDate" prop="endDate" :show-overflow-tooltip="true" /> - <el-table-column label="澶囨敞" align="center" key="remark" prop="remark" :show-overflow-tooltip="true" /> - <el-table-column label="鍒涘缓鏃堕棿" align="center" key="createTime" prop="createTime" :show-overflow-tooltip="true" /> - <el-table-column label="鎿嶄綔" align="center" width="300" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-tooltip content="鐢典环閰嶇疆" placement="top"> - <el-button link type="primary" icon="Plus" @click="handleExpandChange(scope.row)"> - 鐢典环閰嶇疆 - </el-button> - </el-tooltip> - <el-tooltip content="缂栬緫" placement="top"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"> - 缂栬緫 - </el-button> - </el-tooltip> - <el-tooltip content="鍒犻櫎" placement="top"> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"> - 鍒犻櫎 - </el-button> - </el-tooltip> - </template> - </el-table-column> - </el-table> </div> <el-dialog :title="title" v-model="open" width="600px" append-to-body> <el-form :model="form" :rules="rules" ref="formRef" label-width="120px"> <el-row> <el-col :span="24"> <el-form-item label="鐢熸晥鏃ユ湡" prop="beginEndDate"> - <el-date-picker v-model="form.beginEndDate" type="daterange" range-separator="鍒�" format="YYYY-MM-DD" - value-format="YYYY-MM-DD" start-placeholder="鐢熸晥寮�濮嬫棩鏈�" end-placeholder="鐢熸晥缁撴潫鏃ユ湡" style="width: 100%" /> + <el-date-picker + v-model="form.beginEndDate" + type="daterange" + range-separator="鍒�" + format="YYYY-MM-DD" + value-format="YYYY-MM-DD" + start-placeholder="鐢熸晥寮�濮嬫棩鏈�" + end-placeholder="鐢熸晥缁撴潫鏃ユ湡" + style="width: 100%" + /> </el-form-item> </el-col> <el-col :span="24"> @@ -79,45 +97,89 @@ </el-row> <el-row v-for="(item, index) in formChild.data" :key="item.id"> <el-col :span="4"> - <el-form-item label="绫诲埆鍚嶇О" :prop="'data.' + index + '.type'" :rules="{ - required: true, - message: '绫诲埆鍚嶇О涓嶈兘涓虹┖', - trigger: ['change'], - }"> + <el-form-item + label="绫诲埆鍚嶇О" + :prop="'data.' + index + '.type'" + :rules="{ + required: true, + message: '绫诲埆鍚嶇О涓嶈兘涓虹┖', + trigger: ['change'], + }" + > <el-select v-model="item.type" placeholder="绫诲埆鍚嶇О" clearable style="width: 100%"> - <el-option v-for="dict in electricity_price" :key="dict.value" :label="dict.label" - :value="dict.value" /> + <el-option + v-for="dict in electricity_price" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> </el-select> </el-form-item> </el-col> <el-col :span="4"> - <el-form-item label="鏃舵鐢典环" :prop="'data.' + index + '.effecticityPrice'" :rules="{ - required: true, - message: '鏃舵鐢典环涓嶈兘涓虹┖', - trigger: ['blur', 'change'], - }"> - <el-input-number v-model="item.effecticityPrice" :min="0.0" :precision="2" :step="0.1" - placeholder="鏃舵鐢典环" style="width: 100%" controls-position="right" /> + <el-form-item + label="鏃舵鐢典环" + :prop="'data.' + index + '.effecticityPrice'" + :rules="{ + required: true, + message: '鏃舵鐢典环涓嶈兘涓虹┖', + trigger: ['blur', 'change'], + }" + > + <el-input-number + v-model="item.effecticityPrice" + :min="0.0" + :precision="2" + :step="0.1" + placeholder="鏃舵鐢典环" + style="width: 100%" + controls-position="right" + /> </el-form-item> </el-col> <el-col :span="4"> - <el-form-item label="寮�濮嬫椂闂�" :prop="'data.' + index + '.startTime'" :rules="{ - required: true, - message: '寮�濮嬫椂闂翠笉鑳戒负绌�', - trigger: ['blur', 'change'], - }"> - <el-time-select v-model="item.startTime" placeholder="寮�濮嬫椂闂�" :max-time="item.stopTime" start="00:00:00" - step="00:30:00" end="24:00:00" style="width: 100%" format="HH:mm:00" /> + <el-form-item + label="寮�濮嬫椂闂�" + :prop="'data.' + index + '.startTime'" + :rules="{ + required: true, + message: '寮�濮嬫椂闂翠笉鑳戒负绌�', + trigger: ['blur', 'change'], + }" + > + <el-time-select + v-model="item.startTime" + placeholder="寮�濮嬫椂闂�" + :max-time="item.stopTime" + start="00:00:00" + step="00:30:00" + end="24:00:00" + style="width: 100%" + format="HH:mm:00" + /> </el-form-item> </el-col> <el-col :span="4"> - <el-form-item label="缁撴潫鏃堕棿" :prop="'data.' + index + '.stopTime'" :rules="{ - required: true, - message: '缁撴潫鏃堕棿涓嶈兘涓虹┖', - trigger: ['blur', 'change'], - }"> - <el-time-select v-model="item.stopTime" placeholder="缁撴潫鏃堕棿" :min-time="item.startTime" start="00:00:00" - step="00:30:00" end="24:00:00" style="width: 100%" format="HH:mm:00" :disabled="item.startTime==null" /> + <el-form-item + label="缁撴潫鏃堕棿" + :prop="'data.' + index + '.stopTime'" + :rules="{ + required: true, + message: '缁撴潫鏃堕棿涓嶈兘涓虹┖', + trigger: ['blur', 'change'], + }" + > + <el-time-select + v-model="item.stopTime" + placeholder="缁撴潫鏃堕棿" + :min-time="item.startTime" + start="00:00:00" + step="00:30:00" + end="24:00:00" + style="width: 100%" + format="HH:mm:00" + :disabled="item.startTime == null" + /> </el-form-item> </el-col> <el-col :span="4"> @@ -127,11 +189,14 @@ </el-col> <el-col :span="4"> <el-form-item> - <el-button link type="primary" icon="Plus" @click="handleAddChildChild"> - 鏂板 - </el-button> - <el-button link type="primary" icon="Delete" @click="handleDeleteChildChild(item, index)" - v-if="formChild.data.length > 1"> + <el-button link type="primary" icon="Plus" @click="handleAddChildChild"> 鏂板 </el-button> + <el-button + link + type="primary" + icon="Delete" + @click="handleDeleteChildChild(item, index)" + v-if="formChild.data.length > 1" + > 鍒犻櫎 </el-button> </el-form-item> @@ -157,18 +222,18 @@ delPeakValleyConfiguration, listPeakValleyConfigurationChild, updatePeakValleyConfigurationChild, -} from "@/api/modelConfiguration/setPeakValley"; -import { nanoid } from "nanoid"; -const { proxy } = getCurrentInstance(); -const { electricity_price } = proxy.useDict("electricity_price"); -const productoutputList = ref([]); -const open = ref(false); -const loading = ref(false); -const showSearch = ref(true); -const title = ref(""); -const loadingChild = ref(true); -const openChild = ref(false); -const titleChild = ref(""); +} from "@/api/modelConfiguration/setPeakValley" +import { nanoid } from "nanoid" +const { proxy } = getCurrentInstance() +const { electricity_price } = proxy.useDict("electricity_price") +const productoutputList = ref([]) +const open = ref(false) +const loading = ref(false) +const showSearch = ref(true) +const title = ref("") +const loadingChild = ref(true) +const openChild = ref(false) +const titleChild = ref("") const data = reactive({ form: {}, queryParams: { @@ -195,82 +260,80 @@ }, ], }, -}); +}) -const { queryParams, form, rules, formChild } = toRefs(data); -getList(); +const { queryParams, form, rules, formChild } = toRefs(data) +getList() // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鍒楄〃 function getList() { - loading.value = true; - listPeakValleyConfiguration(proxy.addDateRange(queryParams.value)).then( - (res) => { - loading.value = false; - productoutputList.value = res.rows; - queryParams.value.total = res.total; - } - ); + loading.value = true + listPeakValleyConfiguration(proxy.addDateRange(queryParams.value)).then((res) => { + loading.value = false + productoutputList.value = res.rows + queryParams.value.total = res.total + }) } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鎼滅储 function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-閲嶇疆 function resetQuery() { - proxy.resetForm("queryRef"); - (queryParams.value = { + proxy.resetForm("queryRef") + ;(queryParams.value = { pageNum: 1, pageSize: 10, timeType: "YEAR", dataTime: null, total: 0, }), - handleQuery(); + handleQuery() } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鏂板 function handleAdd() { - reset(); - open.value = true; - title.value = "鏂板灏栧嘲骞宠胺鏃舵閰嶇疆"; + reset() + open.value = true + title.value = "鏂板灏栧嘲骞宠胺鏃舵閰嶇疆" } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-缂栬緫 function handleUpdate(row) { - reset(); + reset() getPeakValleyConfiguration(row.id).then((response) => { - form.value = response.data; - form.value.beginEndDate = [response.data.beginDate, response.data.endDate]; - open.value = true; - title.value = "缂栬緫灏栧嘲骞宠胺鏃舵閰嶇疆"; - }); + form.value = response.data + form.value.beginEndDate = [response.data.beginDate, response.data.endDate] + open.value = true + title.value = "缂栬緫灏栧嘲骞宠胺鏃舵閰嶇疆" + }) } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鏂板/缂栬緫-淇濆瓨 function submitForm() { proxy.$refs["formRef"].validate((valid) => { if (valid) { - form.value.beginDate = form.value.beginEndDate[0]; - form.value.endDate = form.value.beginEndDate[1]; - delete form.value.beginEndDate; + form.value.beginDate = form.value.beginEndDate[0] + form.value.endDate = form.value.beginEndDate[1] + delete form.value.beginEndDate if (form.value.id != undefined) { updatePeakValleyConfiguration(form.value).then((response) => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { addPeakValleyConfiguration(form.value).then((response) => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鏂板/缂栬緫-鍙栨秷 function cancel() { - open.value = false; - proxy.$refs.formRef.resetFields(); - reset(); + open.value = false + proxy.$refs.formRef.resetFields() + reset() } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鏂板/缂栬緫-琛ㄥ崟閲嶇疆 function reset() { @@ -278,88 +341,80 @@ beginDate: null, endDate: null, remark: null, - }; + } } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鍒犻櫎 function handleDelete(row) { proxy.$modal - .confirm( - '鏄惁纭鍒犻櫎鐢熸晥鏃ユ湡涓�"' + - row.beginDate + - "鍒�" + - row.endDate + - '"鐨勬暟鎹」锛�' - ) + .confirm('鏄惁纭鍒犻櫎鐢熸晥鏃ユ湡涓�"' + row.beginDate + "鍒�" + row.endDate + '"鐨勬暟鎹」锛�') .then(function () { - return delPeakValleyConfiguration(row.id); + return delPeakValleyConfiguration(row.id) }) .then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") }) - .catch(() => { }); + .catch(() => {}) } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鏃舵鐢典环閰嶇疆-鏂板 function handleExpandChange(row) { - formChild.value.parentId = row.id; - formChild.value.beginEndDate = [row.beginDate, row.endDate]; - formChild.value.beginDate = row.beginDate; - formChild.value.endDate = row.endDate; + formChild.value.parentId = row.id + formChild.value.beginEndDate = [row.beginDate, row.endDate] + formChild.value.beginDate = row.beginDate + formChild.value.endDate = row.endDate listPeakValleyConfigurationChild( proxy.addDateRange({ parentId: row.id, }) ).then((res) => { - loadingChild.value = false; + loadingChild.value = false formChild.value.data = res.rows.length > 0 ? res.rows : [ - { - parentId: row.id, - type: null, - startTime: null, - stopTime: null, - effecticityPrice: 0.0, - }, - ]; - }); - openChild.value = true; - titleChild.value = "灏栧嘲骞宠胺鏃舵鐢典环閰嶇疆"; + { + parentId: row.id, + type: null, + startTime: null, + stopTime: null, + effecticityPrice: 0.0, + }, + ] + }) + openChild.value = true + titleChild.value = "灏栧嘲骞宠胺鏃舵鐢典环閰嶇疆" } function handleAddChildChild() { - console.log(formChild.value); + console.log(formChild.value) formChild.value.data.push({ parentId: formChild.value.parentId, type: null, startTime: null, stopTime: null, effecticityPrice: 0.0, - }); - openChild.value = true; - titleChild.value = "灏栧嘲骞宠胺鏃舵鐢典环閰嶇疆"; + }) + openChild.value = true + titleChild.value = "灏栧嘲骞宠胺鏃舵鐢典环閰嶇疆" } function handleDeleteChildChild(item, index) { - formChild.value.data.splice(index, 1); + formChild.value.data.splice(index, 1) } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鏃舵鐢典环閰嶇疆-鏂板/缂栬緫-淇濆瓨 function submitFormChild() { proxy.$refs["formChildRef"].validate((valid) => { if (valid) { - updatePeakValleyConfigurationChild(formChild.value.data).then( - (response) => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - openChild.value = false; - getList(); - } - ); + updatePeakValleyConfigurationChild(formChild.value.data).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + openChild.value = false + getList() + }) } - }); + }) } // 妯″瀷閰嶇疆绠$悊-灏栧嘲骞宠胺閰嶇疆-鏂板/缂栬緫-鍙栨秷 function cancelChild() { - openChild.value = false; - proxy.$refs.formChildRef.resetFields(); + openChild.value = false + proxy.$refs.formChildRef.resetFields() } </script> <style scoped lang="scss"> diff --git a/zhitan-vue/src/views/monitor/job/index.vue b/zhitan-vue/src/views/monitor/job/index.vue index 071626a..8810648 100644 --- a/zhitan-vue/src/views/monitor/job/index.vue +++ b/zhitan-vue/src/views/monitor/job/index.vue @@ -1,308 +1,310 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> - <el-form-item label="浠诲姟鍚嶇О" prop="jobName"> - <el-input - v-model="queryParams.jobName" - placeholder="璇疯緭鍏ヤ换鍔″悕绉�" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="浠诲姟缁勫悕" prop="jobGroup"> - <el-select v-model="queryParams.jobGroup" placeholder="璇烽�夋嫨浠诲姟缁勫悕" clearable style="width: 200px"> - <el-option + <el-form-item label="浠诲姟鍚嶇О" prop="jobName"> + <el-input + v-model="queryParams.jobName" + placeholder="璇疯緭鍏ヤ换鍔″悕绉�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="浠诲姟缁勫悕" prop="jobGroup"> + <el-select v-model="queryParams.jobGroup" placeholder="璇烽�夋嫨浠诲姟缁勫悕" clearable style="width: 200px"> + <el-option v-for="dict in sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="浠诲姟鐘舵��" prop="status"> + <el-select v-model="queryParams.status" placeholder="璇烽�夋嫨浠诲姟鐘舵��" clearable style="width: 200px"> + <el-option v-for="dict in sys_job_status" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </div> + + <div class="table-bg-style"> + <div class="table-box"> + <div style="margin-bottom: 12px"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['monitor:job:add']" + >鏂板</el-button + > + <el-button + type="success" + plain + icon="Edit" + :disabled="single" + @click="handleUpdate" + v-hasPermi="['monitor:job:edit']" + >淇敼</el-button + > + <el-button + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['monitor:job:remove']" + >鍒犻櫎</el-button + > + <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:job:export']" + >瀵煎嚭</el-button + > + <el-button type="info" plain icon="Operation" @click="handleJobLog" v-hasPermi="['monitor:job:query']" + >鏃ュ織</el-button + > + </div> + <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="浠诲姟缂栧彿" width="100" align="center" prop="jobId" /> + <el-table-column label="浠诲姟鍚嶇О" align="center" prop="jobName" :show-overflow-tooltip="true" /> + <el-table-column label="浠诲姟缁勫悕" align="center" prop="jobGroup"> + <template #default="scope"> + <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" /> + </template> + </el-table-column> + <el-table-column label="璋冪敤鐩爣瀛楃涓�" align="center" prop="invokeTarget" :show-overflow-tooltip="true" /> + <el-table-column label="cron鎵ц琛ㄨ揪寮�" align="center" prop="cronExpression" :show-overflow-tooltip="true" /> + <el-table-column label="鐘舵��" align="center"> + <template #default="scope"> + <el-switch + v-model="scope.row.status" + active-value="0" + inactive-value="1" + @change="handleStatusChange(scope.row)" + ></el-switch> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="淇敼" placement="top"> + <el-button + link + type="primary" + icon="Edit" + @click="handleUpdate(scope.row)" + v-hasPermi="['monitor:job:edit']" + ></el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['monitor:job:remove']" + ></el-button> + </el-tooltip> + <el-tooltip content="鎵ц涓�娆�" placement="top"> + <el-button + link + type="primary" + icon="CaretRight" + @click="handleRun(scope.row)" + v-hasPermi="['monitor:job:changeStatus']" + ></el-button> + </el-tooltip> + <el-tooltip content="浠诲姟璇︾粏" placement="top"> + <el-button + link + type="primary" + icon="View" + @click="handleView(scope.row)" + v-hasPermi="['monitor:job:query']" + ></el-button> + </el-tooltip> + <el-tooltip content="璋冨害鏃ュ織" placement="top"> + <el-button + link + type="primary" + icon="Operation" + @click="handleJobLog(scope.row)" + v-hasPermi="['monitor:job:query']" + ></el-button> + </el-tooltip> + </template> + </el-table-column> + </el-table> + + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> + </div> + + <!-- 娣诲姞鎴栦慨鏀瑰畾鏃朵换鍔″璇濇 --> + <el-dialog :title="title" v-model="open" width="820px" append-to-body> + <el-form ref="jobRef" :model="form" :rules="rules" label-width="120px"> + <el-row> + <el-col :span="12"> + <el-form-item label="浠诲姟鍚嶇О" prop="jobName"> + <el-input v-model="form.jobName" placeholder="璇疯緭鍏ヤ换鍔″悕绉�" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="浠诲姟鍒嗙粍" prop="jobGroup"> + <el-select v-model="form.jobGroup" placeholder="璇烽�夋嫨"> + <el-option v-for="dict in sys_job_group" :key="dict.value" :label="dict.label" :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="浠诲姟鐘舵��" prop="status"> - <el-select v-model="queryParams.status" placeholder="璇烽�夋嫨浠诲姟鐘舵��" clearable style="width: 200px"> - <el-option - v-for="dict in sys_job_status" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + ></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item prop="invokeTarget"> + <template #label> + <span> + 璋冪敤鏂规硶 + <el-tooltip placement="top"> + <template #content> + <div> + Bean璋冪敤绀轰緥锛歳yTask.ryParams('ry') + <br />Class绫昏皟鐢ㄧず渚嬶細com.ruoyi.quartz.task.RyTask.ryParams('ry') + <br />鍙傛暟璇存槑锛氭敮鎸佸瓧绗︿覆锛屽竷灏旂被鍨嬶紝闀挎暣鍨嬶紝娴偣鍨嬶紝鏁村瀷 + </div> + </template> + <el-icon><question-filled /></el-icon> + </el-tooltip> + </span> + </template> + <el-input v-model="form.invokeTarget" placeholder="璇疯緭鍏ヨ皟鐢ㄧ洰鏍囧瓧绗︿覆" /> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="cron琛ㄨ揪寮�" prop="cronExpression"> + <el-input v-model="form.cronExpression" placeholder="璇疯緭鍏ron鎵ц琛ㄨ揪寮�"> + <template #append> + <el-button type="primary" @click="handleShowCron"> + 鐢熸垚琛ㄨ揪寮� + <i class="el-icon-time el-icon--right"></i> + </el-button> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :span="24" v-if="form.jobId !== undefined"> + <el-form-item label="鐘舵��"> + <el-radio-group v-model="form.status"> + <el-radio v-for="dict in sys_job_status" :key="dict.value" :label="dict.value">{{ + dict.label + }}</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鎵ц绛栫暐" prop="misfirePolicy"> + <el-radio-group v-model="form.misfirePolicy"> + <el-radio-button label="1">绔嬪嵆鎵ц</el-radio-button> + <el-radio-button label="2">鎵ц涓�娆�</el-radio-button> + <el-radio-button label="3">鏀惧純鎵ц</el-radio-button> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鏄惁骞跺彂" prop="concurrent"> + <el-radio-group v-model="form.concurrent"> + <el-radio-button label="0">鍏佽</el-radio-button> + <el-radio-button label="1">绂佹</el-radio-button> + </el-radio-group> + </el-form-item> + </el-col> + </el-row> </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="Plus" - @click="handleAdd" - v-hasPermi="['monitor:job:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="success" - plain - icon="Edit" - :disabled="single" - @click="handleUpdate" - v-hasPermi="['monitor:job:edit']" - >淇敼</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['monitor:job:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['monitor:job:export']" - >瀵煎嚭</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="info" - plain - icon="Operation" - @click="handleJobLog" - v-hasPermi="['monitor:job:query']" - >鏃ュ織</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + <el-dialog title="Cron琛ㄨ揪寮忕敓鎴愬櫒" v-model="openCron" append-to-body destroy-on-close> + <crontab ref="crontabRef" @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab> + </el-dialog> - <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="浠诲姟缂栧彿" width="100" align="center" prop="jobId" /> - <el-table-column label="浠诲姟鍚嶇О" align="center" prop="jobName" :show-overflow-tooltip="true" /> - <el-table-column label="浠诲姟缁勫悕" align="center" prop="jobGroup"> - <template #default="scope"> - <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" /> - </template> - </el-table-column> - <el-table-column label="璋冪敤鐩爣瀛楃涓�" align="center" prop="invokeTarget" :show-overflow-tooltip="true" /> - <el-table-column label="cron鎵ц琛ㄨ揪寮�" align="center" prop="cronExpression" :show-overflow-tooltip="true" /> - <el-table-column label="鐘舵��" align="center"> - <template #default="scope"> - <el-switch - v-model="scope.row.status" - active-value="0" - inactive-value="1" - @change="handleStatusChange(scope.row)" - ></el-switch> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-tooltip content="淇敼" placement="top"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button> - </el-tooltip> - <el-tooltip content="鍒犻櫎" placement="top"> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['monitor:job:remove']"></el-button> - </el-tooltip> - <el-tooltip content="鎵ц涓�娆�" placement="top"> - <el-button link type="primary" icon="CaretRight" @click="handleRun(scope.row)" v-hasPermi="['monitor:job:changeStatus']"></el-button> - </el-tooltip> - <el-tooltip content="浠诲姟璇︾粏" placement="top"> - <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']"></el-button> - </el-tooltip> - <el-tooltip content="璋冨害鏃ュ織" placement="top"> - <el-button link type="primary" icon="Operation" @click="handleJobLog(scope.row)" v-hasPermi="['monitor:job:query']"></el-button> - </el-tooltip> - </template> - </el-table-column> - </el-table> - - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> - - <!-- 娣诲姞鎴栦慨鏀瑰畾鏃朵换鍔″璇濇 --> - <el-dialog :title="title" v-model="open" width="820px" append-to-body> - <el-form ref="jobRef" :model="form" :rules="rules" label-width="120px"> - <el-row> - <el-col :span="12"> - <el-form-item label="浠诲姟鍚嶇О" prop="jobName"> - <el-input v-model="form.jobName" placeholder="璇疯緭鍏ヤ换鍔″悕绉�" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="浠诲姟鍒嗙粍" prop="jobGroup"> - <el-select v-model="form.jobGroup" placeholder="璇烽�夋嫨"> - <el-option - v-for="dict in sys_job_group" - :key="dict.value" - :label="dict.label" - :value="dict.value" - ></el-option> - </el-select> - </el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item prop="invokeTarget"> - <template #label> - <span> - 璋冪敤鏂规硶 - <el-tooltip placement="top"> - <template #content> - <div> - Bean璋冪敤绀轰緥锛歳yTask.ryParams('ry') - <br />Class绫昏皟鐢ㄧず渚嬶細com.ruoyi.quartz.task.RyTask.ryParams('ry') - <br />鍙傛暟璇存槑锛氭敮鎸佸瓧绗︿覆锛屽竷灏旂被鍨嬶紝闀挎暣鍨嬶紝娴偣鍨嬶紝鏁村瀷 - </div> - </template> - <el-icon><question-filled /></el-icon> - </el-tooltip> - </span> - </template> - <el-input v-model="form.invokeTarget" placeholder="璇疯緭鍏ヨ皟鐢ㄧ洰鏍囧瓧绗︿覆" /> - </el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="cron琛ㄨ揪寮�" prop="cronExpression"> - <el-input v-model="form.cronExpression" placeholder="璇疯緭鍏ron鎵ц琛ㄨ揪寮�"> - <template #append> - <el-button type="primary" @click="handleShowCron"> - 鐢熸垚琛ㄨ揪寮� - <i class="el-icon-time el-icon--right"></i> - </el-button> - </template> - </el-input> - </el-form-item> - </el-col> - <el-col :span="24" v-if="form.jobId !== undefined"> - <el-form-item label="鐘舵��"> - <el-radio-group v-model="form.status"> - <el-radio - v-for="dict in sys_job_status" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鎵ц绛栫暐" prop="misfirePolicy"> - <el-radio-group v-model="form.misfirePolicy"> - <el-radio-button label="1">绔嬪嵆鎵ц</el-radio-button> - <el-radio-button label="2">鎵ц涓�娆�</el-radio-button> - <el-radio-button label="3">鏀惧純鎵ц</el-radio-button> - </el-radio-group> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鏄惁骞跺彂" prop="concurrent"> - <el-radio-group v-model="form.concurrent"> - <el-radio-button label="0">鍏佽</el-radio-button> - <el-radio-button label="1">绂佹</el-radio-button> - </el-radio-group> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - - <el-dialog title="Cron琛ㄨ揪寮忕敓鎴愬櫒" v-model="openCron" append-to-body destroy-on-close> - <crontab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab> - </el-dialog> - - <!-- 浠诲姟鏃ュ織璇︾粏 --> - <el-dialog title="浠诲姟璇︾粏" v-model="openView" width="700px" append-to-body> - <el-form :model="form" label-width="120px"> - <el-row> - <el-col :span="12"> - <el-form-item label="浠诲姟缂栧彿锛�">{{ form.jobId }}</el-form-item> - <el-form-item label="浠诲姟鍚嶇О锛�">{{ form.jobName }}</el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="浠诲姟鍒嗙粍锛�">{{ jobGroupFormat(form) }}</el-form-item> - <el-form-item label="鍒涘缓鏃堕棿锛�">{{ form.createTime }}</el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="cron琛ㄨ揪寮忥細">{{ form.cronExpression }}</el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="涓嬫鎵ц鏃堕棿锛�">{{ parseTime(form.nextValidTime) }}</el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="璋冪敤鐩爣鏂规硶锛�">{{ form.invokeTarget }}</el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="浠诲姟鐘舵�侊細"> - <div v-if="form.status == 0">姝e父</div> - <div v-else-if="form.status == 1">鏆傚仠</div> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鏄惁骞跺彂锛�"> - <div v-if="form.concurrent == 0">鍏佽</div> - <div v-else-if="form.concurrent == 1">绂佹</div> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鎵ц绛栫暐锛�"> - <div v-if="form.misfirePolicy == 0">榛樿绛栫暐</div> - <div v-else-if="form.misfirePolicy == 1">绔嬪嵆鎵ц</div> - <div v-else-if="form.misfirePolicy == 2">鎵ц涓�娆�</div> - <div v-else-if="form.misfirePolicy == 3">鏀惧純鎵ц</div> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button @click="openView = false">鍏� 闂�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 浠诲姟鏃ュ織璇︾粏 --> + <el-dialog title="浠诲姟璇︾粏" v-model="openView" width="700px" append-to-body> + <el-form :model="form" label-width="120px"> + <el-row> + <el-col :span="12"> + <el-form-item label="浠诲姟缂栧彿锛�">{{ form.jobId }}</el-form-item> + <el-form-item label="浠诲姟鍚嶇О锛�">{{ form.jobName }}</el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="浠诲姟鍒嗙粍锛�">{{ jobGroupFormat(form) }}</el-form-item> + <el-form-item label="鍒涘缓鏃堕棿锛�">{{ form.createTime }}</el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="cron琛ㄨ揪寮忥細">{{ form.cronExpression }}</el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="涓嬫鎵ц鏃堕棿锛�">{{ parseTime(form.nextValidTime) }}</el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="璋冪敤鐩爣鏂规硶锛�">{{ form.invokeTarget }}</el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="浠诲姟鐘舵�侊細"> + <div v-if="form.status == 0">姝e父</div> + <div v-else-if="form.status == 1">鏆傚仠</div> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鏄惁骞跺彂锛�"> + <div v-if="form.concurrent == 0">鍏佽</div> + <div v-else-if="form.concurrent == 1">绂佹</div> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鎵ц绛栫暐锛�"> + <div v-if="form.misfirePolicy == 0">榛樿绛栫暐</div> + <div v-else-if="form.misfirePolicy == 1">绔嬪嵆鎵ц</div> + <div v-else-if="form.misfirePolicy == 2">鎵ц涓�娆�</div> + <div v-else-if="form.misfirePolicy == 3">鏀惧純鎵ц</div> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button @click="openView = false">鍏� 闂�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="Job"> -import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job"; -import Crontab from '@/components/Crontab' -const router = useRouter(); -const { proxy } = getCurrentInstance(); -const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status"); +import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job" +import Crontab from "@/components/Crontab" +const router = useRouter() +const { proxy } = getCurrentInstance() +const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status") -const jobList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const total = ref(0); -const title = ref(""); -const openView = ref(false); -const openCron = ref(false); -const expression = ref(""); +const jobList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") +const openView = ref(false) +const openCron = ref(false) +const expression = ref("") const data = reactive({ form: {}, @@ -311,34 +313,34 @@ pageSize: 10, jobName: undefined, jobGroup: undefined, - status: undefined + status: undefined, }, rules: { jobName: [{ required: true, message: "浠诲姟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], invokeTarget: [{ required: true, message: "璋冪敤鐩爣瀛楃涓蹭笉鑳戒负绌�", trigger: "blur" }], - cronExpression: [{ required: true, message: "cron鎵ц琛ㄨ揪寮忎笉鑳戒负绌�", trigger: "change" }] - } -}); + cronExpression: [{ required: true, message: "cron鎵ц琛ㄨ揪寮忎笉鑳戒负绌�", trigger: "change" }], + }, +}) -const { queryParams, form, rules } = toRefs(data); +const { queryParams, form, rules } = toRefs(data) /** 鏌ヨ瀹氭椂浠诲姟鍒楄〃 */ function getList() { - loading.value = true; - listJob(queryParams.value).then(response => { - jobList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + listJob(queryParams.value).then((response) => { + jobList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 浠诲姟缁勫悕瀛楀吀缈昏瘧 */ function jobGroupFormat(row, column) { - return proxy.selectDictLabel(sys_job_group.value, row.jobGroup); + return proxy.selectDictLabel(sys_job_group.value, row.jobGroup) } /** 鍙栨秷鎸夐挳 */ function cancel() { - open.value = false; - reset(); + open.value = false + reset() } /** 琛ㄥ崟閲嶇疆 */ function reset() { @@ -350,134 +352,154 @@ cronExpression: undefined, misfirePolicy: 1, concurrent: 1, - status: "0" - }; - proxy.resetForm("jobRef"); + status: "0", + } + proxy.resetForm("jobRef") } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - proxy.resetForm("queryRef"); - handleQuery(); + proxy.resetForm("queryRef") + handleQuery() } // 澶氶�夋閫変腑鏁版嵁 function handleSelectionChange(selection) { - ids.value = selection.map(item => item.jobId); - single.value = selection.length != 1; - multiple.value = !selection.length; + ids.value = selection.map((item) => item.jobId) + single.value = selection.length != 1 + multiple.value = !selection.length } // 鏇村鎿嶄綔瑙﹀彂 function handleCommand(command, row) { switch (command) { case "handleRun": - handleRun(row); - break; + handleRun(row) + break case "handleView": - handleView(row); - break; + handleView(row) + break case "handleJobLog": - handleJobLog(row); - break; + handleJobLog(row) + break default: - break; + break } } // 浠诲姟鐘舵�佷慨鏀� function handleStatusChange(row) { - let text = row.status === "0" ? "鍚敤" : "鍋滅敤"; - proxy.$modal.confirm('纭瑕�"' + text + '""' + row.jobName + '"浠诲姟鍚�?').then(function () { - return changeJobStatus(row.jobId, row.status); - }).then(() => { - proxy.$modal.msgSuccess(text + "鎴愬姛"); - }).catch(function () { - row.status = row.status === "0" ? "1" : "0"; - }); + let text = row.status === "0" ? "鍚敤" : "鍋滅敤" + proxy.$modal + .confirm('纭瑕�"' + text + '""' + row.jobName + '"浠诲姟鍚�?') + .then(function () { + return changeJobStatus(row.jobId, row.status) + }) + .then(() => { + proxy.$modal.msgSuccess(text + "鎴愬姛") + }) + .catch(function () { + row.status = row.status === "0" ? "1" : "0" + }) } /* 绔嬪嵆鎵ц涓�娆� */ function handleRun(row) { - proxy.$modal.confirm('纭瑕佺珛鍗虫墽琛屼竴娆�"' + row.jobName + '"浠诲姟鍚�?').then(function () { - return runJob(row.jobId, row.jobGroup); - }).then(() => { - proxy.$modal.msgSuccess("鎵ц鎴愬姛");}) - .catch(() => {}); + proxy.$modal + .confirm('纭瑕佺珛鍗虫墽琛屼竴娆�"' + row.jobName + '"浠诲姟鍚�?') + .then(function () { + return runJob(row.jobId, row.jobGroup) + }) + .then(() => { + proxy.$modal.msgSuccess("鎵ц鎴愬姛") + }) + .catch(() => {}) } /** 浠诲姟璇︾粏淇℃伅 */ function handleView(row) { - getJob(row.jobId).then(response => { - form.value = response.data; - openView.value = true; - }); + getJob(row.jobId).then((response) => { + form.value = response.data + openView.value = true + }) } /** cron琛ㄨ揪寮忔寜閽搷浣� */ function handleShowCron() { - expression.value = form.value.cronExpression; - openCron.value = true; + expression.value = form.value.cronExpression + openCron.value = true } /** 纭畾鍚庡洖浼犲�� */ function crontabFill(value) { - form.value.cronExpression = value; + form.value.cronExpression = value } /** 浠诲姟鏃ュ織鍒楄〃鏌ヨ */ function handleJobLog(row) { - const jobId = row.jobId || 0; - router.push('/monitor/job-log/index/' + jobId) + const jobId = row.jobId || 0 + router.push("/monitor/job-log/index/" + jobId) } /** 鏂板鎸夐挳鎿嶄綔 */ function handleAdd() { - reset(); - open.value = true; - title.value = "娣诲姞浠诲姟"; + reset() + open.value = true + title.value = "娣诲姞浠诲姟" } /** 淇敼鎸夐挳鎿嶄綔 */ function handleUpdate(row) { - reset(); - const jobId = row.jobId || ids.value; - getJob(jobId).then(response => { - form.value = response.data; - open.value = true; - title.value = "淇敼浠诲姟"; - }); + reset() + const jobId = row.jobId || ids.value + getJob(jobId).then((response) => { + form.value = response.data + open.value = true + title.value = "淇敼浠诲姟" + }) } /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["jobRef"].validate(valid => { + proxy.$refs["jobRef"].validate((valid) => { if (valid) { if (form.value.jobId != undefined) { - updateJob(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + updateJob(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { - addJob(form.value).then(response => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + addJob(form.value).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const jobIds = row.jobId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎瀹氭椂浠诲姟缂栧彿涓�"' + jobIds + '"鐨勬暟鎹」?').then(function () { - return delJob(jobIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + const jobIds = row.jobId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎瀹氭椂浠诲姟缂栧彿涓�"' + jobIds + '"鐨勬暟鎹」?') + .then(function () { + return delJob(jobIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download("monitor/job/export", { - ...queryParams.value, - }, `job_${new Date().getTime()}.xlsx`); + proxy.download( + "monitor/job/export", + { + ...queryParams.value, + }, + `job_${new Date().getTime()}.xlsx` + ) } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/monitor/logininfor/index.vue b/zhitan-vue/src/views/monitor/logininfor/index.vue index 9afb585..1444cce 100644 --- a/zhitan-vue/src/views/monitor/logininfor/index.vue +++ b/zhitan-vue/src/views/monitor/logininfor/index.vue @@ -1,145 +1,161 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px"> - <el-form-item label="鐧诲綍鍦板潃" prop="ipaddr"> - <el-input - v-model="queryParams.ipaddr" - placeholder="璇疯緭鍏ョ櫥褰曞湴鍧�" - clearable - style="width: 240px;" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName"> - <el-input - v-model="queryParams.userName" - placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" - clearable - style="width: 240px;" - @keyup.enter="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 sys_common_status" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="鐧诲綍鏃堕棿" style="width: 308px"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD HH:mm:ss" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" - ></el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="鐧诲綍鍦板潃" prop="ipaddr"> + <el-input + v-model="queryParams.ipaddr" + placeholder="璇疯緭鍏ョ櫥褰曞湴鍧�" + clearable + style="width: 240px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName"> + <el-input + v-model="queryParams.userName" + placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" + clearable + style="width: 240px" + @keyup.enter="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 sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鐧诲綍鏃堕棿" style="width: 308px"> + <el-date-picker + v-model="dateRange" + value-format="YYYY-MM-DD HH:mm:ss" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" + ></el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> + <div class="table-bg-style"> + <div class="table-box" style="margin-top: 0"> + <el-row :gutter="10" class="mb8" style="margin-top: 8px"> + <el-col :span="1.5"> <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['monitor:logininfor:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['monitor:logininfor:remove']" + >鍒犻櫎</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']" + >娓呯┖</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="danger" - plain - icon="Delete" - @click="handleClean" - v-hasPermi="['monitor:logininfor:remove']" - >娓呯┖</el-button> - </el-col> - <el-col :span="1.5"> + type="primary" + plain + icon="Unlock" + :disabled="single" + @click="handleUnlock" + v-hasPermi="['monitor:logininfor:unlock']" + >瑙i攣</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="primary" - plain - icon="Unlock" - :disabled="single" - @click="handleUnlock" - v-hasPermi="['monitor:logininfor:unlock']" - >瑙i攣</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['monitor:logininfor:export']" - >瀵煎嚭</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + type="warning" + plain + icon="Download" + @click="handleExport" + v-hasPermi="['monitor:logininfor:export']" + >瀵煎嚭</el-button + > + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> - <el-table ref="logininforRef" v-loading="loading" :data="logininforList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="璁块棶缂栧彿" align="center" prop="infoId" /> - <el-table-column label="鐢ㄦ埛鍚嶇О" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" /> - <el-table-column label="鍦板潃" align="center" prop="ipaddr" :show-overflow-tooltip="true" /> - <el-table-column label="鐧诲綍鍦扮偣" align="center" prop="loginLocation" :show-overflow-tooltip="true" /> - <el-table-column label="鎿嶄綔绯荤粺" align="center" prop="os" :show-overflow-tooltip="true" /> - <el-table-column label="娴忚鍣�" align="center" prop="browser" :show-overflow-tooltip="true" /> - <el-table-column label="鐧诲綍鐘舵��" align="center" prop="status"> + <el-table + ref="logininforRef" + v-loading="loading" + :data="logininforList" + @selection-change="handleSelectionChange" + :default-sort="defaultSort" + @sort-change="handleSortChange" + > + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="璁块棶缂栧彿" align="center" prop="infoId" /> + <el-table-column + label="鐢ㄦ埛鍚嶇О" + align="center" + prop="userName" + :show-overflow-tooltip="true" + sortable="custom" + :sort-orders="['descending', 'ascending']" + /> + <el-table-column label="鍦板潃" align="center" prop="ipaddr" :show-overflow-tooltip="true" /> + <el-table-column label="鐧诲綍鍦扮偣" align="center" prop="loginLocation" :show-overflow-tooltip="true" /> + <el-table-column label="鎿嶄綔绯荤粺" align="center" prop="os" :show-overflow-tooltip="true" /> + <el-table-column label="娴忚鍣�" align="center" prop="browser" :show-overflow-tooltip="true" /> + <el-table-column label="鐧诲綍鐘舵��" align="center" prop="status"> <template #default="scope"> - <dict-tag :options="sys_common_status" :value="scope.row.status" /> + <dict-tag :options="sys_common_status" :value="scope.row.status" /> </template> - </el-table-column> - <el-table-column label="鎻忚堪" align="center" prop="msg" :show-overflow-tooltip="true" /> - <el-table-column label="璁块棶鏃堕棿" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180"> + </el-table-column> + <el-table-column label="鎻忚堪" align="center" prop="msg" :show-overflow-tooltip="true" /> + <el-table-column + label="璁块棶鏃堕棿" + align="center" + prop="loginTime" + sortable="custom" + :sort-orders="['descending', 'ascending']" + width="180" + > <template #default="scope"> - <span>{{ parseTime(scope.row.loginTime) }}</span> + <span>{{ parseTime(scope.row.loginTime) }}</span> </template> - </el-table-column> - </el-table> + </el-table-column> + </el-table> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> - </div> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> + </div> + </div> </template> <script setup name="Logininfor"> -import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor"; +import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from "@/api/monitor/logininfor" -const { proxy } = getCurrentInstance(); -const { sys_common_status } = proxy.useDict("sys_common_status"); +const { proxy } = getCurrentInstance() +const { sys_common_status } = proxy.useDict("sys_common_status") -const logininforList = ref([]); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const selectName = ref(""); -const total = ref(0); -const dateRange = ref([]); -const defaultSort = ref({ prop: "loginTime", order: "descending" }); +const logininforList = ref([]) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const selectName = ref("") +const total = ref(0) +const dateRange = ref([]) +const defaultSort = ref({ prop: "loginTime", order: "descending" }) // 鏌ヨ鍙傛暟 const queryParams = ref({ @@ -149,77 +165,97 @@ userName: undefined, status: undefined, orderByColumn: undefined, - isAsc: undefined -}); + isAsc: undefined, +}) /** 鏌ヨ鐧诲綍鏃ュ織鍒楄〃 */ function getList() { - loading.value = true; - list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => { - logininforList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + list(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => { + logininforList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - dateRange.value = []; - proxy.resetForm("queryRef"); - queryParams.value.pageNum = 1; - proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order); + dateRange.value = [] + proxy.resetForm("queryRef") + queryParams.value.pageNum = 1 + proxy.$refs["logininforRef"].sort(defaultSort.value.prop, defaultSort.value.order) } /** 澶氶�夋閫変腑鏁版嵁 */ function handleSelectionChange(selection) { - ids.value = selection.map(item => item.infoId); - multiple.value = !selection.length; - single.value = selection.length != 1; - selectName.value = selection.map(item => item.userName); + ids.value = selection.map((item) => item.infoId) + multiple.value = !selection.length + single.value = selection.length != 1 + selectName.value = selection.map((item) => item.userName) } /** 鎺掑簭瑙﹀彂浜嬩欢 */ function handleSortChange(column, prop, order) { - queryParams.value.orderByColumn = column.prop; - queryParams.value.isAsc = column.order; - getList(); + queryParams.value.orderByColumn = column.prop + queryParams.value.isAsc = column.order + getList() } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const infoIds = row.infoId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎璁块棶缂栧彿涓�"' + infoIds + '"鐨勬暟鎹」?').then(function () { - return delLogininfor(infoIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + const infoIds = row.infoId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎璁块棶缂栧彿涓�"' + infoIds + '"鐨勬暟鎹」?') + .then(function () { + return delLogininfor(infoIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } /** 娓呯┖鎸夐挳鎿嶄綔 */ function handleClean() { - proxy.$modal.confirm("鏄惁纭娓呯┖鎵�鏈夌櫥褰曟棩蹇楁暟鎹」?").then(function () { - return cleanLogininfor(); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("娓呯┖鎴愬姛"); - }).catch(() => {}); + proxy.$modal + .confirm("鏄惁纭娓呯┖鎵�鏈夌櫥褰曟棩蹇楁暟鎹」?") + .then(function () { + return cleanLogininfor() + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("娓呯┖鎴愬姛") + }) + .catch(() => {}) } /** 瑙i攣鎸夐挳鎿嶄綔 */ function handleUnlock() { - const username = selectName.value; - proxy.$modal.confirm('鏄惁纭瑙i攣鐢ㄦ埛"' + username + '"鏁版嵁椤�?').then(function () { - return unlockLogininfor(username); - }).then(() => { - proxy.$modal.msgSuccess("鐢ㄦ埛" + username + "瑙i攣鎴愬姛"); - }).catch(() => {}); + const username = selectName.value + proxy.$modal + .confirm('鏄惁纭瑙i攣鐢ㄦ埛"' + username + '"鏁版嵁椤�?') + .then(function () { + return unlockLogininfor(username) + }) + .then(() => { + proxy.$modal.msgSuccess("鐢ㄦ埛" + username + "瑙i攣鎴愬姛") + }) + .catch(() => {}) } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download("monitor/logininfor/export", { - ...queryParams.value, - }, `config_${new Date().getTime()}.xlsx`); + proxy.download( + "monitor/logininfor/export", + { + ...queryParams.value, + }, + `config_${new Date().getTime()}.xlsx` + ) } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/monitor/online/index.vue b/zhitan-vue/src/views/monitor/online/index.vue index eb17ebc..1d0523c 100644 --- a/zhitan-vue/src/views/monitor/online/index.vue +++ b/zhitan-vue/src/views/monitor/online/index.vue @@ -1,106 +1,126 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true"> - <el-form-item label="鐧诲綍鍦板潃" prop="ipaddr"> - <el-input - v-model="queryParams.ipaddr" - placeholder="璇疯緭鍏ョ櫥褰曞湴鍧�" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName"> - <el-input - v-model="queryParams.userName" - placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="鐧诲綍鍦板潃" prop="ipaddr"> + <el-input + v-model="queryParams.ipaddr" + placeholder="璇疯緭鍏ョ櫥褰曞湴鍧�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName"> + <el-input + v-model="queryParams.userName" + placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </el-form> - <el-table - v-loading="loading" - :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)" - style="width: 100%;" - > - <el-table-column label="搴忓彿" width="50" type="index" align="center"> - <template #default="scope"> - <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> - </template> - </el-table-column> - <el-table-column label="浼氳瘽缂栧彿" align="center" prop="tokenId" :show-overflow-tooltip="true" /> - <el-table-column label="鐧诲綍鍚嶇О" align="center" prop="userName" :show-overflow-tooltip="true" /> - <el-table-column label="鎵�灞為儴闂�" align="center" prop="deptName" :show-overflow-tooltip="true" /> - <el-table-column label="涓绘満" align="center" prop="ipaddr" :show-overflow-tooltip="true" /> - <el-table-column label="鐧诲綍鍦扮偣" align="center" prop="loginLocation" :show-overflow-tooltip="true" /> - <el-table-column label="鎿嶄綔绯荤粺" align="center" prop="os" :show-overflow-tooltip="true" /> - <el-table-column label="娴忚鍣�" align="center" prop="browser" :show-overflow-tooltip="true" /> - <el-table-column label="鐧诲綍鏃堕棿" align="center" prop="loginTime" width="180"> - <template #default="scope"> - <span>{{ parseTime(scope.row.loginTime) }}</span> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-button link type="primary" icon="Delete" @click="handleForceLogout(scope.row)" v-hasPermi="['monitor:online:forceLogout']">寮洪��</el-button> - </template> - </el-table-column> - </el-table> + </div> - <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" /> - </div> + <div class="table-bg-style"> + <div class="table-box"> + <el-table + v-loading="loading" + :data="onlineList.slice((pageNum - 1) * pageSize, pageNum * pageSize)" + style="width: 100%" + > + <el-table-column label="搴忓彿" width="60" type="index" align="center"> + <template #default="scope"> + <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span> + </template> + </el-table-column> + <el-table-column label="浼氳瘽缂栧彿" align="center" prop="tokenId" :show-overflow-tooltip="true" /> + <el-table-column label="鐧诲綍鍚嶇О" align="center" prop="userName" :show-overflow-tooltip="true" /> + <el-table-column label="鎵�灞為儴闂�" align="center" prop="deptName" :show-overflow-tooltip="true" /> + <el-table-column label="涓绘満" align="center" prop="ipaddr" :show-overflow-tooltip="true" /> + <el-table-column label="鐧诲綍鍦扮偣" align="center" prop="loginLocation" :show-overflow-tooltip="true" /> + <el-table-column label="鎿嶄綔绯荤粺" align="center" prop="os" :show-overflow-tooltip="true" /> + <el-table-column label="娴忚鍣�" align="center" prop="browser" :show-overflow-tooltip="true" /> + <el-table-column label="鐧诲綍鏃堕棿" align="center" prop="loginTime" width="180"> + <template #default="scope"> + <span>{{ parseTime(scope.row.loginTime) }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-button + link + type="primary" + icon="Delete" + @click="handleForceLogout(scope.row)" + v-hasPermi="['monitor:online:forceLogout']" + >寮洪��</el-button + > + </template> + </el-table-column> + </el-table> + <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" /> + </div> + </div> + </div> </template> <script setup name="Online"> -import { forceLogout, list as initData } from "@/api/monitor/online"; +import { forceLogout, list as initData } from "@/api/monitor/online" -const { proxy } = getCurrentInstance(); +const { proxy } = getCurrentInstance() -const onlineList = ref([]); -const loading = ref(true); -const total = ref(0); -const pageNum = ref(1); -const pageSize = ref(10); +const onlineList = ref([]) +const loading = ref(true) +const total = ref(0) +const pageNum = ref(1) +const pageSize = ref(10) const queryParams = ref({ ipaddr: undefined, - userName: undefined -}); + userName: undefined, +}) /** 鏌ヨ鐧诲綍鏃ュ織鍒楄〃 */ function getList() { - loading.value = true; - initData(queryParams.value).then(response => { - onlineList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + initData(queryParams.value).then((response) => { + onlineList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - pageNum.value = 1; - getList(); + pageNum.value = 1 + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - proxy.resetForm("queryRef"); - handleQuery(); + proxy.resetForm("queryRef") + handleQuery() } /** 寮洪��鎸夐挳鎿嶄綔 */ function handleForceLogout(row) { - proxy.$modal.confirm('鏄惁纭寮洪��鍚嶇О涓�"' + row.userName + '"鐨勭敤鎴�?').then(function () { - return forceLogout(row.tokenId); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + proxy.$modal + .confirm('鏄惁纭寮洪��鍚嶇О涓�"' + row.userName + '"鐨勭敤鎴�?') + .then(function () { + return forceLogout(row.tokenId) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } -getList(); +getList() </script> +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/monitor/operlog/index.vue b/zhitan-vue/src/views/monitor/operlog/index.vue index c580dac..f4d6b40 100644 --- a/zhitan-vue/src/views/monitor/operlog/index.vue +++ b/zhitan-vue/src/views/monitor/operlog/index.vue @@ -1,219 +1,240 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px"> - <el-form-item label="鎿嶄綔鍦板潃" prop="operIp"> - <el-input - v-model="queryParams.operIp" - placeholder="璇疯緭鍏ユ搷浣滃湴鍧�" - clearable - style="width: 240px;" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="绯荤粺妯″潡" prop="title"> - <el-input - v-model="queryParams.title" - placeholder="璇疯緭鍏ョ郴缁熸ā鍧�" - clearable - style="width: 240px;" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鎿嶄綔浜哄憳" prop="operName"> - <el-input - v-model="queryParams.operName" - placeholder="璇疯緭鍏ユ搷浣滀汉鍛�" - clearable - style="width: 240px;" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="绫诲瀷" prop="businessType"> - <el-select - v-model="queryParams.businessType" - placeholder="鎿嶄綔绫诲瀷" - clearable - style="width: 240px" - > - <el-option - v-for="dict in sys_oper_type" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </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 sys_common_status" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="鎿嶄綔鏃堕棿" style="width: 308px"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD HH:mm:ss" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" - ></el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="鎿嶄綔鍦板潃" prop="operIp"> + <el-input + v-model="queryParams.operIp" + placeholder="璇疯緭鍏ユ搷浣滃湴鍧�" + clearable + style="width: 100%" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="绯荤粺妯″潡" prop="title"> + <el-input + v-model="queryParams.title" + placeholder="璇疯緭鍏ョ郴缁熸ā鍧�" + clearable + style="width: 100%" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鎿嶄綔浜哄憳" prop="operName"> + <el-input + v-model="queryParams.operName" + placeholder="璇疯緭鍏ユ搷浣滀汉鍛�" + clearable + style="width: 100%" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="绫诲瀷" prop="businessType"> + <el-select v-model="queryParams.businessType" placeholder="鎿嶄綔绫诲瀷" clearable style="width: 100%"> + <el-option v-for="dict in sys_oper_type" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鐘舵��" prop="status"> + <el-select v-model="queryParams.status" placeholder="鎿嶄綔鐘舵��" clearable style="width: 100%"> + <el-option v-for="dict in sys_common_status" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鎿嶄綔鏃堕棿" style="width: 320px"> + <el-date-picker + v-model="dateRange" + value-format="YYYY-MM-DD HH:mm:ss" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" + ></el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> + <div class="table-bg-style"> + <div class="table-box" style="margin-top: 0"> + <el-row :gutter="10" class="mb8" style="margin-top: 8px"> + <el-col :span="1.5"> <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['monitor:operlog:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['monitor:operlog:remove']" + >鍒犻櫎</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:operlog:remove']" + >娓呯┖</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="danger" - plain - icon="Delete" - @click="handleClean" - v-hasPermi="['monitor:operlog:remove']" - >娓呯┖</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['monitor:operlog:export']" - >瀵煎嚭</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + type="warning" + plain + icon="Download" + @click="handleExport" + v-hasPermi="['monitor:operlog:export']" + >瀵煎嚭</el-button + > + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> - <el-table ref="operlogRef" v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange"> - <el-table-column type="selection" width="50" align="center" /> - <el-table-column label="鏃ュ織缂栧彿" align="center" prop="operId" /> - <el-table-column label="绯荤粺妯″潡" align="center" prop="title" :show-overflow-tooltip="true" /> - <el-table-column label="鎿嶄綔绫诲瀷" align="center" prop="businessType"> + <el-table + ref="operlogRef" + v-loading="loading" + :data="operlogList" + @selection-change="handleSelectionChange" + :default-sort="defaultSort" + @sort-change="handleSortChange" + > + <el-table-column type="selection" width="50" align="center" /> + <el-table-column label="鏃ュ織缂栧彿" align="center" prop="operId" /> + <el-table-column label="绯荤粺妯″潡" align="center" prop="title" :show-overflow-tooltip="true" /> + <el-table-column label="鎿嶄綔绫诲瀷" align="center" prop="businessType"> <template #default="scope"> - <dict-tag :options="sys_oper_type" :value="scope.row.businessType" /> + <dict-tag :options="sys_oper_type" :value="scope.row.businessType" /> </template> - </el-table-column> - <el-table-column label="鎿嶄綔浜哄憳" align="center" width="110" prop="operName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" /> - <el-table-column label="鎿嶄綔鍦板潃" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" /> - <el-table-column label="鎿嶄綔鐘舵��" align="center" prop="status"> + </el-table-column> + <el-table-column + label="鎿嶄綔浜哄憳" + align="center" + width="110" + prop="operName" + :show-overflow-tooltip="true" + sortable="custom" + :sort-orders="['descending', 'ascending']" + /> + <el-table-column label="鎿嶄綔鍦板潃" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" /> + <el-table-column label="鎿嶄綔鐘舵��" align="center" prop="status"> <template #default="scope"> - <dict-tag :options="sys_common_status" :value="scope.row.status" /> + <dict-tag :options="sys_common_status" :value="scope.row.status" /> </template> - </el-table-column> - <el-table-column label="鎿嶄綔鏃ユ湡" align="center" prop="operTime" width="180" sortable="custom" :sort-orders="['descending', 'ascending']"> + </el-table-column> + <el-table-column + label="鎿嶄綔鏃ユ湡" + align="center" + prop="operTime" + width="180" + sortable="custom" + :sort-orders="['descending', 'ascending']" + > <template #default="scope"> - <span>{{ parseTime(scope.row.operTime) }}</span> + <span>{{ parseTime(scope.row.operTime) }}</span> </template> - </el-table-column> - <el-table-column label="娑堣�楁椂闂�" align="center" prop="costTime" width="110" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']"> + </el-table-column> + <el-table-column + label="娑堣�楁椂闂�" + align="center" + prop="costTime" + width="110" + :show-overflow-tooltip="true" + sortable="custom" + :sort-orders="['descending', 'ascending']" + > <template #default="scope"> - <span>{{ scope.row.costTime }}姣</span> + <span>{{ scope.row.costTime }}姣</span> </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> <template #default="scope"> - <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">璇︾粏</el-button> + <el-button + link + type="primary" + icon="View" + @click="handleView(scope.row, scope.index)" + v-hasPermi="['monitor:operlog:query']" + >璇︾粏</el-button + > </template> - </el-table-column> - </el-table> + </el-table-column> + </el-table> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> + </div> - <!-- 鎿嶄綔鏃ュ織璇︾粏 --> - <el-dialog title="鎿嶄綔鏃ュ織璇︾粏" v-model="open" width="800px" append-to-body> - <el-form :model="form" label-width="100px"> - <el-row> - <el-col :span="12"> - <el-form-item label="鎿嶄綔妯″潡锛�">{{ form.title }} / {{ typeFormat(form) }}</el-form-item> - <el-form-item - label="鐧诲綍淇℃伅锛�" - >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="璇锋眰鍦板潃锛�">{{ form.operUrl }}</el-form-item> - <el-form-item label="璇锋眰鏂瑰紡锛�">{{ form.requestMethod }}</el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="鎿嶄綔鏂规硶锛�">{{ form.method }}</el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="璇锋眰鍙傛暟锛�">{{ form.operParam }}</el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="杩斿洖鍙傛暟锛�">{{ form.jsonResult }}</el-form-item> - </el-col> - <el-col :span="8"> - <el-form-item label="鎿嶄綔鐘舵�侊細"> - <div v-if="form.status === 0">姝e父</div> - <div v-else-if="form.status === 1">澶辫触</div> - </el-form-item> - </el-col> - <el-col :span="8"> - <el-form-item label="娑堣�楁椂闂达細">{{ form.costTime }}姣</el-form-item> - </el-col> - <el-col :span="8"> - <el-form-item label="鎿嶄綔鏃堕棿锛�">{{ parseTime(form.operTime) }}</el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="寮傚父淇℃伅锛�" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button @click="open = false">鍏� 闂�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 鎿嶄綔鏃ュ織璇︾粏 --> + <el-dialog title="鎿嶄綔鏃ュ織璇︾粏" v-model="open" width="800px" append-to-body> + <el-form :model="form" label-width="100px"> + <el-row> + <el-col :span="12"> + <el-form-item label="鎿嶄綔妯″潡锛�">{{ form.title }} / {{ typeFormat(form) }}</el-form-item> + <el-form-item label="鐧诲綍淇℃伅锛�" + >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item + > + </el-col> + <el-col :span="12"> + <el-form-item label="璇锋眰鍦板潃锛�">{{ form.operUrl }}</el-form-item> + <el-form-item label="璇锋眰鏂瑰紡锛�">{{ form.requestMethod }}</el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="鎿嶄綔鏂规硶锛�">{{ form.method }}</el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="璇锋眰鍙傛暟锛�">{{ form.operParam }}</el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="杩斿洖鍙傛暟锛�">{{ form.jsonResult }}</el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="鎿嶄綔鐘舵�侊細"> + <div v-if="form.status === 0">姝e父</div> + <div v-else-if="form.status === 1">澶辫触</div> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="娑堣�楁椂闂达細">{{ form.costTime }}姣</el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item label="鎿嶄綔鏃堕棿锛�">{{ parseTime(form.operTime) }}</el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="寮傚父淇℃伅锛�" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button @click="open = false">鍏� 闂�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="Operlog"> -import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"; +import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog" -const { proxy } = getCurrentInstance(); -const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type","sys_common_status"); +const { proxy } = getCurrentInstance() +const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type", "sys_common_status") -const operlogList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const total = ref(0); -const title = ref(""); -const dateRange = ref([]); -const defaultSort = ref({ prop: "operTime", order: "descending" }); +const operlogList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") +const dateRange = ref([]) +const defaultSort = ref({ prop: "operTime", order: "descending" }) const data = reactive({ form: {}, @@ -224,78 +245,94 @@ title: undefined, operName: undefined, businessType: undefined, - status: undefined - } -}); + status: undefined, + }, +}) -const { queryParams, form } = toRefs(data); +const { queryParams, form } = toRefs(data) /** 鏌ヨ鐧诲綍鏃ュ織 */ function getList() { - loading.value = true; - list(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => { - operlogList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + list(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => { + operlogList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 鎿嶄綔鏃ュ織绫诲瀷瀛楀吀缈昏瘧 */ function typeFormat(row, column) { - return proxy.selectDictLabel(sys_oper_type.value, row.businessType); + return proxy.selectDictLabel(sys_oper_type.value, row.businessType) } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - dateRange.value = []; - proxy.resetForm("queryRef"); - queryParams.value.pageNum = 1; - proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order); + dateRange.value = [] + proxy.resetForm("queryRef") + queryParams.value.pageNum = 1 + proxy.$refs["operlogRef"].sort(defaultSort.value.prop, defaultSort.value.order) } /** 澶氶�夋閫変腑鏁版嵁 */ function handleSelectionChange(selection) { - ids.value = selection.map(item => item.operId); - multiple.value = !selection.length; + ids.value = selection.map((item) => item.operId) + multiple.value = !selection.length } /** 鎺掑簭瑙﹀彂浜嬩欢 */ function handleSortChange(column, prop, order) { - queryParams.value.orderByColumn = column.prop; - queryParams.value.isAsc = column.order; - getList(); + queryParams.value.orderByColumn = column.prop + queryParams.value.isAsc = column.order + getList() } /** 璇︾粏鎸夐挳鎿嶄綔 */ function handleView(row) { - open.value = true; - form.value = row; + open.value = true + form.value = row } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const operIds = row.operId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎鏃ュ織缂栧彿涓�"' + operIds + '"鐨勬暟鎹」?').then(function () { - return delOperlog(operIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + const operIds = row.operId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎鏃ュ織缂栧彿涓�"' + operIds + '"鐨勬暟鎹」?') + .then(function () { + return delOperlog(operIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } /** 娓呯┖鎸夐挳鎿嶄綔 */ function handleClean() { - proxy.$modal.confirm("鏄惁纭娓呯┖鎵�鏈夋搷浣滄棩蹇楁暟鎹」?").then(function () { - return cleanOperlog(); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("娓呯┖鎴愬姛"); - }).catch(() => {}); + proxy.$modal + .confirm("鏄惁纭娓呯┖鎵�鏈夋搷浣滄棩蹇楁暟鎹」?") + .then(function () { + return cleanOperlog() + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("娓呯┖鎴愬姛") + }) + .catch(() => {}) } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download("monitor/operlog/export",{ - ...queryParams.value, - }, `config_${new Date().getTime()}.xlsx`); + proxy.download( + "monitor/operlog/export", + { + ...queryParams.value, + }, + `config_${new Date().getTime()}.xlsx` + ) } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/policy/knowledgebase/knowledgeBase.vue b/zhitan-vue/src/views/policy/knowledgebase/knowledgeBase.vue index ac9cc39..58a9c47 100644 --- a/zhitan-vue/src/views/policy/knowledgebase/knowledgeBase.vue +++ b/zhitan-vue/src/views/policy/knowledgebase/knowledgeBase.vue @@ -3,26 +3,24 @@ <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px"> <el-form-item label="鏍囬"> - <el-input v-model="queryParams.title" placeholder="璇疯緭鍏ユ爣棰�" clearable/> + <el-input v-model="queryParams.title" placeholder="璇疯緭鍏ユ爣棰�" clearable /> </el-form-item> <el-form-item label="鑳芥簮绫诲瀷"> - <el-select v-model="queryParams.type" placeholder="璇烽�夋嫨鑳芥簮绫诲瀷" style="width: 100%" clearable> - <el-option v-for="dict in types" :key="dict.value" - :label="dict.label" :value="dict.value" /> - </el-select> - </el-form-item> + <el-select v-model="queryParams.type" placeholder="璇烽�夋嫨鑳芥簮绫诲瀷" style="width: 100%" clearable> + <el-option v-for="dict in types" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> </el-form-item> </el-form> </div> <div class="table-bg-style"> - <div class="theme-dark-mt20 mb20 ml20"> - <el-button type="primary" icon="plus" @click="handleAdd">鏂板</el-button> - <!-- <el-button type="primary" icon="Delete">鍒犻櫎</el-button> --> - </div> <div class="table-box"> <el-table :data="tableData" v-loading="loading"> <el-table-column prop="title" label="鏍囬" show-overflow-tooltip align="center" /> @@ -46,26 +44,26 @@ /> </div> </div> - <edit-modal ref="EditModalRef" @getList="getList" :types="types" /> + <edit-modal ref="EditModalRef" @getList="getList" :types="types" /> </div> </template> <script setup> - import EditModal from "./components/EditModal.vue" -import { knowledgeBaseList, knowledgeBaseDel,knowledgeBaseInfo } from "@/api/policy/knowledgeBase" +import EditModal from "./components/EditModal.vue" +import { knowledgeBaseList, knowledgeBaseDel, knowledgeBaseInfo } from "@/api/policy/knowledgeBase" let { proxy } = getCurrentInstance() const types = ref([ { label: "鐢�", value: 0 }, { label: "姘�", value: 1 }, { label: "澶╃劧姘�", value: 2 }, { label: "钂告苯", value: 3 }, -]); +]) let loading = ref(false) let total = ref(0) let tableData = ref([]) let queryParams = ref({ title: "", - type:null, + type: null, pageNum: 1, pageSize: 10, }) @@ -85,14 +83,13 @@ let EditModalRef = ref("") function handleAdd(row) { if (EditModalRef.value) { - if(row.id){ + if (row.id) { knowledgeBaseInfo(row.id).then((res) => { EditModalRef.value.handleOpen(res.data) }) - }else{ + } else { EditModalRef.value.handleOpen(row) } - } } @@ -117,7 +114,7 @@ function resetQuery() { queryParams.value = { title: "", - type:null, + type: null, pageNum: 1, pageSize: 10, } diff --git a/zhitan-vue/src/views/powerquality/threephase/index.vue b/zhitan-vue/src/views/powerquality/threephase/index.vue index 496c460..3e723a1 100644 --- a/zhitan-vue/src/views/powerquality/threephase/index.vue +++ b/zhitan-vue/src/views/powerquality/threephase/index.vue @@ -39,13 +39,7 @@ /> </el-form-item> <el-form-item label="閫夋嫨鐢佃〃" prop="meterId"> - <el-select - v-model="queryParams.meterId" - placeholder="閫夋嫨鐢佃〃" - clearable - style="width: 200px" - @change="handleTimeType" - > + <el-select v-model="queryParams.meterId" placeholder="閫夋嫨鐢佃〃" clearable style="width: 200px"> <el-option v-for="dict in electricityMeter" :key="dict.value" @@ -64,7 +58,7 @@ </div> <div style="padding: 0 16px"> - <el-tabs v-model="activeTabKey" type="card"> + <el-tabs v-model="activeTabKey" type="card" @tab-change="handleTabChange" style="margin-top: 12px"> <el-tab-pane label="鐢靛帇涓嶅钩琛�" name="1"> </el-tab-pane> <el-tab-pane label="鐢垫祦涓嶅钩琛�" name="2"> </el-tab-pane> </el-tabs> @@ -80,7 +74,7 @@ <div class="chart-box" v-loading="loading" v-show="activeKey === 1"> <LineChart ref="LineChartRef" :chartData="lineChartData" /> - <el-table :data="tableData1" v-loading="loading"> + <el-table :data="tableData1" v-loading="loading" style="padding: 14px"> <el-table-column label="绫诲瀷" prop="type" align="center" /> <el-table-column label="涓夐」涓嶅钩琛℃瀬鍊�" prop="value" align="center" /> <el-table-column label="鍙戠敓鏃堕棿" prop="time" align="center" /> @@ -225,6 +219,11 @@ function handleTimeType(e) { queryParams.value.timeType = e queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD") + getList() +} + +function handleTabChange(e) { + getList() } function switchBtnType(e) { @@ -235,6 +234,13 @@ } // 鍒楄〃 function getList() { + if (!queryParams.value.meterId) { + // proxy.$message({ + // message: "璇烽�夋嫨鑺傜偣", + // type: "warning", + // }) + return + } loading.value = true let params = { nodeId: queryParams.value.nodeId, diff --git a/zhitan-vue/src/views/system/config/index.vue b/zhitan-vue/src/views/system/config/index.vue index 4aa86e0..e205d76 100644 --- a/zhitan-vue/src/views/system/config/index.vue +++ b/zhitan-vue/src/views/system/config/index.vue @@ -1,185 +1,190 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px"> - <el-form-item label="鍙傛暟鍚嶇О" prop="configName"> - <el-input - v-model="queryParams.configName" - placeholder="璇疯緭鍏ュ弬鏁板悕绉�" - clearable - style="width: 240px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鍙傛暟閿悕" prop="configKey"> - <el-input - v-model="queryParams.configKey" - placeholder="璇疯緭鍏ュ弬鏁伴敭鍚�" - clearable - style="width: 240px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="绯荤粺鍐呯疆" prop="configType"> - <el-select v-model="queryParams.configType" placeholder="绯荤粺鍐呯疆" clearable> - <el-option - v-for="dict in sys_yes_no" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="鍒涘缓鏃堕棿" style="width: 340px;"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - ></el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="鍙傛暟鍚嶇О" prop="configName"> + <el-input + v-model="queryParams.configName" + placeholder="璇疯緭鍏ュ弬鏁板悕绉�" + clearable + style="width: 240px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鍙傛暟閿悕" prop="configKey"> + <el-input + v-model="queryParams.configKey" + placeholder="璇疯緭鍏ュ弬鏁伴敭鍚�" + clearable + style="width: 240px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="绯荤粺鍐呯疆" prop="configType"> + <el-select v-model="queryParams.configType" placeholder="绯荤粺鍐呯疆" clearable> + <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鍒涘缓鏃堕棿" style="width: 340px"> + <el-date-picker + v-model="dateRange" + value-format="YYYY-MM-DD" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + ></el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> + <div class="table-bg-style"> + <div class="table-box" style="margin-top: 0"> + <el-row :gutter="10" class="mb8" style="margin-top: 8px"> + <el-col :span="1.5"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:config:add']" + >鏂板</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="primary" - plain - icon="Plus" - @click="handleAdd" - v-hasPermi="['system:config:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> + type="success" + plain + icon="Edit" + :disabled="single" + @click="handleUpdate" + v-hasPermi="['system:config:edit']" + >淇敼</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="success" - plain - icon="Edit" - :disabled="single" - @click="handleUpdate" - v-hasPermi="['system:config:edit']" - >淇敼</el-button> - </el-col> - <el-col :span="1.5"> + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['system:config:remove']" + >鍒犻櫎</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:config:export']" + >瀵煎嚭</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['system:config:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['system:config:export']" - >瀵煎嚭</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="Refresh" - @click="handleRefreshCache" - v-hasPermi="['system:config:remove']" - >鍒锋柊缂撳瓨</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> - - <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="鍙傛暟涓婚敭" align="center" prop="configId" /> - <el-table-column label="鍙傛暟鍚嶇О" align="center" prop="configName" :show-overflow-tooltip="true" /> - <el-table-column label="鍙傛暟閿悕" align="center" prop="configKey" :show-overflow-tooltip="true" /> - <el-table-column label="鍙傛暟閿��" align="center" prop="configValue" :show-overflow-tooltip="true" /> - <el-table-column label="绯荤粺鍐呯疆" align="center" prop="configType"> + type="danger" + plain + icon="Refresh" + @click="handleRefreshCache" + v-hasPermi="['system:config:remove']" + >鍒锋柊缂撳瓨</el-button + > + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="鍙傛暟涓婚敭" align="center" prop="configId" /> + <el-table-column label="鍙傛暟鍚嶇О" align="center" prop="configName" :show-overflow-tooltip="true" /> + <el-table-column label="鍙傛暟閿悕" align="center" prop="configKey" :show-overflow-tooltip="true" /> + <el-table-column label="鍙傛暟閿��" align="center" prop="configValue" :show-overflow-tooltip="true" /> + <el-table-column label="绯荤粺鍐呯疆" align="center" prop="configType"> <template #default="scope"> - <dict-tag :options="sys_yes_no" :value="scope.row.configType" /> + <dict-tag :options="sys_yes_no" :value="scope.row.configType" /> </template> - </el-table-column> - <el-table-column label="澶囨敞" align="center" prop="remark" :show-overflow-tooltip="true" /> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> + </el-table-column> + <el-table-column label="澶囨敞" align="center" prop="remark" :show-overflow-tooltip="true" /> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> + <span>{{ parseTime(scope.row.createTime) }}</span> </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" width="150" class-name="small-padding fixed-width"> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" width="150" class-name="small-padding fixed-width"> <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:config:edit']" >淇敼</el-button> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:config:remove']">鍒犻櫎</el-button> + <el-button + link + type="primary" + icon="Edit" + @click="handleUpdate(scope.row)" + v-hasPermi="['system:config:edit']" + >淇敼</el-button + > + <el-button + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['system:config:remove']" + >鍒犻櫎</el-button + > </template> - </el-table-column> - </el-table> + </el-table-column> + </el-table> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> + </div> - <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 --> - <el-dialog :title="title" v-model="open" width="500px" append-to-body> - <el-form ref="configRef" :model="form" :rules="rules" label-width="100px"> - <el-form-item label="鍙傛暟鍚嶇О" prop="configName"> - <el-input v-model="form.configName" placeholder="璇疯緭鍏ュ弬鏁板悕绉�" /> - </el-form-item> - <el-form-item label="鍙傛暟閿悕" prop="configKey"> - <el-input v-model="form.configKey" placeholder="璇疯緭鍏ュ弬鏁伴敭鍚�" /> - </el-form-item> - <el-form-item label="鍙傛暟閿��" prop="configValue"> - <el-input v-model="form.configValue" placeholder="璇疯緭鍏ュ弬鏁伴敭鍊�" /> - </el-form-item> - <el-form-item label="绯荤粺鍐呯疆" prop="configType"> - <el-radio-group v-model="form.configType"> - <el-radio - v-for="dict in sys_yes_no" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item label="澶囨敞" prop="remark"> - <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" /> - </el-form-item> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 --> + <el-dialog :title="title" v-model="open" width="500px" append-to-body> + <el-form ref="configRef" :model="form" :rules="rules" label-width="100px"> + <el-form-item label="鍙傛暟鍚嶇О" prop="configName"> + <el-input v-model="form.configName" placeholder="璇疯緭鍏ュ弬鏁板悕绉�" /> + </el-form-item> + <el-form-item label="鍙傛暟閿悕" prop="configKey"> + <el-input v-model="form.configKey" placeholder="璇疯緭鍏ュ弬鏁伴敭鍚�" /> + </el-form-item> + <el-form-item label="鍙傛暟閿��" prop="configValue"> + <el-input v-model="form.configValue" placeholder="璇疯緭鍏ュ弬鏁伴敭鍊�" /> + </el-form-item> + <el-form-item label="绯荤粺鍐呯疆" prop="configType"> + <el-radio-group v-model="form.configType"> + <el-radio v-for="dict in sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="澶囨敞" prop="remark"> + <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" /> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="Config"> -import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config"; +import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config" -const { proxy } = getCurrentInstance(); -const { sys_yes_no } = proxy.useDict("sys_yes_no"); +const { proxy } = getCurrentInstance() +const { sys_yes_no } = proxy.useDict("sys_yes_no") -const configList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const total = ref(0); -const title = ref(""); -const dateRange = ref([]); +const configList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") +const dateRange = ref([]) const data = reactive({ form: {}, @@ -188,30 +193,30 @@ pageSize: 10, configName: undefined, configKey: undefined, - configType: undefined + configType: undefined, }, rules: { configName: [{ required: true, message: "鍙傛暟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], configKey: [{ required: true, message: "鍙傛暟閿悕涓嶈兘涓虹┖", trigger: "blur" }], - configValue: [{ required: true, message: "鍙傛暟閿�间笉鑳戒负绌�", trigger: "blur" }] - } -}); + configValue: [{ required: true, message: "鍙傛暟閿�间笉鑳戒负绌�", trigger: "blur" }], + }, +}) -const { queryParams, form, rules } = toRefs(data); +const { queryParams, form, rules } = toRefs(data) /** 鏌ヨ鍙傛暟鍒楄〃 */ function getList() { - loading.value = true; - listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => { - configList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + listConfig(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => { + configList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 鍙栨秷鎸夐挳 */ function cancel() { - open.value = false; - reset(); + open.value = false + reset() } /** 琛ㄥ崟閲嶇疆 */ function reset() { @@ -221,85 +226,97 @@ configKey: undefined, configValue: undefined, configType: "Y", - remark: undefined - }; - proxy.resetForm("configRef"); + remark: undefined, + } + proxy.resetForm("configRef") } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - dateRange.value = []; - proxy.resetForm("queryRef"); - handleQuery(); + dateRange.value = [] + proxy.resetForm("queryRef") + handleQuery() } /** 澶氶�夋閫変腑鏁版嵁 */ function handleSelectionChange(selection) { - ids.value = selection.map(item => item.configId); - single.value = selection.length != 1; - multiple.value = !selection.length; + ids.value = selection.map((item) => item.configId) + single.value = selection.length != 1 + multiple.value = !selection.length } /** 鏂板鎸夐挳鎿嶄綔 */ function handleAdd() { - reset(); - open.value = true; - title.value = "娣诲姞鍙傛暟"; + reset() + open.value = true + title.value = "娣诲姞鍙傛暟" } /** 淇敼鎸夐挳鎿嶄綔 */ function handleUpdate(row) { - reset(); - const configId = row.configId || ids.value; - getConfig(configId).then(response => { - form.value = response.data; - open.value = true; - title.value = "淇敼鍙傛暟"; - }); + reset() + const configId = row.configId || ids.value + getConfig(configId).then((response) => { + form.value = response.data + open.value = true + title.value = "淇敼鍙傛暟" + }) } /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["configRef"].validate(valid => { + proxy.$refs["configRef"].validate((valid) => { if (valid) { if (form.value.configId != undefined) { - updateConfig(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + updateConfig(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { - addConfig(form.value).then(response => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + addConfig(form.value).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const configIds = row.configId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎鍙傛暟缂栧彿涓�"' + configIds + '"鐨勬暟鎹」锛�').then(function () { - return delConfig(configIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + const configIds = row.configId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎鍙傛暟缂栧彿涓�"' + configIds + '"鐨勬暟鎹」锛�') + .then(function () { + return delConfig(configIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download("system/config/export", { - ...queryParams.value - }, `config_${new Date().getTime()}.xlsx`); + proxy.download( + "system/config/export", + { + ...queryParams.value, + }, + `config_${new Date().getTime()}.xlsx` + ) } /** 鍒锋柊缂撳瓨鎸夐挳鎿嶄綔 */ function handleRefreshCache() { refreshCache().then(() => { - proxy.$modal.msgSuccess("鍒锋柊缂撳瓨鎴愬姛"); - }); + proxy.$modal.msgSuccess("鍒锋柊缂撳瓨鎴愬姛") + }) } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/system/dept/index.vue b/zhitan-vue/src/views/system/dept/index.vue index d073a26..e24a654 100644 --- a/zhitan-vue/src/views/system/dept/index.vue +++ b/zhitan-vue/src/views/system/dept/index.vue @@ -1,189 +1,190 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> - <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName"> - <el-input - v-model="queryParams.deptName" - placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-select v-model="queryParams.status" placeholder="閮ㄩ棬鐘舵��" clearable style="width: 200px"> - <el-option - v-for="dict in 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="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName"> + <el-input + v-model="queryParams.deptName" + placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐘舵��" prop="status"> + <el-select v-model="queryParams.status" placeholder="閮ㄩ棬鐘舵��" clearable style="width: 200px"> + <el-option v-for="dict in 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="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dept:add']" + >鏂板</el-button + > + <el-button type="info" plain icon="Sort" @click="toggleExpandAll">灞曞紑/鎶樺彔</el-button> + </el-form-item> </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="Plus" - @click="handleAdd" - v-hasPermi="['system:dept:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="info" - plain - icon="Sort" - @click="toggleExpandAll" - >灞曞紑/鎶樺彔</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + <div class="table-bg-style"> + <div class="table-box"> + <el-table + v-if="refreshTable" + v-loading="loading" + :data="deptList" + row-key="deptId" + :default-expand-all="isExpandAll" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" + > + <el-table-column prop="deptName" label="閮ㄩ棬鍚嶇О" width="260"></el-table-column> + <el-table-column prop="orderNum" label="鎺掑簭" width="200"></el-table-column> + <el-table-column prop="status" label="鐘舵��" width="100"> + <template #default="scope"> + <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> + </template> + </el-table-column> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="200"> + <template #default="scope"> + <span>{{ parseTime(scope.row.createTime) }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-button + link + type="primary" + icon="Edit" + @click="handleUpdate(scope.row)" + v-hasPermi="['system:dept:edit']" + >淇敼</el-button + > + <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']" + >鏂板</el-button + > + <el-button + v-if="scope.row.parentId != 0" + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['system:dept:remove']" + >鍒犻櫎</el-button + > + </template> + </el-table-column> + </el-table> + </div> + </div> - <el-table - v-if="refreshTable" - v-loading="loading" - :data="deptList" - row-key="deptId" - :default-expand-all="isExpandAll" - :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" - > - <el-table-column prop="deptName" label="閮ㄩ棬鍚嶇О" width="260"></el-table-column> - <el-table-column prop="orderNum" label="鎺掑簭" width="200"></el-table-column> - <el-table-column prop="status" label="鐘舵��" width="100"> - <template #default="scope"> - <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> - </template> - </el-table-column> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="200"> - <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">淇敼</el-button> - <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">鏂板</el-button> - <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">鍒犻櫎</el-button> - </template> - </el-table-column> - </el-table> - - <!-- 娣诲姞鎴栦慨鏀归儴闂ㄥ璇濇 --> - <el-dialog :title="title" v-model="open" width="600px" append-to-body> - <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px"> - <el-row> - <el-col :span="24" v-if="form.parentId !== 0"> - <el-form-item label="涓婄骇閮ㄩ棬" prop="parentId"> - <el-tree-select - v-model="form.parentId" - :data="deptOptions" - :props="{ value: 'deptId', label: 'deptName', children: 'children' }" - value-key="deptId" - placeholder="閫夋嫨涓婄骇閮ㄩ棬" - check-strictly - /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName"> - <el-input v-model="form.deptName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鏄剧ず鎺掑簭" prop="orderNum"> - <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="璐熻矗浜�" prop="leader"> - <el-input v-model="form.leader" placeholder="璇疯緭鍏ヨ礋璐d汉" maxlength="20" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鑱旂郴鐢佃瘽" prop="phone"> - <el-input v-model="form.phone" placeholder="璇疯緭鍏ヨ仈绯荤數璇�" maxlength="11" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="閭" prop="email"> - <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�" maxlength="50" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="閮ㄩ棬鐘舵��"> - <el-radio-group v-model="form.status"> - <el-radio - v-for="dict in sys_normal_disable" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 娣诲姞鎴栦慨鏀归儴闂ㄥ璇濇 --> + <el-dialog :title="title" v-model="open" width="600px" append-to-body> + <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px"> + <el-row> + <el-col :span="24" v-if="form.parentId !== 0"> + <el-form-item label="涓婄骇閮ㄩ棬" prop="parentId"> + <el-tree-select + v-model="form.parentId" + :data="deptOptions" + :props="{ value: 'deptId', label: 'deptName', children: 'children' }" + value-key="deptId" + placeholder="閫夋嫨涓婄骇閮ㄩ棬" + check-strictly + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="閮ㄩ棬鍚嶇О" prop="deptName"> + <el-input v-model="form.deptName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鏄剧ず鎺掑簭" prop="orderNum"> + <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="璐熻矗浜�" prop="leader"> + <el-input v-model="form.leader" placeholder="璇疯緭鍏ヨ礋璐d汉" maxlength="20" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鑱旂郴鐢佃瘽" prop="phone"> + <el-input v-model="form.phone" placeholder="璇疯緭鍏ヨ仈绯荤數璇�" maxlength="11" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="閭" prop="email"> + <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�" maxlength="50" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="閮ㄩ棬鐘舵��"> + <el-radio-group v-model="form.status"> + <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ + dict.label + }}</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="Dept"> -import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"; +import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept" -const { proxy } = getCurrentInstance(); -const { sys_normal_disable } = proxy.useDict("sys_normal_disable"); +const { proxy } = getCurrentInstance() +const { sys_normal_disable } = proxy.useDict("sys_normal_disable") -const deptList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const title = ref(""); -const deptOptions = ref([]); -const isExpandAll = ref(true); -const refreshTable = ref(true); +const deptList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const title = ref("") +const deptOptions = ref([]) +const isExpandAll = ref(true) +const refreshTable = ref(true) const data = reactive({ form: {}, queryParams: { deptName: undefined, - status: undefined + status: undefined, }, rules: { parentId: [{ required: true, message: "涓婄骇閮ㄩ棬涓嶈兘涓虹┖", trigger: "blur" }], deptName: [{ required: true, message: "閮ㄩ棬鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], orderNum: [{ required: true, message: "鏄剧ず鎺掑簭涓嶈兘涓虹┖", trigger: "blur" }], email: [{ type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] }], - phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }] + phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }], }, -}); +}) -const { queryParams, form, rules } = toRefs(data); +const { queryParams, form, rules } = toRefs(data) /** 鏌ヨ閮ㄩ棬鍒楄〃 */ function getList() { - loading.value = true; - listDept(queryParams.value).then(response => { - deptList.value = proxy.handleTree(response.data, "deptId"); - loading.value = false; - }); + loading.value = true + listDept(queryParams.value).then((response) => { + deptList.value = proxy.handleTree(response.data, "deptId") + loading.value = false + }) } /** 鍙栨秷鎸夐挳 */ function cancel() { - open.value = false; - reset(); + open.value = false + reset() } /** 琛ㄥ崟閲嶇疆 */ function reset() { @@ -195,80 +196,88 @@ leader: undefined, phone: undefined, email: undefined, - status: "0" - }; - proxy.resetForm("deptRef"); + status: "0", + } + proxy.resetForm("deptRef") } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - getList(); + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - proxy.resetForm("queryRef"); - handleQuery(); + proxy.resetForm("queryRef") + handleQuery() } /** 鏂板鎸夐挳鎿嶄綔 */ function handleAdd(row) { - reset(); - listDept().then(response => { - deptOptions.value = proxy.handleTree(response.data, "deptId"); - }); + reset() + listDept().then((response) => { + deptOptions.value = proxy.handleTree(response.data, "deptId") + }) if (row != undefined) { - form.value.parentId = row.deptId; + form.value.parentId = row.deptId } - open.value = true; - title.value = "娣诲姞閮ㄩ棬"; + open.value = true + title.value = "娣诲姞閮ㄩ棬" } /** 灞曞紑/鎶樺彔鎿嶄綔 */ function toggleExpandAll() { - refreshTable.value = false; - isExpandAll.value = !isExpandAll.value; + refreshTable.value = false + isExpandAll.value = !isExpandAll.value nextTick(() => { - refreshTable.value = true; - }); + refreshTable.value = true + }) } /** 淇敼鎸夐挳鎿嶄綔 */ function handleUpdate(row) { - reset(); - listDeptExcludeChild(row.deptId).then(response => { - deptOptions.value = proxy.handleTree(response.data, "deptId"); - }); - getDept(row.deptId).then(response => { - form.value = response.data; - open.value = true; - title.value = "淇敼閮ㄩ棬"; - }); + reset() + listDeptExcludeChild(row.deptId).then((response) => { + deptOptions.value = proxy.handleTree(response.data, "deptId") + }) + getDept(row.deptId).then((response) => { + form.value = response.data + open.value = true + title.value = "淇敼閮ㄩ棬" + }) } /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["deptRef"].validate(valid => { + proxy.$refs["deptRef"].validate((valid) => { if (valid) { if (form.value.deptId != undefined) { - updateDept(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + updateDept(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { - addDept(form.value).then(response => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + addDept(form.value).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - proxy.$modal.confirm('鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.deptName + '"鐨勬暟鎹」?').then(function() { - return delDept(row.deptId); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + proxy.$modal + .confirm('鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.deptName + '"鐨勬暟鎹」?') + .then(function () { + return delDept(row.deptId) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/system/dict/index.vue b/zhitan-vue/src/views/system/dict/index.vue index 574955b..acd90cd 100644 --- a/zhitan-vue/src/views/system/dict/index.vue +++ b/zhitan-vue/src/views/system/dict/index.vue @@ -1,193 +1,195 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px"> - <el-form-item label="瀛楀吀鍚嶇О" prop="dictName"> - <el-input - v-model="queryParams.dictName" - placeholder="璇疯緭鍏ュ瓧鍏稿悕绉�" - clearable - style="width: 240px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="瀛楀吀绫诲瀷" prop="dictType"> - <el-input - v-model="queryParams.dictType" - placeholder="璇疯緭鍏ュ瓧鍏哥被鍨�" - clearable - style="width: 240px" - @keyup.enter="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 sys_normal_disable" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - ></el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="瀛楀吀鍚嶇О" prop="dictName"> + <el-input + v-model="queryParams.dictName" + placeholder="璇疯緭鍏ュ瓧鍏稿悕绉�" + clearable + style="width: 240px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="瀛楀吀绫诲瀷" prop="dictType"> + <el-input + v-model="queryParams.dictType" + placeholder="璇疯緭鍏ュ瓧鍏哥被鍨�" + clearable + style="width: 240px" + @keyup.enter="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 sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px"> + <el-date-picker + v-model="dateRange" + value-format="YYYY-MM-DD" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + ></el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> + <div class="table-bg-style"> + <div class="table-box" style="margin-top: 0"> + <el-row :gutter="10" class="mb8" style="margin-top: 8px"> + <el-col :span="1.5"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:dict:add']" + >鏂板</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="primary" - plain - icon="Plus" - @click="handleAdd" - v-hasPermi="['system:dict:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> + type="success" + plain + icon="Edit" + :disabled="single" + @click="handleUpdate" + v-hasPermi="['system:dict:edit']" + >淇敼</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="success" - plain - icon="Edit" - :disabled="single" - @click="handleUpdate" - v-hasPermi="['system:dict:edit']" - >淇敼</el-button> - </el-col> - <el-col :span="1.5"> + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['system:dict:remove']" + >鍒犻櫎</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:dict:export']" + >瀵煎嚭</el-button + > + </el-col> + <el-col :span="1.5"> <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['system:dict:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['system:dict:export']" - >瀵煎嚭</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="Refresh" - @click="handleRefreshCache" - v-hasPermi="['system:dict:remove']" - >鍒锋柊缂撳瓨</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + type="danger" + plain + icon="Refresh" + @click="handleRefreshCache" + v-hasPermi="['system:dict:remove']" + >鍒锋柊缂撳瓨</el-button + > + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="瀛楀吀缂栧彿" align="center" prop="dictId" /> + <el-table-column label="瀛楀吀鍚嶇О" align="center" prop="dictName" :show-overflow-tooltip="true" /> + <el-table-column label="瀛楀吀绫诲瀷" align="center" :show-overflow-tooltip="true"> + <template #default="scope"> + <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type"> + <span>{{ scope.row.dictType }}</span> + </router-link> + </template> + </el-table-column> + <el-table-column label="鐘舵��" align="center" prop="status"> + <template #default="scope"> + <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> + </template> + </el-table-column> + <el-table-column label="澶囨敞" align="center" prop="remark" :show-overflow-tooltip="true" /> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> + <template #default="scope"> + <span>{{ parseTime(scope.row.createTime) }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" width="160" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-button + link + type="primary" + icon="Edit" + @click="handleUpdate(scope.row)" + v-hasPermi="['system:dict:edit']" + >淇敼</el-button + > + <el-button + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['system:dict:remove']" + >鍒犻櫎</el-button + > + </template> + </el-table-column> + </el-table> - <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="瀛楀吀缂栧彿" align="center" prop="dictId" /> - <el-table-column label="瀛楀吀鍚嶇О" align="center" prop="dictName" :show-overflow-tooltip="true"/> - <el-table-column label="瀛楀吀绫诲瀷" align="center" :show-overflow-tooltip="true"> - <template #default="scope"> - <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type"> - <span>{{ scope.row.dictType }}</span> - </router-link> - </template> - </el-table-column> - <el-table-column label="鐘舵��" align="center" prop="status"> - <template #default="scope"> - <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> - </template> - </el-table-column> - <el-table-column label="澶囨敞" align="center" prop="remark" :show-overflow-tooltip="true" /> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> - <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" width="160" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">淇敼</el-button> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">鍒犻櫎</el-button> - </template> - </el-table-column> - </el-table> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> + </div> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> - - <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 --> - <el-dialog :title="title" v-model="open" width="500px" append-to-body> - <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px"> - <el-form-item label="瀛楀吀鍚嶇О" prop="dictName"> - <el-input v-model="form.dictName" placeholder="璇疯緭鍏ュ瓧鍏稿悕绉�" /> - </el-form-item> - <el-form-item label="瀛楀吀绫诲瀷" prop="dictType"> - <el-input v-model="form.dictType" placeholder="璇疯緭鍏ュ瓧鍏哥被鍨�" /> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-radio-group v-model="form.status"> - <el-radio - v-for="dict in sys_normal_disable" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item label="澶囨敞" prop="remark"> - <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> - </el-form-item> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 --> + <el-dialog :title="title" v-model="open" width="500px" append-to-body> + <el-form ref="dictRef" :model="form" :rules="rules" label-width="80px"> + <el-form-item label="瀛楀吀鍚嶇О" prop="dictName"> + <el-input v-model="form.dictName" placeholder="璇疯緭鍏ュ瓧鍏稿悕绉�" /> + </el-form-item> + <el-form-item label="瀛楀吀绫诲瀷" prop="dictType"> + <el-input v-model="form.dictType" placeholder="璇疯緭鍏ュ瓧鍏哥被鍨�" /> + </el-form-item> + <el-form-item label="鐘舵��" prop="status"> + <el-radio-group v-model="form.status"> + <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ + dict.label + }}</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="澶囨敞" prop="remark"> + <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="Dict"> -import useDictStore from '@/store/modules/dict' -import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type"; +import useDictStore from "@/store/modules/dict" +import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type" -const { proxy } = getCurrentInstance(); -const { sys_normal_disable } = proxy.useDict("sys_normal_disable"); +const { proxy } = getCurrentInstance() +const { sys_normal_disable } = proxy.useDict("sys_normal_disable") -const typeList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const total = ref(0); -const title = ref(""); -const dateRange = ref([]); +const typeList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") +const dateRange = ref([]) const data = reactive({ form: {}, @@ -196,29 +198,29 @@ pageSize: 10, dictName: undefined, dictType: undefined, - status: undefined + status: undefined, }, rules: { dictName: [{ required: true, message: "瀛楀吀鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], - dictType: [{ required: true, message: "瀛楀吀绫诲瀷涓嶈兘涓虹┖", trigger: "blur" }] + dictType: [{ required: true, message: "瀛楀吀绫诲瀷涓嶈兘涓虹┖", trigger: "blur" }], }, -}); +}) -const { queryParams, form, rules } = toRefs(data); +const { queryParams, form, rules } = toRefs(data) /** 鏌ヨ瀛楀吀绫诲瀷鍒楄〃 */ function getList() { - loading.value = true; - listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => { - typeList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + listType(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => { + typeList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 鍙栨秷鎸夐挳 */ function cancel() { - open.value = false; - reset(); + open.value = false + reset() } /** 琛ㄥ崟閲嶇疆 */ function reset() { @@ -227,86 +229,98 @@ dictName: undefined, dictType: undefined, status: "0", - remark: undefined - }; - proxy.resetForm("dictRef"); + remark: undefined, + } + proxy.resetForm("dictRef") } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - dateRange.value = []; - proxy.resetForm("queryRef"); - handleQuery(); + dateRange.value = [] + proxy.resetForm("queryRef") + handleQuery() } /** 鏂板鎸夐挳鎿嶄綔 */ function handleAdd() { - reset(); - open.value = true; - title.value = "娣诲姞瀛楀吀绫诲瀷"; + reset() + open.value = true + title.value = "娣诲姞瀛楀吀绫诲瀷" } /** 澶氶�夋閫変腑鏁版嵁 */ function handleSelectionChange(selection) { - ids.value = selection.map(item => item.dictId); - single.value = selection.length != 1; - multiple.value = !selection.length; + ids.value = selection.map((item) => item.dictId) + single.value = selection.length != 1 + multiple.value = !selection.length } /** 淇敼鎸夐挳鎿嶄綔 */ function handleUpdate(row) { - reset(); - const dictId = row.dictId || ids.value; - getType(dictId).then(response => { - form.value = response.data; - open.value = true; - title.value = "淇敼瀛楀吀绫诲瀷"; - }); + reset() + const dictId = row.dictId || ids.value + getType(dictId).then((response) => { + form.value = response.data + open.value = true + title.value = "淇敼瀛楀吀绫诲瀷" + }) } /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["dictRef"].validate(valid => { + proxy.$refs["dictRef"].validate((valid) => { if (valid) { if (form.value.dictId != undefined) { - updateType(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + updateType(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { - addType(form.value).then(response => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + addType(form.value).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const dictIds = row.dictId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎瀛楀吀缂栧彿涓�"' + dictIds + '"鐨勬暟鎹」锛�').then(function() { - return delType(dictIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + const dictIds = row.dictId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎瀛楀吀缂栧彿涓�"' + dictIds + '"鐨勬暟鎹」锛�') + .then(function () { + return delType(dictIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download("system/dict/type/export", { - ...queryParams.value - }, `dict_${new Date().getTime()}.xlsx`); + proxy.download( + "system/dict/type/export", + { + ...queryParams.value, + }, + `dict_${new Date().getTime()}.xlsx` + ) } /** 鍒锋柊缂撳瓨鎸夐挳鎿嶄綔 */ function handleRefreshCache() { refreshCache().then(() => { - proxy.$modal.msgSuccess("鍒锋柊鎴愬姛"); - useDictStore().cleanDict(); - }); + proxy.$modal.msgSuccess("鍒锋柊鎴愬姛") + useDictStore().cleanDict() + }) } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/system/menu/index.vue b/zhitan-vue/src/views/system/menu/index.vue index bb486e9..b397474 100644 --- a/zhitan-vue/src/views/system/menu/index.vue +++ b/zhitan-vue/src/views/system/menu/index.vue @@ -1,334 +1,337 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> - <el-form-item label="鑿滃崟鍚嶇О" prop="menuName"> - <el-input - v-model="queryParams.menuName" - placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-select v-model="queryParams.status" placeholder="鑿滃崟鐘舵��" clearable style="width: 200px"> - <el-option - v-for="dict in 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="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="鑿滃崟鍚嶇О" prop="menuName"> + <el-input + v-model="queryParams.menuName" + placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐘舵��" prop="status"> + <el-select v-model="queryParams.status" placeholder="鑿滃崟鐘舵��" clearable style="width: 200px"> + <el-option v-for="dict in 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="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + <el-form-item style="float: right"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:menu:add']" + >鏂板</el-button + > + <el-button type="info" plain icon="Sort" @click="toggleExpandAll">灞曞紑/鎶樺彔</el-button> + </el-form-item> </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="Plus" - @click="handleAdd" - v-hasPermi="['system:menu:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="info" - plain - icon="Sort" - @click="toggleExpandAll" - >灞曞紑/鎶樺彔</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + <div class="table-bg-style"> + <div class="table-box"> + <el-table + v-if="refreshTable" + v-loading="loading" + :data="menuList" + row-key="menuId" + :default-expand-all="isExpandAll" + :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" + > + <el-table-column prop="menuName" label="鑿滃崟鍚嶇О" :show-overflow-tooltip="true" width="160"></el-table-column> + <el-table-column prop="icon" label="鍥炬爣" align="center" width="100"> + <template #default="scope"> + <svg-icon :icon-class="scope.row.icon" /> + </template> + </el-table-column> + <el-table-column prop="orderNum" label="鎺掑簭" width="60"></el-table-column> + <el-table-column prop="perms" label="鏉冮檺鏍囪瘑" :show-overflow-tooltip="true"></el-table-column> + <el-table-column prop="component" label="缁勪欢璺緞" :show-overflow-tooltip="true"></el-table-column> + <el-table-column prop="status" label="鐘舵��" width="80"> + <template #default="scope"> + <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> + </template> + </el-table-column> + <el-table-column label="鍒涘缓鏃堕棿" align="center" width="160" prop="createTime"> + <template #default="scope"> + <span>{{ parseTime(scope.row.createTime) }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" width="210" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-button + link + type="primary" + icon="Edit" + @click="handleUpdate(scope.row)" + v-hasPermi="['system:menu:edit']" + >淇敼</el-button + > + <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" + >鏂板</el-button + > + <el-button + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['system:menu:remove']" + >鍒犻櫎</el-button + > + </template> + </el-table-column> + </el-table> + </div> + </div> - <el-table - v-if="refreshTable" - v-loading="loading" - :data="menuList" - row-key="menuId" - :default-expand-all="isExpandAll" - :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" - > - <el-table-column prop="menuName" label="鑿滃崟鍚嶇О" :show-overflow-tooltip="true" width="160"></el-table-column> - <el-table-column prop="icon" label="鍥炬爣" align="center" width="100"> - <template #default="scope"> - <svg-icon :icon-class="scope.row.icon" /> - </template> - </el-table-column> - <el-table-column prop="orderNum" label="鎺掑簭" width="60"></el-table-column> - <el-table-column prop="perms" label="鏉冮檺鏍囪瘑" :show-overflow-tooltip="true"></el-table-column> - <el-table-column prop="component" label="缁勪欢璺緞" :show-overflow-tooltip="true"></el-table-column> - <el-table-column prop="status" label="鐘舵��" width="80"> - <template #default="scope"> - <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> - </template> - </el-table-column> - <el-table-column label="鍒涘缓鏃堕棿" align="center" width="160" prop="createTime"> - <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" width="210" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">淇敼</el-button> - <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">鏂板</el-button> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">鍒犻櫎</el-button> - </template> - </el-table-column> - </el-table> - - <!-- 娣诲姞鎴栦慨鏀硅彍鍗曞璇濇 --> - <el-dialog :title="title" v-model="open" width="680px" append-to-body> - <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px"> - <el-row> - <el-col :span="24"> - <el-form-item label="涓婄骇鑿滃崟"> - <el-tree-select - v-model="form.parentId" - :data="menuOptions" - :props="{ value: 'menuId', label: 'menuName', children: 'children' }" - value-key="menuId" - placeholder="閫夋嫨涓婄骇鑿滃崟" - check-strictly - /> - </el-form-item> - </el-col> - <el-col :span="24"> - <el-form-item label="鑿滃崟绫诲瀷" prop="menuType"> - <el-radio-group v-model="form.menuType"> - <el-radio label="M">鐩綍</el-radio> - <el-radio label="C">鑿滃崟</el-radio> - <el-radio label="F">鎸夐挳</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - <el-col :span="24" v-if="form.menuType != 'F'"> - <el-form-item label="鑿滃崟鍥炬爣" prop="icon"> - <el-popover - placement="bottom-start" - :width="540" - trigger="click" - > - <template #reference> - <el-input v-model="form.icon" placeholder="鐐瑰嚮閫夋嫨鍥炬爣" @blur="showSelectIcon" readonly> - <template #prefix> - <svg-icon - v-if="form.icon" - :icon-class="form.icon" - class="el-input__icon" - style="height: 32px;width: 16px;" - /> - <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon> - </template> - </el-input> - </template> - <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" /> - </el-popover> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鑿滃崟鍚嶇О" prop="menuName"> - <el-input v-model="form.menuName" placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鏄剧ず鎺掑簭" prop="orderNum"> - <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> - </el-form-item> - </el-col> - <el-col :span="12" v-if="form.menuType != 'F'"> - <el-form-item> - <template #label> - <span> - <el-tooltip content="閫夋嫨鏄閾惧垯璺敱鍦板潃闇�瑕佷互`http(s)://`寮�澶�" placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip>鏄惁澶栭摼 - </span> - </template> - <el-radio-group v-model="form.isFrame"> - <el-radio label="0">鏄�</el-radio> - <el-radio label="1">鍚�</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - <el-col :span="12" v-if="form.menuType != 'F'"> - <el-form-item prop="path"> - <template #label> - <span> - <el-tooltip content="璁块棶鐨勮矾鐢卞湴鍧�锛屽锛歚user`锛屽澶栫綉鍦板潃闇�鍐呴摼璁块棶鍒欎互`http(s)://`寮�澶�" placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip> - 璺敱鍦板潃 - </span> - </template> - <el-input v-model="form.path" placeholder="璇疯緭鍏ヨ矾鐢卞湴鍧�" /> - </el-form-item> - </el-col> - <el-col :span="12" v-if="form.menuType == 'C'"> - <el-form-item prop="component"> - <template #label> - <span> - <el-tooltip content="璁块棶鐨勭粍浠惰矾寰勶紝濡傦細`system/user/index`锛岄粯璁ゅ湪`views`鐩綍涓�" placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip> - 缁勪欢璺緞 - </span> - </template> - <el-input v-model="form.component" placeholder="璇疯緭鍏ョ粍浠惰矾寰�" /> - </el-form-item> - </el-col> - <el-col :span="12" v-if="form.menuType != 'M'"> - <el-form-item> - <el-input v-model="form.perms" placeholder="璇疯緭鍏ユ潈闄愭爣璇�" maxlength="100" /> - <template #label> - <span> - <el-tooltip content="鎺у埗鍣ㄤ腑瀹氫箟鐨勬潈闄愬瓧绗︼紝濡傦細@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip> - 鏉冮檺瀛楃 - </span> - </template> - </el-form-item> - </el-col> - <el-col :span="12" v-if="form.menuType == 'C'"> - <el-form-item> - <el-input v-model="form.query" placeholder="璇疯緭鍏ヨ矾鐢卞弬鏁�" maxlength="255" /> - <template #label> - <span> - <el-tooltip content='璁块棶璺敱鐨勯粯璁や紶閫掑弬鏁帮紝濡傦細`{"id": 1, "name": "ry"}`' placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip> - 璺敱鍙傛暟 - </span> - </template> - </el-form-item> - </el-col> - <el-col :span="12" v-if="form.menuType == 'C'"> - <el-form-item> - <template #label> - <span> - <el-tooltip content="閫夋嫨鏄垯浼氳`keep-alive`缂撳瓨锛岄渶瑕佸尮閰嶇粍浠剁殑`name`鍜屽湴鍧�淇濇寔涓�鑷�" placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip> - 鏄惁缂撳瓨 - </span> - </template> - <el-radio-group v-model="form.isCache"> - <el-radio label="0">缂撳瓨</el-radio> - <el-radio label="1">涓嶇紦瀛�</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - <el-col :span="12" v-if="form.menuType != 'F'"> - <el-form-item> - <template #label> - <span> - <el-tooltip content="閫夋嫨闅愯棌鍒欒矾鐢卞皢涓嶄細鍑虹幇鍦ㄤ晶杈规爮锛屼絾浠嶇劧鍙互璁块棶" placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip> - 鏄剧ず鐘舵�� - </span> - </template> - <el-radio-group v-model="form.visible"> - <el-radio - v-for="dict in sys_show_hide" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item> - <template #label> - <span> - <el-tooltip content="閫夋嫨鍋滅敤鍒欒矾鐢卞皢涓嶄細鍑虹幇鍦ㄤ晶杈规爮锛屼篃涓嶈兘琚闂�" placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip> - 鑿滃崟鐘舵�� - </span> - </template> - <el-radio-group v-model="form.status"> - <el-radio - v-for="dict in sys_normal_disable" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 娣诲姞鎴栦慨鏀硅彍鍗曞璇濇 --> + <el-dialog :title="title" v-model="open" width="680px" append-to-body> + <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px"> + <el-row> + <el-col :span="24"> + <el-form-item label="涓婄骇鑿滃崟"> + <el-tree-select + v-model="form.parentId" + :data="menuOptions" + :props="{ value: 'menuId', label: 'menuName', children: 'children' }" + value-key="menuId" + placeholder="閫夋嫨涓婄骇鑿滃崟" + check-strictly + /> + </el-form-item> + </el-col> + <el-col :span="24"> + <el-form-item label="鑿滃崟绫诲瀷" prop="menuType"> + <el-radio-group v-model="form.menuType"> + <el-radio label="M">鐩綍</el-radio> + <el-radio label="C">鑿滃崟</el-radio> + <el-radio label="F">鎸夐挳</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="24" v-if="form.menuType != 'F'"> + <el-form-item label="鑿滃崟鍥炬爣" prop="icon"> + <el-popover placement="bottom-start" :width="540" trigger="click"> + <template #reference> + <el-input v-model="form.icon" placeholder="鐐瑰嚮閫夋嫨鍥炬爣" @blur="showSelectIcon" readonly> + <template #prefix> + <svg-icon + v-if="form.icon" + :icon-class="form.icon" + class="el-input__icon" + style="height: 32px; width: 16px" + /> + <el-icon v-else style="height: 32px; width: 16px"><search /></el-icon> + </template> + </el-input> + </template> + <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" /> + </el-popover> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鑿滃崟鍚嶇О" prop="menuName"> + <el-input v-model="form.menuName" placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鏄剧ず鎺掑簭" prop="orderNum"> + <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> + </el-form-item> + </el-col> + <el-col :span="12" v-if="form.menuType != 'F'"> + <el-form-item> + <template #label> + <span> + <el-tooltip content="閫夋嫨鏄閾惧垯璺敱鍦板潃闇�瑕佷互`http(s)://`寮�澶�" placement="top"> + <el-icon><question-filled /></el-icon> </el-tooltip + >鏄惁澶栭摼 + </span> + </template> + <el-radio-group v-model="form.isFrame"> + <el-radio label="0">鏄�</el-radio> + <el-radio label="1">鍚�</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="12" v-if="form.menuType != 'F'"> + <el-form-item prop="path"> + <template #label> + <span> + <el-tooltip + content="璁块棶鐨勮矾鐢卞湴鍧�锛屽锛歚user`锛屽澶栫綉鍦板潃闇�鍐呴摼璁块棶鍒欎互`http(s)://`寮�澶�" + placement="top" + > + <el-icon><question-filled /></el-icon> + </el-tooltip> + 璺敱鍦板潃 + </span> + </template> + <el-input v-model="form.path" placeholder="璇疯緭鍏ヨ矾鐢卞湴鍧�" /> + </el-form-item> + </el-col> + <el-col :span="12" v-if="form.menuType == 'C'"> + <el-form-item prop="component"> + <template #label> + <span> + <el-tooltip content="璁块棶鐨勭粍浠惰矾寰勶紝濡傦細`system/user/index`锛岄粯璁ゅ湪`views`鐩綍涓�" placement="top"> + <el-icon><question-filled /></el-icon> + </el-tooltip> + 缁勪欢璺緞 + </span> + </template> + <el-input v-model="form.component" placeholder="璇疯緭鍏ョ粍浠惰矾寰�" /> + </el-form-item> + </el-col> + <el-col :span="12" v-if="form.menuType != 'M'"> + <el-form-item> + <el-input v-model="form.perms" placeholder="璇疯緭鍏ユ潈闄愭爣璇�" maxlength="100" /> + <template #label> + <span> + <el-tooltip + content="鎺у埗鍣ㄤ腑瀹氫箟鐨勬潈闄愬瓧绗︼紝濡傦細@PreAuthorize(`@ss.hasPermi('system:user:list')`)" + placement="top" + > + <el-icon><question-filled /></el-icon> + </el-tooltip> + 鏉冮檺瀛楃 + </span> + </template> + </el-form-item> + </el-col> + <el-col :span="12" v-if="form.menuType == 'C'"> + <el-form-item> + <el-input v-model="form.query" placeholder="璇疯緭鍏ヨ矾鐢卞弬鏁�" maxlength="255" /> + <template #label> + <span> + <el-tooltip content='璁块棶璺敱鐨勯粯璁や紶閫掑弬鏁帮紝濡傦細`{"id": 1, "name": "ry"}`' placement="top"> + <el-icon><question-filled /></el-icon> + </el-tooltip> + 璺敱鍙傛暟 + </span> + </template> + </el-form-item> + </el-col> + <el-col :span="12" v-if="form.menuType == 'C'"> + <el-form-item> + <template #label> + <span> + <el-tooltip + content="閫夋嫨鏄垯浼氳`keep-alive`缂撳瓨锛岄渶瑕佸尮閰嶇粍浠剁殑`name`鍜屽湴鍧�淇濇寔涓�鑷�" + placement="top" + > + <el-icon><question-filled /></el-icon> + </el-tooltip> + 鏄惁缂撳瓨 + </span> + </template> + <el-radio-group v-model="form.isCache"> + <el-radio label="0">缂撳瓨</el-radio> + <el-radio label="1">涓嶇紦瀛�</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="12" v-if="form.menuType != 'F'"> + <el-form-item> + <template #label> + <span> + <el-tooltip content="閫夋嫨闅愯棌鍒欒矾鐢卞皢涓嶄細鍑虹幇鍦ㄤ晶杈规爮锛屼絾浠嶇劧鍙互璁块棶" placement="top"> + <el-icon><question-filled /></el-icon> + </el-tooltip> + 鏄剧ず鐘舵�� + </span> + </template> + <el-radio-group v-model="form.visible"> + <el-radio v-for="dict in sys_show_hide" :key="dict.value" :label="dict.value">{{ + dict.label + }}</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item> + <template #label> + <span> + <el-tooltip content="閫夋嫨鍋滅敤鍒欒矾鐢卞皢涓嶄細鍑虹幇鍦ㄤ晶杈规爮锛屼篃涓嶈兘琚闂�" placement="top"> + <el-icon><question-filled /></el-icon> + </el-tooltip> + 鑿滃崟鐘舵�� + </span> + </template> + <el-radio-group v-model="form.status"> + <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ + dict.label + }}</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="Menu"> -import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu"; -import SvgIcon from "@/components/SvgIcon"; -import IconSelect from "@/components/IconSelect"; +import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu" +import SvgIcon from "@/components/SvgIcon" +import IconSelect from "@/components/IconSelect" -const { proxy } = getCurrentInstance(); -const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable"); +const { proxy } = getCurrentInstance() +const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable") -const menuList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const title = ref(""); -const menuOptions = ref([]); -const isExpandAll = ref(false); -const refreshTable = ref(true); -const iconSelectRef = ref(null); +const menuList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const title = ref("") +const menuOptions = ref([]) +const isExpandAll = ref(false) +const refreshTable = ref(true) +const iconSelectRef = ref(null) const data = reactive({ form: {}, queryParams: { menuName: undefined, - visible: undefined + visible: undefined, }, rules: { menuName: [{ required: true, message: "鑿滃崟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], orderNum: [{ required: true, message: "鑿滃崟椤哄簭涓嶈兘涓虹┖", trigger: "blur" }], - path: [{ required: true, message: "璺敱鍦板潃涓嶈兘涓虹┖", trigger: "blur" }] + path: [{ required: true, message: "璺敱鍦板潃涓嶈兘涓虹┖", trigger: "blur" }], }, -}); +}) -const { queryParams, form, rules } = toRefs(data); +const { queryParams, form, rules } = toRefs(data) /** 鏌ヨ鑿滃崟鍒楄〃 */ function getList() { - loading.value = true; - listMenu(queryParams.value).then(response => { - menuList.value = proxy.handleTree(response.data, "menuId"); - loading.value = false; - }); + loading.value = true + listMenu(queryParams.value).then((response) => { + menuList.value = proxy.handleTree(response.data, "menuId") + loading.value = false + }) } /** 鏌ヨ鑿滃崟涓嬫媺鏍戠粨鏋� */ function getTreeselect() { - menuOptions.value = []; - listMenu().then(response => { - const menu = { menuId: 0, menuName: "涓荤被鐩�", children: [] }; - menu.children = proxy.handleTree(response.data, "menuId"); - menuOptions.value.push(menu); - }); + menuOptions.value = [] + listMenu().then((response) => { + const menu = { menuId: 0, menuName: "涓荤被鐩�", children: [] } + menu.children = proxy.handleTree(response.data, "menuId") + menuOptions.value.push(menu) + }) } /** 鍙栨秷鎸夐挳 */ function cancel() { - open.value = false; - reset(); + open.value = false + reset() } /** 琛ㄥ崟閲嶇疆 */ function reset() { @@ -342,86 +345,94 @@ isFrame: "1", isCache: "0", visible: "0", - status: "0" - }; - proxy.resetForm("menuRef"); + status: "0", + } + proxy.resetForm("menuRef") } /** 灞曠ず涓嬫媺鍥炬爣 */ function showSelectIcon() { - iconSelectRef.value.reset(); + iconSelectRef.value.reset() } /** 閫夋嫨鍥炬爣 */ function selected(name) { - form.value.icon = name; + form.value.icon = name } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - getList(); + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - proxy.resetForm("queryRef"); - handleQuery(); + proxy.resetForm("queryRef") + handleQuery() } /** 鏂板鎸夐挳鎿嶄綔 */ function handleAdd(row) { - reset(); - getTreeselect(); + reset() + getTreeselect() if (row != null && row.menuId) { - form.value.parentId = row.menuId; + form.value.parentId = row.menuId } else { - form.value.parentId = 0; + form.value.parentId = 0 } - open.value = true; - title.value = "娣诲姞鑿滃崟"; + open.value = true + title.value = "娣诲姞鑿滃崟" } /** 灞曞紑/鎶樺彔鎿嶄綔 */ function toggleExpandAll() { - refreshTable.value = false; - isExpandAll.value = !isExpandAll.value; + refreshTable.value = false + isExpandAll.value = !isExpandAll.value nextTick(() => { - refreshTable.value = true; - }); + refreshTable.value = true + }) } /** 淇敼鎸夐挳鎿嶄綔 */ async function handleUpdate(row) { - reset(); - await getTreeselect(); - getMenu(row.menuId).then(response => { - form.value = response.data; - open.value = true; - title.value = "淇敼鑿滃崟"; - }); + reset() + await getTreeselect() + getMenu(row.menuId).then((response) => { + form.value = response.data + open.value = true + title.value = "淇敼鑿滃崟" + }) } /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["menuRef"].validate(valid => { + proxy.$refs["menuRef"].validate((valid) => { if (valid) { if (form.value.menuId != undefined) { - updateMenu(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + updateMenu(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { - addMenu(form.value).then(response => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + addMenu(form.value).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - proxy.$modal.confirm('鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.menuName + '"鐨勬暟鎹」?').then(function() { - return delMenu(row.menuId); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + proxy.$modal + .confirm('鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.menuName + '"鐨勬暟鎹」?') + .then(function () { + return delMenu(row.menuId) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/system/name/name.vue b/zhitan-vue/src/views/system/name/name.vue index 803a941..696608f 100644 --- a/zhitan-vue/src/views/system/name/name.vue +++ b/zhitan-vue/src/views/system/name/name.vue @@ -1,47 +1,55 @@ <template> - <div class="app-container"> - <el-form :model="form" label-width="80px"> - <el-row class="mb20 mt20"> - <el-col :offset="1" :span="18"> - <el-form-item label="绯荤粺鍚嶇О" prop="systemName"> - <el-input v-model="form.systemName" placeholder="璇疯緭鍏ョ郴缁熷悕绉�" maxlength="64" show-word-limit /> - </el-form-item> - </el-col> - </el-row> - <el-row class="mb20 mt20"> - <el-col :offset="1" :span="18"> - <el-form-item label="鐧诲綍logo" prop="homeLogo"> - <ImageUpload v-model="form.homeLogo" :fileType="['png']" :limit="1" /> - </el-form-item> - </el-col> - </el-row> - <el-row class="mb20 mt20"> - <el-col :offset="1" :span="18"> - <el-form-item label="鍚庡彴logo" prop="leftLogo"> - <ImageUpload v-model="form.leftLogo" :fileType="['png']" :limit="1" /> - </el-form-item> - </el-col> - </el-row> - <el-row class="mb20 mt20"> - <el-col :offset="1" :span="18"> - <el-form-item label="copyRight" prop="copyRight"> - <el-input v-model="form.copyRight" placeholder="璇疯緭鍏�" type="textarea" maxlength="200" :rows="6" - show-word-limit /> - </el-form-item> - </el-col> - </el-row> - <el-row class="mb20 mt20"> - <el-col :offset="2" :span="18"> - <el-button type="primary" @click="handleSave">淇濆瓨</el-button> - </el-col> - </el-row> - </el-form> + <div class="app-container page"> + <div class="form-card"> + <el-form :model="form" label-width="80px"> + <el-row class="mb20 mt20"> + <el-col :offset="1" :span="18"> + <el-form-item label="绯荤粺鍚嶇О" prop="systemName"> + <el-input v-model="form.systemName" placeholder="璇疯緭鍏ョ郴缁熷悕绉�" maxlength="64" show-word-limit /> + </el-form-item> + </el-col> + </el-row> + <el-row class="mb20 mt20"> + <el-col :offset="1" :span="18"> + <el-form-item label="鐧诲綍logo" prop="homeLogo"> + <ImageUpload v-model="form.homeLogo" :fileType="['png']" :limit="1" /> + </el-form-item> + </el-col> + </el-row> + <el-row class="mb20 mt20"> + <el-col :offset="1" :span="18"> + <el-form-item label="鍚庡彴logo" prop="leftLogo"> + <ImageUpload v-model="form.leftLogo" :fileType="['png']" :limit="1" /> + </el-form-item> + </el-col> + </el-row> + <el-row class="mb20 mt20"> + <el-col :offset="1" :span="18"> + <el-form-item label="copyRight" prop="copyRight"> + <el-input + v-model="form.copyRight" + placeholder="璇疯緭鍏�" + type="textarea" + maxlength="200" + :rows="6" + show-word-limit + /> + </el-form-item> + </el-col> + </el-row> + <el-row class="mb20 mt20" style="padding-bottom: 20px"> + <el-col :offset="2" :span="18"> + <el-button type="primary" @click="handleSave">淇濆瓨</el-button> + </el-col> + </el-row> + </el-form> + </div> </div> </template> <script setup> -import Cookies from 'js-cookie' -import { systemName, systemNameSave } from '@/api/system/name' -const baseUrl = import.meta.env.VITE_APP_BASE_API; +import Cookies from "js-cookie" +import { systemName, systemNameSave } from "@/api/system/name" +const baseUrl = import.meta.env.VITE_APP_BASE_API const { proxy } = getCurrentInstance() let form = ref({ systemName: null, @@ -51,16 +59,15 @@ }) function getSystemName() { - systemName().then(res => { + systemName().then((res) => { if (res.code == 200) { form.value = res.data - sessionStorage.setItem('SystemInfo', JSON.stringify(res.data)) + sessionStorage.setItem("SystemInfo", JSON.stringify(res.data)) } }) } getSystemName() function handleSave() { - if (!form.value.leftLogo.includes(baseUrl)) { form.value.leftLogo = baseUrl + form.value.leftLogo } @@ -69,9 +76,9 @@ form.value.homeLogo = baseUrl + form.value.homeLogo } - systemNameSave(form.value).then(res => { + systemNameSave(form.value).then((res) => { if (res.code == 200) { - proxy.$modal.msgSuccess(res.msg); + proxy.$modal.msgSuccess(res.msg) getSystemName() } }) @@ -79,6 +86,7 @@ </script> <style lang="scss" scoped> +@import "@/assets/styles/page.scss"; :deep .avatar-uploader .el-upload { border: 1px dashed var(--el-border-color); border-radius: 6px; diff --git a/zhitan-vue/src/views/system/post/index.vue b/zhitan-vue/src/views/system/post/index.vue index 6fd1b64..dfa63f4 100644 --- a/zhitan-vue/src/views/system/post/index.vue +++ b/zhitan-vue/src/views/system/post/index.vue @@ -1,164 +1,160 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> - <el-form-item label="宀椾綅缂栫爜" prop="postCode"> - <el-input - v-model="queryParams.postCode" - placeholder="璇疯緭鍏ュ矖浣嶇紪鐮�" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="宀椾綅鍚嶇О" prop="postName"> - <el-input - v-model="queryParams.postName" - placeholder="璇疯緭鍏ュ矖浣嶅悕绉�" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-select v-model="queryParams.status" placeholder="宀椾綅鐘舵��" clearable style="width: 200px"> - <el-option - v-for="dict in 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="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="宀椾綅缂栫爜" prop="postCode"> + <el-input + v-model="queryParams.postCode" + placeholder="璇疯緭鍏ュ矖浣嶇紪鐮�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="宀椾綅鍚嶇О" prop="postName"> + <el-input + v-model="queryParams.postName" + placeholder="璇疯緭鍏ュ矖浣嶅悕绉�" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐘舵��" prop="status"> + <el-select v-model="queryParams.status" placeholder="宀椾綅鐘舵��" clearable style="width: 200px"> + <el-option v-for="dict in 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="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="Plus" - @click="handleAdd" - v-hasPermi="['system:post:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="success" - plain - icon="Edit" - :disabled="single" - @click="handleUpdate" - v-hasPermi="['system:post:edit']" - >淇敼</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['system:post:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['system:post:export']" - >瀵煎嚭</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> - - <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="宀椾綅缂栧彿" align="center" prop="postId" /> - <el-table-column label="宀椾綅缂栫爜" align="center" prop="postCode" /> - <el-table-column label="宀椾綅鍚嶇О" align="center" prop="postName" /> - <el-table-column label="宀椾綅鎺掑簭" align="center" prop="postSort" /> - <el-table-column label="鐘舵��" align="center" prop="status"> + <div class="table-bg-style"> + <div class="table-box"> + <div style="margin-bottom: 12px"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:post:add']" + >鏂板</el-button + > + <el-button + type="success" + plain + icon="Edit" + :disabled="single" + @click="handleUpdate" + v-hasPermi="['system:post:edit']" + >淇敼</el-button + > + <el-button + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['system:post:remove']" + >鍒犻櫎</el-button + > + <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:post:export']" + >瀵煎嚭</el-button + > + </div> + <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="宀椾綅缂栧彿" align="center" prop="postId" /> + <el-table-column label="宀椾綅缂栫爜" align="center" prop="postCode" /> + <el-table-column label="宀椾綅鍚嶇О" align="center" prop="postName" /> + <el-table-column label="宀椾綅鎺掑簭" align="center" prop="postSort" /> + <el-table-column label="鐘舵��" align="center" prop="status"> <template #default="scope"> - <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> + <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> </template> - </el-table-column> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> + </el-table-column> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> + <span>{{ parseTime(scope.row.createTime) }}</span> </template> - </el-table-column> - <el-table-column label="鎿嶄綔" width="180" align="center" class-name="small-padding fixed-width"> + </el-table-column> + <el-table-column label="鎿嶄綔" width="180" align="center" class-name="small-padding fixed-width"> <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">淇敼</el-button> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">鍒犻櫎</el-button> + <el-button + link + type="primary" + icon="Edit" + @click="handleUpdate(scope.row)" + v-hasPermi="['system:post:edit']" + >淇敼</el-button + > + <el-button + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['system:post:remove']" + >鍒犻櫎</el-button + > </template> - </el-table-column> - </el-table> + </el-table-column> + </el-table> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> + </div> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> - - <!-- 娣诲姞鎴栦慨鏀瑰矖浣嶅璇濇 --> - <el-dialog :title="title" v-model="open" width="500px" append-to-body> - <el-form ref="postRef" :model="form" :rules="rules" label-width="80px"> - <el-form-item label="宀椾綅鍚嶇О" prop="postName"> - <el-input v-model="form.postName" placeholder="璇疯緭鍏ュ矖浣嶅悕绉�" /> - </el-form-item> - <el-form-item label="宀椾綅缂栫爜" prop="postCode"> - <el-input v-model="form.postCode" placeholder="璇疯緭鍏ョ紪鐮佸悕绉�" /> - </el-form-item> - <el-form-item label="宀椾綅椤哄簭" prop="postSort"> - <el-input-number v-model="form.postSort" controls-position="right" :min="0" /> - </el-form-item> - <el-form-item label="宀椾綅鐘舵��" prop="status"> - <el-radio-group v-model="form.status"> - <el-radio - v-for="dict in sys_normal_disable" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item label="澶囨敞" prop="remark"> - <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" /> - </el-form-item> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 娣诲姞鎴栦慨鏀瑰矖浣嶅璇濇 --> + <el-dialog :title="title" v-model="open" width="500px" append-to-body> + <el-form ref="postRef" :model="form" :rules="rules" label-width="80px"> + <el-form-item label="宀椾綅鍚嶇О" prop="postName"> + <el-input v-model="form.postName" placeholder="璇疯緭鍏ュ矖浣嶅悕绉�" /> + </el-form-item> + <el-form-item label="宀椾綅缂栫爜" prop="postCode"> + <el-input v-model="form.postCode" placeholder="璇疯緭鍏ョ紪鐮佸悕绉�" /> + </el-form-item> + <el-form-item label="宀椾綅椤哄簭" prop="postSort"> + <el-input-number v-model="form.postSort" controls-position="right" :min="0" /> + </el-form-item> + <el-form-item label="宀椾綅鐘舵��" prop="status"> + <el-radio-group v-model="form.status"> + <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ + dict.label + }}</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="澶囨敞" prop="remark"> + <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�" /> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="Post"> -import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post"; +import { listPost, addPost, delPost, getPost, updatePost } from "@/api/system/post" -const { proxy } = getCurrentInstance(); -const { sys_normal_disable } = proxy.useDict("sys_normal_disable"); +const { proxy } = getCurrentInstance() +const { sys_normal_disable } = proxy.useDict("sys_normal_disable") -const postList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const total = ref(0); -const title = ref(""); +const postList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") const data = reactive({ form: {}, @@ -167,30 +163,30 @@ pageSize: 10, postCode: undefined, postName: undefined, - status: undefined + status: undefined, }, rules: { postName: [{ required: true, message: "宀椾綅鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], postCode: [{ required: true, message: "宀椾綅缂栫爜涓嶈兘涓虹┖", trigger: "blur" }], postSort: [{ required: true, message: "宀椾綅椤哄簭涓嶈兘涓虹┖", trigger: "blur" }], - } -}); + }, +}) -const { queryParams, form, rules } = toRefs(data); +const { queryParams, form, rules } = toRefs(data) /** 鏌ヨ宀椾綅鍒楄〃 */ function getList() { - loading.value = true; - listPost(queryParams.value).then(response => { - postList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + listPost(queryParams.value).then((response) => { + postList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 鍙栨秷鎸夐挳 */ function cancel() { - open.value = false; - reset(); + open.value = false + reset() } /** 琛ㄥ崟閲嶇疆 */ function reset() { @@ -200,78 +196,89 @@ postName: undefined, postSort: 0, status: "0", - remark: undefined - }; - proxy.resetForm("postRef"); + remark: undefined, + } + proxy.resetForm("postRef") } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - proxy.resetForm("queryRef"); - handleQuery(); + proxy.resetForm("queryRef") + handleQuery() } /** 澶氶�夋閫変腑鏁版嵁 */ function handleSelectionChange(selection) { - ids.value = selection.map(item => item.postId); - single.value = selection.length != 1; - multiple.value = !selection.length; + ids.value = selection.map((item) => item.postId) + single.value = selection.length != 1 + multiple.value = !selection.length } /** 鏂板鎸夐挳鎿嶄綔 */ function handleAdd() { - reset(); - open.value = true; - title.value = "娣诲姞宀椾綅"; + reset() + open.value = true + title.value = "娣诲姞宀椾綅" } /** 淇敼鎸夐挳鎿嶄綔 */ function handleUpdate(row) { - reset(); - const postId = row.postId || ids.value; - getPost(postId).then(response => { - form.value = response.data; - open.value = true; - title.value = "淇敼宀椾綅"; - }); + reset() + const postId = row.postId || ids.value + getPost(postId).then((response) => { + form.value = response.data + open.value = true + title.value = "淇敼宀椾綅" + }) } /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["postRef"].validate(valid => { + proxy.$refs["postRef"].validate((valid) => { if (valid) { if (form.value.postId != undefined) { - updatePost(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + updatePost(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { - addPost(form.value).then(response => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + addPost(form.value).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const postIds = row.postId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎宀椾綅缂栧彿涓�"' + postIds + '"鐨勬暟鎹」锛�').then(function() { - return delPost(postIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + const postIds = row.postId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎宀椾綅缂栧彿涓�"' + postIds + '"鐨勬暟鎹」锛�') + .then(function () { + return delPost(postIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download("system/post/export", { - ...queryParams.value - }, `post_${new Date().getTime()}.xlsx`); + proxy.download( + "system/post/export", + { + ...queryParams.value, + }, + `post_${new Date().getTime()}.xlsx` + ) } -getList(); +getList() </script> +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/system/role/index.vue b/zhitan-vue/src/views/system/role/index.vue index 07b083c..3eb0d13 100644 --- a/zhitan-vue/src/views/system/role/index.vue +++ b/zhitan-vue/src/views/system/role/index.vue @@ -1,273 +1,302 @@ <template> - <div class="app-container"> + <div class="app-container page"> + <div class="form-card"> <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="80px"> - <el-form-item label="瑙掕壊鍚嶇О" prop="roleName"> - <el-input - v-model="queryParams.roleName" - placeholder="璇疯緭鍏ヨ鑹插悕绉�" - clearable - style="width: 240px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鏉冮檺瀛楃" prop="roleKey"> - <el-input - v-model="queryParams.roleKey" - placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" - clearable - style="width: 240px" - @keyup.enter="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 sys_normal_disable" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - ></el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> + <el-form-item label="瑙掕壊鍚嶇О" prop="roleName"> + <el-input + v-model="queryParams.roleName" + placeholder="璇疯緭鍏ヨ鑹插悕绉�" + clearable + style="width: 100%" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鏉冮檺瀛楃" prop="roleKey"> + <el-input + v-model="queryParams.roleKey" + placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" + clearable + style="width: 100%" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐘舵��" prop="status"> + <el-select v-model="queryParams.status" placeholder="瑙掕壊鐘舵��" clearable style="width: 100%"> + <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px"> + <el-date-picker + v-model="dateRange" + value-format="YYYY-MM-DD" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + ></el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @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="Plus" - @click="handleAdd" - v-hasPermi="['system:role:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="success" - plain - icon="Edit" - :disabled="single" - @click="handleUpdate" - v-hasPermi="['system:role:edit']" - >淇敼</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['system:role:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['system:role:export']" - >瀵煎嚭</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + </div> - <!-- 琛ㄦ牸鏁版嵁 --> - <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="瑙掕壊缂栧彿" prop="roleId" width="120" /> - <el-table-column label="瑙掕壊鍚嶇О" prop="roleName" :show-overflow-tooltip="true" width="150" /> - <el-table-column label="鏉冮檺瀛楃" prop="roleKey" :show-overflow-tooltip="true" width="150" /> - <el-table-column label="鏄剧ず椤哄簭" prop="roleSort" width="100" /> - <el-table-column label="鐘舵��" align="center" width="100"> + <div class="table-bg-style"> + <div class="table-box" style="margin-top: 0"> + <el-row :gutter="10" class="mb8" style="margin-top: 8px"> + <el-col :span="1.5"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']" + >鏂板</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button + type="success" + plain + icon="Edit" + :disabled="single" + @click="handleUpdate" + v-hasPermi="['system:role:edit']" + >淇敼</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['system:role:remove']" + >鍒犻櫎</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:role:export']" + >瀵煎嚭</el-button + > + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> + </el-row> + + <!-- 琛ㄦ牸鏁版嵁 --> + <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column label="瑙掕壊缂栧彿" prop="roleId" width="120" /> + <el-table-column label="瑙掕壊鍚嶇О" prop="roleName" :show-overflow-tooltip="true" width="150" /> + <el-table-column label="鏉冮檺瀛楃" prop="roleKey" :show-overflow-tooltip="true" width="150" /> + <el-table-column label="鏄剧ず椤哄簭" prop="roleSort" width="100" /> + <el-table-column label="鐘舵��" align="center" width="100"> <template #default="scope"> - <el-switch - v-model="scope.row.status" - active-value="0" - inactive-value="1" - @change="handleStatusChange(scope.row)" - ></el-switch> + <el-switch + v-model="scope.row.status" + active-value="0" + inactive-value="1" + @change="handleStatusChange(scope.row)" + ></el-switch> </template> - </el-table-column> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime"> + </el-table-column> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime"> <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> + <span>{{ parseTime(scope.row.createTime) }}</span> </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width"> <template #default="scope"> <el-tooltip content="淇敼" placement="top" v-if="scope.row.roleId !== 1"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button> + <el-button + link + type="primary" + icon="Edit" + @click="handleUpdate(scope.row)" + v-hasPermi="['system:role:edit']" + ></el-button> </el-tooltip> <el-tooltip content="鍒犻櫎" placement="top" v-if="scope.row.roleId !== 1"> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button> + <el-button + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['system:role:remove']" + ></el-button> </el-tooltip> <el-tooltip content="鏁版嵁鏉冮檺" placement="top" v-if="scope.row.roleId !== 1"> - <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button> + <el-button + link + type="primary" + icon="CircleCheck" + @click="handleDataScope(scope.row)" + v-hasPermi="['system:role:edit']" + ></el-button> </el-tooltip> <el-tooltip content="鍒嗛厤鐢ㄦ埛" placement="top" v-if="scope.row.roleId !== 1"> - <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button> + <el-button + link + type="primary" + icon="User" + @click="handleAuthUser(scope.row)" + v-hasPermi="['system:role:edit']" + ></el-button> </el-tooltip> </template> - </el-table-column> - </el-table> + </el-table-column> + </el-table> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> + </div> + <!-- 娣诲姞鎴栦慨鏀硅鑹查厤缃璇濇 --> + <el-dialog :title="title" v-model="open" width="500px" append-to-body> + <el-form ref="roleRef" :model="form" :rules="rules" label-width="110px"> + <el-form-item label="瑙掕壊鍚嶇О" prop="roleName"> + <el-input v-model="form.roleName" placeholder="璇疯緭鍏ヨ鑹插悕绉�" /> + </el-form-item> + <el-form-item prop="roleKey"> + <template #label> + <span> + <el-tooltip content="鎺у埗鍣ㄤ腑瀹氫箟鐨勬潈闄愬瓧绗︼紝濡傦細@PreAuthorize(`@ss.hasRole('admin')`)" placement="top"> + <el-icon><question-filled /></el-icon> + </el-tooltip> + 鏉冮檺瀛楃 + </span> + </template> + <el-input v-model="form.roleKey" placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" /> + </el-form-item> + <el-form-item label="瑙掕壊椤哄簭" prop="roleSort"> + <el-input-number v-model="form.roleSort" controls-position="right" :min="0" /> + </el-form-item> + <el-form-item label="鐘舵��"> + <el-radio-group v-model="form.status"> + <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ + dict.label + }}</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item label="鑿滃崟鏉冮檺"> + <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">灞曞紑/鎶樺彔</el-checkbox> + <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')" + >鍏ㄩ��/鍏ㄤ笉閫�</el-checkbox + > + <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')" + >鐖跺瓙鑱斿姩</el-checkbox + > + <el-tree + class="tree-border" + :data="menuOptions" + show-checkbox + ref="menuRef" + node-key="id" + :check-strictly="!form.menuCheckStrictly" + empty-text="鍔犺浇涓紝璇风◢鍊�" + :props="{ label: 'label', children: 'children' }" + ></el-tree> + </el-form-item> + <el-form-item label="澶囨敞"> + <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> - <!-- 娣诲姞鎴栦慨鏀硅鑹查厤缃璇濇 --> - <el-dialog :title="title" v-model="open" width="500px" append-to-body> - <el-form ref="roleRef" :model="form" :rules="rules" label-width="110px"> - <el-form-item label="瑙掕壊鍚嶇О" prop="roleName"> - <el-input v-model="form.roleName" placeholder="璇疯緭鍏ヨ鑹插悕绉�" /> - </el-form-item> - <el-form-item prop="roleKey"> - <template #label> - <span> - <el-tooltip content="鎺у埗鍣ㄤ腑瀹氫箟鐨勬潈闄愬瓧绗︼紝濡傦細@PreAuthorize(`@ss.hasRole('admin')`)" placement="top"> - <el-icon><question-filled /></el-icon> - </el-tooltip> - 鏉冮檺瀛楃 - </span> - </template> - <el-input v-model="form.roleKey" placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" /> - </el-form-item> - <el-form-item label="瑙掕壊椤哄簭" prop="roleSort"> - <el-input-number v-model="form.roleSort" controls-position="right" :min="0" /> - </el-form-item> - <el-form-item label="鐘舵��"> - <el-radio-group v-model="form.status"> - <el-radio - v-for="dict in sys_normal_disable" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item label="鑿滃崟鏉冮檺"> - <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">灞曞紑/鎶樺彔</el-checkbox> - <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">鍏ㄩ��/鍏ㄤ笉閫�</el-checkbox> - <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">鐖跺瓙鑱斿姩</el-checkbox> - <el-tree - class="tree-border" - :data="menuOptions" - show-checkbox - ref="menuRef" - node-key="id" - :check-strictly="!form.menuCheckStrictly" - empty-text="鍔犺浇涓紝璇风◢鍊�" - :props="{ label: 'label', children: 'children' }" - ></el-tree> - </el-form-item> - <el-form-item label="澶囨敞"> - <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> - </el-form-item> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - - <!-- 鍒嗛厤瑙掕壊鏁版嵁鏉冮檺瀵硅瘽妗� --> - <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body> - <el-form :model="form" label-width="100px"> - <el-form-item label="瑙掕壊鍚嶇О"> - <el-input v-model="form.roleName" :disabled="true" /> - </el-form-item> - <el-form-item label="鏉冮檺瀛楃"> - <el-input v-model="form.roleKey" :disabled="true" /> - </el-form-item> - <el-form-item label="鏉冮檺鑼冨洿"> - <el-select v-model="form.dataScope" @change="dataScopeSelectChange"> - <el-option - v-for="item in dataScopeOptions" - :key="item.value" - :label="item.label" - :value="item.value" - ></el-option> - </el-select> - </el-form-item> - <el-form-item label="鏁版嵁鏉冮檺" v-show="form.dataScope == 2"> - <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">灞曞紑/鎶樺彔</el-checkbox> - <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">鍏ㄩ��/鍏ㄤ笉閫�</el-checkbox> - <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">鐖跺瓙鑱斿姩</el-checkbox> - <el-tree - class="tree-border" - :data="deptOptions" - show-checkbox - default-expand-all - ref="deptRef" - node-key="id" - :check-strictly="!form.deptCheckStrictly" - empty-text="鍔犺浇涓紝璇风◢鍊�" - :props="{ label: 'label', children: 'children' }" - ></el-tree> - </el-form-item> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitDataScope">纭� 瀹�</el-button> - <el-button @click="cancelDataScope">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 鍒嗛厤瑙掕壊鏁版嵁鏉冮檺瀵硅瘽妗� --> + <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body> + <el-form :model="form" label-width="100px"> + <el-form-item label="瑙掕壊鍚嶇О"> + <el-input v-model="form.roleName" :disabled="true" /> + </el-form-item> + <el-form-item label="鏉冮檺瀛楃"> + <el-input v-model="form.roleKey" :disabled="true" /> + </el-form-item> + <el-form-item label="鏉冮檺鑼冨洿"> + <el-select v-model="form.dataScope" @change="dataScopeSelectChange"> + <el-option + v-for="item in dataScopeOptions" + :key="item.value" + :label="item.label" + :value="item.value" + ></el-option> + </el-select> + </el-form-item> + <el-form-item label="鏁版嵁鏉冮檺" v-show="form.dataScope == 2"> + <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">灞曞紑/鎶樺彔</el-checkbox> + <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')" + >鍏ㄩ��/鍏ㄤ笉閫�</el-checkbox + > + <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')" + >鐖跺瓙鑱斿姩</el-checkbox + > + <el-tree + class="tree-border" + :data="deptOptions" + show-checkbox + default-expand-all + ref="deptRef" + node-key="id" + :check-strictly="!form.deptCheckStrictly" + empty-text="鍔犺浇涓紝璇风◢鍊�" + :props="{ label: 'label', children: 'children' }" + ></el-tree> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitDataScope">纭� 瀹�</el-button> + <el-button @click="cancelDataScope">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="Role"> -import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role"; -import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu"; +import { + addRole, + changeRoleStatus, + dataScope, + delRole, + getRole, + listRole, + updateRole, + deptTreeSelect, +} from "@/api/system/role" +import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu" -const router = useRouter(); -const { proxy } = getCurrentInstance(); -const { sys_normal_disable } = proxy.useDict("sys_normal_disable"); +const router = useRouter() +const { proxy } = getCurrentInstance() +const { sys_normal_disable } = proxy.useDict("sys_normal_disable") -const roleList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const total = ref(0); -const title = ref(""); -const dateRange = ref([]); -const menuOptions = ref([]); -const menuExpand = ref(false); -const menuNodeAll = ref(false); -const deptExpand = ref(true); -const deptNodeAll = ref(false); -const deptOptions = ref([]); -const openDataScope = ref(false); -const menuRef = ref(null); -const deptRef = ref(null); +const roleList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") +const dateRange = ref([]) +const menuOptions = ref([]) +const menuExpand = ref(false) +const menuNodeAll = ref(false) +const deptExpand = ref(true) +const deptNodeAll = ref(false) +const deptOptions = ref([]) +const openDataScope = ref(false) +const menuRef = ref(null) +const deptRef = ref(null) /** 鏁版嵁鑼冨洿閫夐」*/ const dataScopeOptions = ref([ @@ -275,8 +304,8 @@ { value: "2", label: "鑷畾鏁版嵁鏉冮檺" }, { value: "3", label: "鏈儴闂ㄦ暟鎹潈闄�" }, { value: "4", label: "鏈儴闂ㄥ強浠ヤ笅鏁版嵁鏉冮檺" }, - { value: "5", label: "浠呮湰浜烘暟鎹潈闄�" } -]); + { value: "5", label: "浠呮湰浜烘暟鎹潈闄�" }, +]) const data = reactive({ form: {}, @@ -285,111 +314,123 @@ pageSize: 10, roleName: undefined, roleKey: undefined, - status: undefined + status: undefined, }, rules: { roleName: [{ required: true, message: "瑙掕壊鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], roleKey: [{ required: true, message: "鏉冮檺瀛楃涓嶈兘涓虹┖", trigger: "blur" }], - roleSort: [{ required: true, message: "瑙掕壊椤哄簭涓嶈兘涓虹┖", trigger: "blur" }] + roleSort: [{ required: true, message: "瑙掕壊椤哄簭涓嶈兘涓虹┖", trigger: "blur" }], }, -}); +}) -const { queryParams, form, rules } = toRefs(data); +const { queryParams, form, rules } = toRefs(data) /** 鏌ヨ瑙掕壊鍒楄〃 */ function getList() { - loading.value = true; - listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => { - roleList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => { + roleList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - dateRange.value = []; - proxy.resetForm("queryRef"); - handleQuery(); + dateRange.value = [] + proxy.resetForm("queryRef") + handleQuery() } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const roleIds = row.roleId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎瑙掕壊缂栧彿涓�"' + roleIds + '"鐨勬暟鎹」?').then(function () { - return delRole(roleIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + const roleIds = row.roleId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎瑙掕壊缂栧彿涓�"' + roleIds + '"鐨勬暟鎹」?') + .then(function () { + return delRole(roleIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download("system/role/export", { - ...queryParams.value, - }, `role_${new Date().getTime()}.xlsx`); + proxy.download( + "system/role/export", + { + ...queryParams.value, + }, + `role_${new Date().getTime()}.xlsx` + ) } /** 澶氶�夋閫変腑鏁版嵁 */ function handleSelectionChange(selection) { - ids.value = selection.map(item => item.roleId); - single.value = selection.length != 1; - multiple.value = !selection.length; + ids.value = selection.map((item) => item.roleId) + single.value = selection.length != 1 + multiple.value = !selection.length } /** 瑙掕壊鐘舵�佷慨鏀� */ function handleStatusChange(row) { - let text = row.status === "0" ? "鍚敤" : "鍋滅敤"; - proxy.$modal.confirm('纭瑕�"' + text + '""' + row.roleName + '"瑙掕壊鍚�?').then(function () { - return changeRoleStatus(row.roleId, row.status); - }).then(() => { - proxy.$modal.msgSuccess(text + "鎴愬姛"); - }).catch(function () { - row.status = row.status === "0" ? "1" : "0"; - }); + let text = row.status === "0" ? "鍚敤" : "鍋滅敤" + proxy.$modal + .confirm('纭瑕�"' + text + '""' + row.roleName + '"瑙掕壊鍚�?') + .then(function () { + return changeRoleStatus(row.roleId, row.status) + }) + .then(() => { + proxy.$modal.msgSuccess(text + "鎴愬姛") + }) + .catch(function () { + row.status = row.status === "0" ? "1" : "0" + }) } /** 鏇村鎿嶄綔 */ function handleCommand(command, row) { switch (command) { case "handleDataScope": - handleDataScope(row); - break; + handleDataScope(row) + break case "handleAuthUser": - handleAuthUser(row); - break; + handleAuthUser(row) + break default: - break; + break } } /** 鍒嗛厤鐢ㄦ埛 */ function handleAuthUser(row) { - router.push("/system/role-auth/user/" + row.roleId); + router.push("/system/role-auth/user/" + row.roleId) } /** 鏌ヨ鑿滃崟鏍戠粨鏋� */ function getMenuTreeselect() { - menuTreeselect().then(response => { - menuOptions.value = response.data; - }); + menuTreeselect().then((response) => { + menuOptions.value = response.data + }) } /** 鎵�鏈夐儴闂ㄨ妭鐐规暟鎹� */ function getDeptAllCheckedKeys() { // 鐩墠琚�変腑鐨勯儴闂ㄨ妭鐐� - let checkedKeys = deptRef.value.getCheckedKeys(); + let checkedKeys = deptRef.value.getCheckedKeys() // 鍗婇�変腑鐨勯儴闂ㄨ妭鐐� - let halfCheckedKeys = deptRef.value.getHalfCheckedKeys(); - checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys); - return checkedKeys; + let halfCheckedKeys = deptRef.value.getHalfCheckedKeys() + checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys) + return checkedKeys } /** 閲嶇疆鏂板鐨勮〃鍗曚互鍙婂叾浠栨暟鎹� */ function reset() { if (menuRef.value != undefined) { - menuRef.value.setCheckedKeys([]); + menuRef.value.setCheckedKeys([]) } - menuExpand.value = false; - menuNodeAll.value = false; - deptExpand.value = true; - deptNodeAll.value = false; + menuExpand.value = false + menuNodeAll.value = false + deptExpand.value = true + deptNodeAll.value = false form.value = { roleId: undefined, roleName: undefined, @@ -400,160 +441,164 @@ deptIds: [], menuCheckStrictly: true, deptCheckStrictly: true, - remark: undefined - }; - proxy.resetForm("roleRef"); + remark: undefined, + } + proxy.resetForm("roleRef") } /** 娣诲姞瑙掕壊 */ function handleAdd() { - reset(); - getMenuTreeselect(); - open.value = true; - title.value = "娣诲姞瑙掕壊"; + reset() + getMenuTreeselect() + open.value = true + title.value = "娣诲姞瑙掕壊" } /** 淇敼瑙掕壊 */ function handleUpdate(row) { - reset(); - const roleId = row.roleId || ids.value; - const roleMenu = getRoleMenuTreeselect(roleId); - getRole(roleId).then(response => { - form.value = response.data; - form.value.roleSort = Number(form.value.roleSort); - open.value = true; + reset() + const roleId = row.roleId || ids.value + const roleMenu = getRoleMenuTreeselect(roleId) + getRole(roleId).then((response) => { + form.value = response.data + form.value.roleSort = Number(form.value.roleSort) + open.value = true nextTick(() => { roleMenu.then((res) => { - let checkedKeys = res.checkedKeys; + let checkedKeys = res.checkedKeys checkedKeys.forEach((v) => { nextTick(() => { - menuRef.value.setChecked(v, true, false); - }); - }); - }); - }); - title.value = "淇敼瑙掕壊"; - }); + menuRef.value.setChecked(v, true, false) + }) + }) + }) + }) + title.value = "淇敼瑙掕壊" + }) } /** 鏍规嵁瑙掕壊ID鏌ヨ鑿滃崟鏍戠粨鏋� */ function getRoleMenuTreeselect(roleId) { - return roleMenuTreeselect(roleId).then(response => { - menuOptions.value = response.menus; - return response; - }); + return roleMenuTreeselect(roleId).then((response) => { + menuOptions.value = response.menus + return response + }) } /** 鏍规嵁瑙掕壊ID鏌ヨ閮ㄩ棬鏍戠粨鏋� */ function getDeptTree(roleId) { - return deptTreeSelect(roleId).then(response => { - deptOptions.value = response.depts; - return response; - }); + return deptTreeSelect(roleId).then((response) => { + deptOptions.value = response.depts + return response + }) } /** 鏍戞潈闄愶紙灞曞紑/鎶樺彔锛�*/ function handleCheckedTreeExpand(value, type) { if (type == "menu") { - let treeList = menuOptions.value; + let treeList = menuOptions.value for (let i = 0; i < treeList.length; i++) { - menuRef.value.store.nodesMap[treeList[i].id].expanded = value; + menuRef.value.store.nodesMap[treeList[i].id].expanded = value } } else if (type == "dept") { - let treeList = deptOptions.value; + let treeList = deptOptions.value for (let i = 0; i < treeList.length; i++) { - deptRef.value.store.nodesMap[treeList[i].id].expanded = value; + deptRef.value.store.nodesMap[treeList[i].id].expanded = value } } } /** 鏍戞潈闄愶紙鍏ㄩ��/鍏ㄤ笉閫夛級 */ function handleCheckedTreeNodeAll(value, type) { if (type == "menu") { - menuRef.value.setCheckedNodes(value ? menuOptions.value : []); + menuRef.value.setCheckedNodes(value ? menuOptions.value : []) } else if (type == "dept") { - deptRef.value.setCheckedNodes(value ? deptOptions.value : []); + deptRef.value.setCheckedNodes(value ? deptOptions.value : []) } } /** 鏍戞潈闄愶紙鐖跺瓙鑱斿姩锛� */ function handleCheckedTreeConnect(value, type) { if (type == "menu") { - form.value.menuCheckStrictly = value ? true : false; + form.value.menuCheckStrictly = value ? true : false } else if (type == "dept") { - form.value.deptCheckStrictly = value ? true : false; + form.value.deptCheckStrictly = value ? true : false } } /** 鎵�鏈夎彍鍗曡妭鐐规暟鎹� */ function getMenuAllCheckedKeys() { // 鐩墠琚�変腑鐨勮彍鍗曡妭鐐� - let checkedKeys = menuRef.value.getCheckedKeys(); + let checkedKeys = menuRef.value.getCheckedKeys() // 鍗婇�変腑鐨勮彍鍗曡妭鐐� - let halfCheckedKeys = menuRef.value.getHalfCheckedKeys(); - checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys); - return checkedKeys; + let halfCheckedKeys = menuRef.value.getHalfCheckedKeys() + checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys) + return checkedKeys } /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["roleRef"].validate(valid => { + proxy.$refs["roleRef"].validate((valid) => { if (valid) { if (form.value.roleId != undefined) { - form.value.menuIds = getMenuAllCheckedKeys(); - updateRole(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + form.value.menuIds = getMenuAllCheckedKeys() + updateRole(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { - form.value.menuIds = getMenuAllCheckedKeys(); - addRole(form.value).then(response => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + form.value.menuIds = getMenuAllCheckedKeys() + addRole(form.value).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); + }) } /** 鍙栨秷鎸夐挳 */ function cancel() { - open.value = false; - reset(); + open.value = false + reset() } /** 閫夋嫨瑙掕壊鏉冮檺鑼冨洿瑙﹀彂 */ function dataScopeSelectChange(value) { if (value !== "2") { - deptRef.value.setCheckedKeys([]); + deptRef.value.setCheckedKeys([]) } } /** 鍒嗛厤鏁版嵁鏉冮檺鎿嶄綔 */ function handleDataScope(row) { - reset(); - const deptTreeSelect = getDeptTree(row.roleId); - getRole(row.roleId).then(response => { - form.value = response.data; - openDataScope.value = true; + reset() + const deptTreeSelect = getDeptTree(row.roleId) + getRole(row.roleId).then((response) => { + form.value = response.data + openDataScope.value = true nextTick(() => { - deptTreeSelect.then(res => { + deptTreeSelect.then((res) => { nextTick(() => { if (deptRef.value) { - deptRef.value.setCheckedKeys(res.checkedKeys); + deptRef.value.setCheckedKeys(res.checkedKeys) } - }); - }); - }); - title.value = "鍒嗛厤鏁版嵁鏉冮檺"; - }); + }) + }) + }) + title.value = "鍒嗛厤鏁版嵁鏉冮檺" + }) } /** 鎻愪氦鎸夐挳锛堟暟鎹潈闄愶級 */ function submitDataScope() { if (form.value.roleId != undefined) { - form.value.deptIds = getDeptAllCheckedKeys(); - dataScope(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - openDataScope.value = false; - getList(); - }); + form.value.deptIds = getDeptAllCheckedKeys() + dataScope(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + openDataScope.value = false + getList() + }) } } /** 鍙栨秷鎸夐挳锛堟暟鎹潈闄愶級*/ function cancelDataScope() { - openDataScope.value = false; - reset(); + openDataScope.value = false + reset() } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/system/user/index.vue b/zhitan-vue/src/views/system/user/index.vue index 40681a8..68e0202 100644 --- a/zhitan-vue/src/views/system/user/index.vue +++ b/zhitan-vue/src/views/system/user/index.vue @@ -1,357 +1,421 @@ <template> - <div class="app-container"> - <el-row :gutter="20"> - <!--閮ㄩ棬鏁版嵁--> - <el-col :span="4" :xs="24"> - <div class="head-container"> - <el-input - v-model="deptName" - placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" - clearable - prefix-icon="Search" - style="margin-bottom: 20px" - /> - </div> - <div class="head-container"> - <el-tree - :data="deptOptions" - :props="{ label: 'label', children: 'children' }" - :expand-on-click-node="false" - :filter-node-method="filterNode" - ref="deptTreeRef" - node-key="id" - highlight-current - default-expand-all - @node-click="handleNodeClick" - /> - </div> - </el-col> - <!--鐢ㄦ埛鏁版嵁--> - <el-col :span="20" :xs="24"> - <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px"> - <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName"> - <el-input - v-model="queryParams.userName" - placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" - clearable - style="width: 240px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鎵嬫満鍙风爜" prop="phoneNumber"> - <el-input - v-model="queryParams.phoneNumber" - placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" - clearable - style="width: 240px" - @keyup.enter="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 sys_normal_disable" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px;"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - ></el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> - </el-form> + <div class="app-container page"> + <el-row :gutter="20"> + <!--閮ㄩ棬鏁版嵁--> + <el-col :span="4" :xs="24"> + <div class="head-container"> + <el-input + v-model="deptName" + placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" + clearable + prefix-icon="Search" + style="margin-bottom: 20px" + /> + </div> + <div class="head-container"> + <el-tree + :data="deptOptions" + :props="{ label: 'label', children: 'children' }" + :expand-on-click-node="false" + :filter-node-method="filterNode" + ref="deptTreeRef" + node-key="id" + highlight-current + default-expand-all + @node-click="handleNodeClick" + /> + </div> + </el-col> + <!--鐢ㄦ埛鏁版嵁--> + <el-col :span="20" :xs="24"> + <div class="form-card"> + <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"> + <el-form-item label="鐢ㄦ埛鍚嶇О" prop="userName"> + <el-input + v-model="queryParams.userName" + placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" + clearable + style="width: 100%" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="phoneNumber"> + <el-input + v-model="queryParams.phoneNumber" + placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" + clearable + style="width: 100%" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鐘舵��" prop="status" label-width="50px"> + <el-select v-model="queryParams.status" placeholder="鐢ㄦ埛鐘舵��" clearable style="width: 100%"> + <el-option + v-for="dict in sys_normal_disable" + :key="dict.value" + :label="dict.label" + :value="dict.value" + /> + </el-select> + </el-form-item> + <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px"> + <el-date-picker + v-model="dateRange" + value-format="YYYY-MM-DD" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + ></el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="Plus" - @click="handleAdd" - v-hasPermi="['system:user:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="success" - plain - icon="Edit" - :disabled="single" - @click="handleUpdate" - v-hasPermi="['system:user:edit']" - >淇敼</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['system:user:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="info" - plain - icon="Upload" - @click="handleImport" - v-hasPermi="['system:user:import']" - >瀵煎叆</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['system:user:export']" - >瀵煎嚭</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> + <div class="table-bg-style"> + <div class="table-box" style="margin-top: 0"> + <el-row :gutter="10" class="mb8" style="margin-top: 8px"> + <el-col :span="1.5"> + <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']" + >鏂板</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button + type="success" + plain + icon="Edit" + :disabled="single" + @click="handleUpdate" + v-hasPermi="['system:user:edit']" + >淇敼</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['system:user:remove']" + >鍒犻櫎</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']" + >瀵煎叆</el-button + > + </el-col> + <el-col :span="1.5"> + <el-button + type="warning" + plain + icon="Download" + @click="handleExport" + v-hasPermi="['system:user:export']" + >瀵煎嚭</el-button + > + </el-col> + <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> </el-row> - <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="50" align="center" /> - <el-table-column label="鐢ㄦ埛缂栧彿" align="center" key="userId" prop="userId" v-if="columns[0].visible" /> - <el-table-column label="鐢ㄦ埛鍚嶇О" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /> - <el-table-column label="鐢ㄦ埛鏄电О" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" /> - <el-table-column label="閮ㄩ棬" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" /> - <el-table-column label="鎵嬫満鍙风爜" align="center" key="phoneNumber" prop="phoneNumber" v-if="columns[4].visible" width="120" /> - <el-table-column label="鐘舵��" align="center" key="status" v-if="columns[5].visible"> - <template #default="scope"> - <el-switch - v-model="scope.row.status" - active-value="0" - inactive-value="1" - @change="handleStatusChange(scope.row)" - ></el-switch> - </template> - </el-table-column> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" v-if="columns[6].visible" width="160"> - <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" width="150" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-tooltip content="淇敼" placement="top" v-if="scope.row.userId !== 1"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button> - </el-tooltip> - <el-tooltip content="鍒犻櫎" placement="top" v-if="scope.row.userId !== 1"> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button> - </el-tooltip> - <el-tooltip content="閲嶇疆瀵嗙爜" placement="top" v-if="scope.row.userId !== 1"> - <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button> - </el-tooltip> - <el-tooltip content="鍒嗛厤瑙掕壊" placement="top" v-if="scope.row.userId !== 1"> - <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button> - </el-tooltip> - </template> - </el-table-column> + <el-table-column type="selection" width="50" align="center" /> + <el-table-column label="鐢ㄦ埛缂栧彿" align="center" key="userId" prop="userId" v-if="columns[0].visible" /> + <el-table-column + label="鐢ㄦ埛鍚嶇О" + align="center" + key="userName" + prop="userName" + v-if="columns[1].visible" + :show-overflow-tooltip="true" + /> + <el-table-column + label="鐢ㄦ埛鏄电О" + align="center" + key="nickName" + prop="nickName" + v-if="columns[2].visible" + :show-overflow-tooltip="true" + /> + <el-table-column + label="閮ㄩ棬" + align="center" + key="deptName" + prop="dept.deptName" + v-if="columns[3].visible" + :show-overflow-tooltip="true" + /> + <el-table-column + label="鎵嬫満鍙风爜" + align="center" + key="phoneNumber" + prop="phoneNumber" + v-if="columns[4].visible" + width="120" + /> + <el-table-column label="鐘舵��" align="center" key="status" v-if="columns[5].visible"> + <template #default="scope"> + <el-switch + v-model="scope.row.status" + active-value="0" + inactive-value="1" + @change="handleStatusChange(scope.row)" + ></el-switch> + </template> + </el-table-column> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" v-if="columns[6].visible" width="160"> + <template #default="scope"> + <span>{{ parseTime(scope.row.createTime) }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" width="150" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="淇敼" placement="top" v-if="scope.row.userId !== 1"> + <el-button + link + type="primary" + icon="Edit" + @click="handleUpdate(scope.row)" + v-hasPermi="['system:user:edit']" + ></el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top" v-if="scope.row.userId !== 1"> + <el-button + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['system:user:remove']" + ></el-button> + </el-tooltip> + <el-tooltip content="閲嶇疆瀵嗙爜" placement="top" v-if="scope.row.userId !== 1"> + <el-button + link + type="primary" + icon="Key" + @click="handleResetPwd(scope.row)" + v-hasPermi="['system:user:resetPwd']" + ></el-button> + </el-tooltip> + <el-tooltip content="鍒嗛厤瑙掕壊" placement="top" v-if="scope.row.userId !== 1"> + <el-button + link + type="primary" + icon="CircleCheck" + @click="handleAuthRole(scope.row)" + v-hasPermi="['system:user:edit']" + ></el-button> + </el-tooltip> + </template> + </el-table-column> </el-table> <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" /> - </el-col> - </el-row> + </div> + </div> + </el-col> + </el-row> - <!-- 娣诲姞鎴栦慨鏀圭敤鎴烽厤缃璇濇 --> - <el-dialog :title="title" v-model="open" width="600px" append-to-body> - <el-form :model="form" :rules="rules" ref="userRef" label-width="100px"> - <el-row> - <el-col :span="12"> - <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName"> - <el-input v-model="form.nickName" placeholder="璇疯緭鍏ョ敤鎴锋樀绉�" maxlength="30" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="褰掑睘閮ㄩ棬" prop="deptId"> - <el-tree-select - v-model="form.deptId" - :data="deptOptions" - :props="{ value: 'id', label: 'label', children: 'children' }" - value-key="id" - placeholder="璇烽�夋嫨褰掑睘閮ㄩ棬" - check-strictly - /> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item label="鎵嬫満鍙风爜" prop="phoneNumber"> - <el-input v-model="form.phoneNumber" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" maxlength="11" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="閭" prop="email"> - <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�" maxlength="50" /> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item v-if="form.userId == undefined" label="鐢ㄦ埛鍚嶇О" prop="userName"> - <el-input v-model="form.userName" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" maxlength="30" /> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item v-if="form.userId == undefined" label="鐢ㄦ埛瀵嗙爜" prop="password"> - <el-input v-model="form.password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�" type="password" maxlength="20" show-password /> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item label="鐢ㄦ埛鎬у埆"> - <el-select v-model="form.sex" placeholder="璇烽�夋嫨"> - <el-option - v-for="dict in sys_user_sex" - :key="dict.value" - :label="dict.label" - :value="dict.value" - ></el-option> - </el-select> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="鐘舵��"> - <el-radio-group v-model="form.status"> - <el-radio - v-for="dict in sys_normal_disable" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item label="宀椾綅"> - <el-select v-model="form.postIds" multiple placeholder="璇烽�夋嫨"> - <el-option - v-for="item in postOptions" - :key="item.postId" - :label="item.postName" - :value="item.postId" - :disabled="item.status == 1" - ></el-option> - </el-select> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item label="瑙掕壊"> - <el-select v-model="form.roleIds" multiple placeholder="璇烽�夋嫨"> - <el-option - v-for="item in roleOptions" - :key="item.roleId" - :label="item.roleName" - :value="item.roleId" - :disabled="item.status == 1" - ></el-option> - </el-select> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="24"> - <el-form-item label="澶囨敞"> - <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> - </el-form-item> - </el-col> - </el-row> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> + <!-- 娣诲姞鎴栦慨鏀圭敤鎴烽厤缃璇濇 --> + <el-dialog :title="title" v-model="open" width="600px" append-to-body> + <el-form :model="form" :rules="rules" ref="userRef" label-width="100px"> + <el-row> + <el-col :span="12"> + <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName"> + <el-input v-model="form.nickName" placeholder="璇疯緭鍏ョ敤鎴锋樀绉�" maxlength="30" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="褰掑睘閮ㄩ棬" prop="deptId"> + <el-tree-select + v-model="form.deptId" + :data="deptOptions" + :props="{ value: 'id', label: 'label', children: 'children' }" + value-key="id" + placeholder="璇烽�夋嫨褰掑睘閮ㄩ棬" + check-strictly + /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item label="鎵嬫満鍙风爜" prop="phoneNumber"> + <el-input v-model="form.phoneNumber" placeholder="璇疯緭鍏ユ墜鏈哄彿鐮�" maxlength="11" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="閭" prop="email"> + <el-input v-model="form.email" placeholder="璇疯緭鍏ラ偖绠�" maxlength="50" /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item v-if="form.userId == undefined" label="鐢ㄦ埛鍚嶇О" prop="userName"> + <el-input v-model="form.userName" placeholder="璇疯緭鍏ョ敤鎴峰悕绉�" maxlength="30" /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item v-if="form.userId == undefined" label="鐢ㄦ埛瀵嗙爜" prop="password"> + <el-input + v-model="form.password" + placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�" + type="password" + maxlength="20" + show-password + /> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item label="鐢ㄦ埛鎬у埆"> + <el-select v-model="form.sex" placeholder="璇烽�夋嫨"> + <el-option + v-for="dict in sys_user_sex" + :key="dict.value" + :label="dict.label" + :value="dict.value" + ></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="鐘舵��"> + <el-radio-group v-model="form.status"> + <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ + dict.label + }}</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="12"> + <el-form-item label="宀椾綅"> + <el-select v-model="form.postIds" multiple placeholder="璇烽�夋嫨"> + <el-option + v-for="item in postOptions" + :key="item.postId" + :label="item.postName" + :value="item.postId" + :disabled="item.status == 1" + ></el-option> + </el-select> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="瑙掕壊"> + <el-select v-model="form.roleIds" multiple placeholder="璇烽�夋嫨"> + <el-option + v-for="item in roleOptions" + :key="item.roleId" + :label="item.roleName" + :value="item.roleId" + :disabled="item.status == 1" + ></el-option> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row> + <el-col :span="24"> + <el-form-item label="澶囨敞"> + <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> - <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� --> - <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body> - <el-upload - ref="uploadRef" - :limit="1" - accept=".xlsx, .xls" - :headers="upload.headers" - :action="upload.url + '?updateSupport=' + upload.updateSupport" - :disabled="upload.isUploading" - :on-progress="handleFileUploadProgress" - :on-success="handleFileSuccess" - :auto-upload="false" - drag - > - <el-icon class="el-icon--upload"><upload-filled /></el-icon> - <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> - <template #tip> - <div class="el-upload__tip text-center"> - <div class="el-upload__tip"> - <el-checkbox v-model="upload.updateSupport" />鏄惁鏇存柊宸茬粡瀛樺湪鐨勭敤鎴锋暟鎹� - </div> - <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span> - <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">涓嬭浇妯℃澘</el-link> - </div> - </template> - </el-upload> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitFileForm">纭� 瀹�</el-button> - <el-button @click="upload.open = false">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - </div> + <!-- 鐢ㄦ埛瀵煎叆瀵硅瘽妗� --> + <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body> + <el-upload + ref="uploadRef" + :limit="1" + accept=".xlsx, .xls" + :headers="upload.headers" + :action="upload.url + '?updateSupport=' + upload.updateSupport" + :disabled="upload.isUploading" + :on-progress="handleFileUploadProgress" + :on-success="handleFileSuccess" + :auto-upload="false" + drag + > + <el-icon class="el-icon--upload"><upload-filled /></el-icon> + <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div> + <template #tip> + <div class="el-upload__tip text-center"> + <div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />鏄惁鏇存柊宸茬粡瀛樺湪鐨勭敤鎴锋暟鎹�</div> + <span>浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢銆�</span> + <el-link + type="primary" + :underline="false" + style="font-size: 12px; vertical-align: baseline" + @click="importTemplate" + >涓嬭浇妯℃澘</el-link + > + </div> + </template> + </el-upload> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitFileForm">纭� 瀹�</el-button> + <el-button @click="upload.open = false">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> </template> <script setup name="User"> -import { getToken } from "@/utils/auth"; -import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"; +import { getToken } from "@/utils/auth" +import { + changeUserStatus, + listUser, + resetUserPwd, + delUser, + getUser, + updateUser, + addUser, + deptTreeSelect, +} from "@/api/system/user" -const router = useRouter(); -const { proxy } = getCurrentInstance(); -const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex"); +const router = useRouter() +const { proxy } = getCurrentInstance() +const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex") -const userList = ref([]); -const open = ref(false); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const total = ref(0); -const title = ref(""); -const dateRange = ref([]); -const deptName = ref(""); -const deptOptions = ref(undefined); -const initPassword = ref(undefined); -const postOptions = ref([]); -const roleOptions = ref([]); +const userList = ref([]) +const open = ref(false) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const title = ref("") +const dateRange = ref([]) +const deptName = ref("") +const deptOptions = ref(undefined) +const initPassword = ref(undefined) +const postOptions = ref([]) +const roleOptions = ref([]) /*** 鐢ㄦ埛瀵煎叆鍙傛暟 */ const upload = reactive({ // 鏄惁鏄剧ず寮瑰嚭灞傦紙鐢ㄦ埛瀵煎叆锛� @@ -365,8 +429,8 @@ // 璁剧疆涓婁紶鐨勮姹傚ご閮� headers: { Authorization: "Bearer " + getToken() }, // 涓婁紶鐨勫湴鍧� - url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData" -}); + url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData", +}) // 鍒楁樉闅愪俊鎭� const columns = ref([ { key: 0, label: `鐢ㄦ埛缂栧彿`, visible: true }, @@ -375,8 +439,8 @@ { key: 3, label: `閮ㄩ棬`, visible: true }, { key: 4, label: `鎵嬫満鍙风爜`, visible: true }, { key: 5, label: `鐘舵�乣, visible: true }, - { key: 6, label: `鍒涘缓鏃堕棿`, visible: true } -]); + { key: 6, label: `鍒涘缓鏃堕棿`, visible: true }, +]) const data = reactive({ form: {}, @@ -386,157 +450,182 @@ userName: undefined, phoneNumber: undefined, status: undefined, - deptId: undefined + deptId: undefined, }, rules: { - userName: [{ required: true, message: "鐢ㄦ埛鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }, { min: 2, max: 20, message: "鐢ㄦ埛鍚嶇О闀垮害蹇呴』浠嬩簬 2 鍜� 20 涔嬮棿", trigger: "blur" }], + userName: [ + { required: true, message: "鐢ㄦ埛鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }, + { min: 2, max: 20, message: "鐢ㄦ埛鍚嶇О闀垮害蹇呴』浠嬩簬 2 鍜� 20 涔嬮棿", trigger: "blur" }, + ], nickName: [{ required: true, message: "鐢ㄦ埛鏄电О涓嶈兘涓虹┖", trigger: "blur" }], - password: [{ required: true, message: "鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" }, { min: 5, max: 20, message: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |", trigger: "blur" }], + password: [ + { required: true, message: "鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" }, + { min: 5, max: 20, message: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", trigger: "blur" }, + { pattern: /^[^<>"'|\\]+$/, message: "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |", trigger: "blur" }, + ], email: [{ type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] }], - phoneNumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }] - } -}); + phoneNumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }], + }, +}) -const { queryParams, form, rules } = toRefs(data); +const { queryParams, form, rules } = toRefs(data) /** 閫氳繃鏉′欢杩囨护鑺傜偣 */ const filterNode = (value, data) => { - if (!value) return true; - return data.label.indexOf(value) !== -1; -}; + if (!value) return true + return data.label.indexOf(value) !== -1 +} /** 鏍规嵁鍚嶇О绛涢�夐儴闂ㄦ爲 */ -watch(deptName, val => { - proxy.$refs["deptTreeRef"].filter(val); -}); +watch(deptName, (val) => { + proxy.$refs["deptTreeRef"].filter(val) +}) /** 鏌ヨ閮ㄩ棬涓嬫媺鏍戠粨鏋� */ function getDeptTree() { - deptTreeSelect().then(response => { - deptOptions.value = response.data; - }); -}; + deptTreeSelect().then((response) => { + deptOptions.value = response.data + }) +} /** 鏌ヨ鐢ㄦ埛鍒楄〃 */ function getList() { - loading.value = true; - listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => { - loading.value = false; - userList.value = res.rows; - total.value = res.total; - }); -}; + loading.value = true + listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => { + loading.value = false + userList.value = res.rows + total.value = res.total + }) +} /** 鑺傜偣鍗曞嚮浜嬩欢 */ function handleNodeClick(data) { - queryParams.value.deptId = data.id; - handleQuery(); -}; + queryParams.value.deptId = data.id + handleQuery() +} /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); -}; + queryParams.value.pageNum = 1 + getList() +} /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - dateRange.value = []; - proxy.resetForm("queryRef"); - queryParams.value.deptId = undefined; - proxy.$refs.deptTreeRef.setCurrentKey(null); - handleQuery(); -}; + dateRange.value = [] + proxy.resetForm("queryRef") + queryParams.value.deptId = undefined + proxy.$refs.deptTreeRef.setCurrentKey(null) + handleQuery() +} /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const userIds = row.userId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎鐢ㄦ埛缂栧彿涓�"' + userIds + '"鐨勬暟鎹」锛�').then(function () { - return delUser(userIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); -}; + const userIds = row.userId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎鐢ㄦ埛缂栧彿涓�"' + userIds + '"鐨勬暟鎹」锛�') + .then(function () { + return delUser(userIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) +} /** 瀵煎嚭鎸夐挳鎿嶄綔 */ function handleExport() { - proxy.download("system/user/export", { - ...queryParams.value, - },`user_${new Date().getTime()}.xlsx`); -}; + proxy.download( + "system/user/export", + { + ...queryParams.value, + }, + `user_${new Date().getTime()}.xlsx` + ) +} /** 鐢ㄦ埛鐘舵�佷慨鏀� */ function handleStatusChange(row) { - let text = row.status === "0" ? "鍚敤" : "鍋滅敤"; - proxy.$modal.confirm('纭瑕�"' + text + '""' + row.userName + '"鐢ㄦ埛鍚�?').then(function () { - return changeUserStatus(row.userId, row.status); - }).then(() => { - proxy.$modal.msgSuccess(text + "鎴愬姛"); - }).catch(function () { - row.status = row.status === "0" ? "1" : "0"; - }); -}; + let text = row.status === "0" ? "鍚敤" : "鍋滅敤" + proxy.$modal + .confirm('纭瑕�"' + text + '""' + row.userName + '"鐢ㄦ埛鍚�?') + .then(function () { + return changeUserStatus(row.userId, row.status) + }) + .then(() => { + proxy.$modal.msgSuccess(text + "鎴愬姛") + }) + .catch(function () { + row.status = row.status === "0" ? "1" : "0" + }) +} /** 鏇村鎿嶄綔 */ function handleCommand(command, row) { switch (command) { case "handleResetPwd": - handleResetPwd(row); - break; + handleResetPwd(row) + break case "handleAuthRole": - handleAuthRole(row); - break; + handleAuthRole(row) + break default: - break; + break } -}; +} /** 璺宠浆瑙掕壊鍒嗛厤 */ function handleAuthRole(row) { - const userId = row.userId; - router.push("/system/user-auth/role/" + userId); -}; + const userId = row.userId + router.push("/system/user-auth/role/" + userId) +} /** 閲嶇疆瀵嗙爜鎸夐挳鎿嶄綔 */ function handleResetPwd(row) { - proxy.$prompt('璇疯緭鍏�"' + row.userName + '"鐨勬柊瀵嗙爜', "鎻愮ず", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - closeOnClickModal: false, - inputPattern: /^.{5,20}$/, - inputErrorMessage: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", - inputValidator: (value) => { - if (/<|>|"|'|\||\\/.test(value)) { - return "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |" - } - }, - }).then(({ value }) => { - resetUserPwd(row.userId, value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛锛屾柊瀵嗙爜鏄細" + value); - }); - }).catch(() => {}); -}; + proxy + .$prompt('璇疯緭鍏�"' + row.userName + '"鐨勬柊瀵嗙爜', "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + closeOnClickModal: false, + inputPattern: /^.{5,20}$/, + inputErrorMessage: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", + inputValidator: (value) => { + if (/<|>|"|'|\||\\/.test(value)) { + return "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |" + } + }, + }) + .then(({ value }) => { + resetUserPwd(row.userId, value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛锛屾柊瀵嗙爜鏄細" + value) + }) + }) + .catch(() => {}) +} /** 閫夋嫨鏉℃暟 */ function handleSelectionChange(selection) { - ids.value = selection.map(item => item.userId); - single.value = selection.length != 1; - multiple.value = !selection.length; -}; + ids.value = selection.map((item) => item.userId) + single.value = selection.length != 1 + multiple.value = !selection.length +} /** 瀵煎叆鎸夐挳鎿嶄綔 */ function handleImport() { - upload.title = "鐢ㄦ埛瀵煎叆"; - upload.open = true; -}; + upload.title = "鐢ㄦ埛瀵煎叆" + upload.open = true +} /** 涓嬭浇妯℃澘鎿嶄綔 */ function importTemplate() { - proxy.download("system/user/importTemplate", { - }, `user_template_${new Date().getTime()}.xlsx`); -}; + proxy.download("system/user/importTemplate", {}, `user_template_${new Date().getTime()}.xlsx`) +} /**鏂囦欢涓婁紶涓鐞� */ const handleFileUploadProgress = (event, file, fileList) => { - upload.isUploading = true; -}; + upload.isUploading = true +} /** 鏂囦欢涓婁紶鎴愬姛澶勭悊 */ const handleFileSuccess = (response, file, fileList) => { - upload.open = false; - upload.isUploading = false; - proxy.$refs["uploadRef"].handleRemove(file); - proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "瀵煎叆缁撴灉", { dangerouslyUseHTMLString: true }); - getList(); -}; + upload.open = false + upload.isUploading = false + proxy.$refs["uploadRef"].handleRemove(file) + proxy.$alert( + "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", + "瀵煎叆缁撴灉", + { dangerouslyUseHTMLString: true } + ) + getList() +} /** 鎻愪氦涓婁紶鏂囦欢 */ function submitFileForm() { - proxy.$refs["uploadRef"].submit(); -}; + proxy.$refs["uploadRef"].submit() +} /** 閲嶇疆鎿嶄綔琛ㄥ崟 */ function reset() { form.value = { @@ -551,62 +640,66 @@ status: "0", remark: undefined, postIds: [], - roleIds: [] - }; - proxy.resetForm("userRef"); -}; + roleIds: [], + } + proxy.resetForm("userRef") +} /** 鍙栨秷鎸夐挳 */ function cancel() { - open.value = false; - reset(); -}; + open.value = false + reset() +} /** 鏂板鎸夐挳鎿嶄綔 */ function handleAdd() { - reset(); - getUser().then(response => { - postOptions.value = response.posts; - roleOptions.value = response.roles; - open.value = true; - title.value = "娣诲姞鐢ㄦ埛"; - form.value.password = initPassword.value; - }); -}; + reset() + getUser().then((response) => { + postOptions.value = response.posts + roleOptions.value = response.roles + open.value = true + title.value = "娣诲姞鐢ㄦ埛" + form.value.password = initPassword.value + }) +} /** 淇敼鎸夐挳鎿嶄綔 */ function handleUpdate(row) { - reset(); - const userId = row.userId || ids.value; - getUser(userId).then(response => { - form.value = response.data; - postOptions.value = response.posts; - roleOptions.value = response.roles; - form.value.postIds = response.postIds; - form.value.roleIds = response.roleIds; - open.value = true; - title.value = "淇敼鐢ㄦ埛"; - form.password = ""; - }); -}; + reset() + const userId = row.userId || ids.value + getUser(userId).then((response) => { + form.value = response.data + postOptions.value = response.posts + roleOptions.value = response.roles + form.value.postIds = response.postIds + form.value.roleIds = response.roleIds + open.value = true + title.value = "淇敼鐢ㄦ埛" + form.password = "" + }) +} /** 鎻愪氦鎸夐挳 */ function submitForm() { - proxy.$refs["userRef"].validate(valid => { + proxy.$refs["userRef"].validate((valid) => { if (valid) { if (form.value.userId != undefined) { - updateUser(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); + updateUser(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + open.value = false + getList() + }) } else { - addUser(form.value).then(response => { - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); + addUser(form.value).then((response) => { + proxy.$modal.msgSuccess("鏂板鎴愬姛") + open.value = false + getList() + }) } } - }); -}; + }) +} -getDeptTree(); -getList(); +getDeptTree() +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> diff --git a/zhitan-vue/src/views/system/user/profile/index.vue b/zhitan-vue/src/views/system/user/profile/index.vue index e34c98b..56ba9bc 100644 --- a/zhitan-vue/src/views/system/user/profile/index.vue +++ b/zhitan-vue/src/views/system/user/profile/index.vue @@ -1,87 +1,89 @@ <template> - <div class="app-container"> - <el-row :gutter="20"> - <el-col :span="6" :xs="24"> - <el-card class="box-card"> - <template v-slot:header> - <div class="clearfix"> - <span>涓汉淇℃伅</span> - </div> - </template> - <div> - <div class="text-center"> - <userAvatar /> - </div> - <ul class="list-group list-group-striped"> - <li class="list-group-item"> - <svg-icon icon-class="user" />鐢ㄦ埛鍚嶇О - <div class="pull-right">{{ state.user.userName }}</div> - </li> - <li class="list-group-item"> - <svg-icon icon-class="phone" />鎵嬫満鍙风爜 - <div class="pull-right">{{ state.user.phoneNumber }}</div> - </li> - <li class="list-group-item"> - <svg-icon icon-class="email" />鐢ㄦ埛閭 - <div class="pull-right">{{ state.user.email }}</div> - </li> - <li class="list-group-item"> - <svg-icon icon-class="tree" />鎵�灞為儴闂� - <div class="pull-right" v-if="state.user.dept">{{ state.user.dept.deptName }} / {{ state.postGroup }}</div> - </li> - <li class="list-group-item"> - <svg-icon icon-class="peoples" />鎵�灞炶鑹� - <div class="pull-right">{{ state.roleGroup }}</div> - </li> - <li class="list-group-item"> - <svg-icon icon-class="date" />鍒涘缓鏃ユ湡 - <div class="pull-right">{{ state.user.createTime }}</div> - </li> - </ul> - </div> - </el-card> - </el-col> - <el-col :span="18" :xs="24"> - <el-card> - <template v-slot:header> - <div class="clearfix"> - <span>鍩烘湰璧勬枡</span> - </div> - </template> - <el-tabs v-model="activeTab"> - <el-tab-pane label="鍩烘湰璧勬枡" name="userinfo"> - <userInfo :user="state.user" /> - </el-tab-pane> - <el-tab-pane label="淇敼瀵嗙爜" name="resetPwd"> - <resetPwd /> - </el-tab-pane> - </el-tabs> - </el-card> - </el-col> - </el-row> - </div> + <div class="app-container"> + <el-row :gutter="20"> + <el-col :span="6" :xs="24"> + <el-card class="box-card"> + <template v-slot:header> + <div class="clearfix"> + <span>涓汉淇℃伅</span> + </div> + </template> + <div> + <div class="text-center"> + <userAvatar /> + </div> + <ul class="list-group list-group-striped"> + <li class="list-group-item"> + <svg-icon icon-class="user" />鐢ㄦ埛鍚嶇О + <div class="pull-right">{{ state.user.userName }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="phone" />鎵嬫満鍙风爜 + <div class="pull-right">{{ state.user.phoneNumber }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="email" />鐢ㄦ埛閭 + <div class="pull-right">{{ state.user.email }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="tree" />鎵�灞為儴闂� + <div class="pull-right" v-if="state.user.dept"> + {{ state.user.dept.deptName }} / {{ state.postGroup }} + </div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="peoples" />鎵�灞炶鑹� + <div class="pull-right">{{ state.roleGroup }}</div> + </li> + <li class="list-group-item"> + <svg-icon icon-class="date" />鍒涘缓鏃ユ湡 + <div class="pull-right">{{ state.user.createTime }}</div> + </li> + </ul> + </div> + </el-card> + </el-col> + <el-col :span="18" :xs="24"> + <el-card> + <template v-slot:header> + <div class="clearfix"> + <span>鍩烘湰璧勬枡</span> + </div> + </template> + <el-tabs v-model="activeTab"> + <el-tab-pane label="鍩烘湰璧勬枡" name="userinfo"> + <userInfo :user="state.user" /> + </el-tab-pane> + <el-tab-pane label="淇敼瀵嗙爜" name="resetPwd"> + <resetPwd /> + </el-tab-pane> + </el-tabs> + </el-card> + </el-col> + </el-row> + </div> </template> <script setup name="Profile"> -import userAvatar from "./userAvatar"; -import userInfo from "./userInfo"; -import resetPwd from "./resetPwd"; -import { getUserProfile } from "@/api/system/user"; +import userAvatar from "./userAvatar" +import userInfo from "./userInfo" +import resetPwd from "./resetPwd" +import { getUserProfile } from "@/api/system/user" -const activeTab = ref("userinfo"); +const activeTab = ref("userinfo") const state = reactive({ user: {}, roleGroup: {}, - postGroup: {} -}); + postGroup: {}, +}) function getUser() { - getUserProfile().then(response => { - state.user = response.data; - state.roleGroup = response.roleGroup; - state.postGroup = response.postGroup; - }); -}; + getUserProfile().then((response) => { + state.user = response.data + state.roleGroup = response.roleGroup + state.postGroup = response.postGroup + }) +} -getUser(); +getUser() </script> diff --git a/zhitan-vue/src/views/system/user/profile/resetPwd.vue b/zhitan-vue/src/views/system/user/profile/resetPwd.vue index 96daef3..f4ab06f 100644 --- a/zhitan-vue/src/views/system/user/profile/resetPwd.vue +++ b/zhitan-vue/src/views/system/user/profile/resetPwd.vue @@ -1,57 +1,64 @@ <template> - <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px"> - <el-form-item label="鏃у瘑鐮�" prop="oldPassword"> - <el-input v-model="user.oldPassword" placeholder="璇疯緭鍏ユ棫瀵嗙爜" type="password" show-password /> - </el-form-item> - <el-form-item label="鏂板瘑鐮�" prop="newPassword"> - <el-input v-model="user.newPassword" placeholder="璇疯緭鍏ユ柊瀵嗙爜" type="password" show-password /> - </el-form-item> - <el-form-item label="纭瀵嗙爜" prop="confirmPassword"> - <el-input v-model="user.confirmPassword" placeholder="璇风‘璁ゆ柊瀵嗙爜" type="password" show-password/> - </el-form-item> - <el-form-item> - <el-button type="primary" @click="submit">淇濆瓨</el-button> + <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px"> + <el-form-item label="鏃у瘑鐮�" prop="oldPassword"> + <el-input v-model="user.oldPassword" placeholder="璇疯緭鍏ユ棫瀵嗙爜" type="password" show-password /> + </el-form-item> + <el-form-item label="鏂板瘑鐮�" prop="newPassword"> + <el-input v-model="user.newPassword" placeholder="璇疯緭鍏ユ柊瀵嗙爜" type="password" show-password /> + </el-form-item> + <el-form-item label="纭瀵嗙爜" prop="confirmPassword"> + <el-input v-model="user.confirmPassword" placeholder="璇风‘璁ゆ柊瀵嗙爜" type="password" show-password /> + </el-form-item> + <el-form-item> + <!-- <el-button type="primary" @click="submit">淇濆瓨</el-button> --> <el-button type="danger" @click="close">鍏抽棴</el-button> - </el-form-item> - </el-form> + </el-form-item> + </el-form> </template> <script setup> -import { updateUserPwd } from "@/api/system/user"; +import { updateUserPwd } from "@/api/system/user" -const { proxy } = getCurrentInstance(); +const { proxy } = getCurrentInstance() const user = reactive({ oldPassword: undefined, newPassword: undefined, - confirmPassword: undefined -}); + confirmPassword: undefined, +}) const equalToPassword = (rule, value, callback) => { if (user.newPassword !== value) { - callback(new Error("涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�")); + callback(new Error("涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�")) } else { - callback(); + callback() } -}; +} const rules = ref({ oldPassword: [{ required: true, message: "鏃у瘑鐮佷笉鑳戒负绌�", trigger: "blur" }], - newPassword: [{ required: true, message: "鏂板瘑鐮佷笉鑳戒负绌�", trigger: "blur" }, { min: 6, max: 20, message: "闀垮害鍦� 6 鍒� 20 涓瓧绗�", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |", trigger: "blur" }], - confirmPassword: [{ required: true, message: "纭瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }] -}); + newPassword: [ + { required: true, message: "鏂板瘑鐮佷笉鑳戒负绌�", trigger: "blur" }, + { min: 6, max: 20, message: "闀垮害鍦� 6 鍒� 20 涓瓧绗�", trigger: "blur" }, + { pattern: /^[^<>"'|\\]+$/, message: "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |", trigger: "blur" }, + ], + confirmPassword: [ + { required: true, message: "纭瀵嗙爜涓嶈兘涓虹┖", trigger: "blur" }, + { required: true, validator: equalToPassword, trigger: "blur" }, + ], +}) /** 鎻愪氦鎸夐挳 */ function submit() { - proxy.$refs.pwdRef.validate(valid => { + proxy.$refs.pwdRef.validate((valid) => { if (valid) { - updateUserPwd(user.oldPassword, user.newPassword).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - }); + updateUserPwd(user.oldPassword, user.newPassword).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + }) } - }); -}; + }) +} /** 鍏抽棴鎸夐挳 */ function close() { - proxy.$tab.closePage(); -}; + proxy.$tab.closePage() +} </script> diff --git a/zhitan-vue/src/views/system/user/profile/userAvatar.vue b/zhitan-vue/src/views/system/user/profile/userAvatar.vue index 3b39636..94b898e 100644 --- a/zhitan-vue/src/views/system/user/profile/userAvatar.vue +++ b/zhitan-vue/src/views/system/user/profile/userAvatar.vue @@ -26,12 +26,7 @@ <br /> <el-row> <el-col :lg="2" :md="2"> - <el-upload - action="#" - :http-request="requestUpload" - :show-file-list="false" - :before-upload="beforeUpload" - > + <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"> <el-button> 閫夋嫨 <el-icon class="el-icon--right"><Upload /></el-icon> @@ -51,7 +46,7 @@ <el-button icon="RefreshRight" @click="rotateRight()"></el-button> </el-col> <el-col :lg="{ span: 2, offset: 6 }" :md="2"> - <el-button type="primary" @click="uploadImg()">鎻� 浜�</el-button> + <!-- <el-button type="primary" @click="uploadImg()">鎻� 浜�</el-button> --> </el-col> </el-row> </el-dialog> @@ -59,92 +54,92 @@ </template> <script setup> -import "vue-cropper/dist/index.css"; -import { VueCropper } from "vue-cropper"; -import { uploadAvatar } from "@/api/system/user"; -import useUserStore from "@/store/modules/user"; +import "vue-cropper/dist/index.css" +import { VueCropper } from "vue-cropper" +import { uploadAvatar } from "@/api/system/user" +import useUserStore from "@/store/modules/user" -const userStore = useUserStore(); -const { proxy } = getCurrentInstance(); +const userStore = useUserStore() +const { proxy } = getCurrentInstance() -const open = ref(false); -const visible = ref(false); -const title = ref("淇敼澶村儚"); +const open = ref(false) +const visible = ref(false) +const title = ref("淇敼澶村儚") //鍥剧墖瑁佸壀鏁版嵁 const options = reactive({ - img: userStore.avatar, // 瑁佸壀鍥剧墖鐨勫湴鍧� - autoCrop: true, // 鏄惁榛樿鐢熸垚鎴浘妗� - autoCropWidth: 200, // 榛樿鐢熸垚鎴浘妗嗗搴� - autoCropHeight: 200, // 榛樿鐢熸垚鎴浘妗嗛珮搴� - fixedBox: true, // 鍥哄畾鎴浘妗嗗ぇ灏� 涓嶅厑璁告敼鍙� - outputType: "png", // 榛樿鐢熸垚鎴浘涓篜NG鏍煎紡 - filename: 'avatar', // 鏂囦欢鍚嶇О - previews: {} //棰勮鏁版嵁 -}); + img: userStore.avatar, // 瑁佸壀鍥剧墖鐨勫湴鍧� + autoCrop: true, // 鏄惁榛樿鐢熸垚鎴浘妗� + autoCropWidth: 200, // 榛樿鐢熸垚鎴浘妗嗗搴� + autoCropHeight: 200, // 榛樿鐢熸垚鎴浘妗嗛珮搴� + fixedBox: true, // 鍥哄畾鎴浘妗嗗ぇ灏� 涓嶅厑璁告敼鍙� + outputType: "png", // 榛樿鐢熸垚鎴浘涓篜NG鏍煎紡 + filename: "avatar", // 鏂囦欢鍚嶇О + previews: {}, //棰勮鏁版嵁 +}) /** 缂栬緫澶村儚 */ function editCropper() { - open.value = true; + open.value = true } /** 鎵撳紑寮瑰嚭灞傜粨鏉熸椂鐨勫洖璋� */ function modalOpened() { - visible.value = true; + visible.value = true } /** 瑕嗙洊榛樿涓婁紶琛屼负 */ function requestUpload() {} /** 鍚戝乏鏃嬭浆 */ function rotateLeft() { - proxy.$refs.cropper.rotateLeft(); + proxy.$refs.cropper.rotateLeft() } /** 鍚戝彸鏃嬭浆 */ function rotateRight() { - proxy.$refs.cropper.rotateRight(); + proxy.$refs.cropper.rotateRight() } /** 鍥剧墖缂╂斁 */ function changeScale(num) { - num = num || 1; - proxy.$refs.cropper.changeScale(num); + num = num || 1 + proxy.$refs.cropper.changeScale(num) } /** 涓婁紶棰勫鐞� */ function beforeUpload(file) { if (file.type.indexOf("image/") == -1) { - proxy.$modal.msgError("鏂囦欢鏍煎紡閿欒锛岃涓婁紶鍥剧墖绫诲瀷,濡傦細JPG锛孭NG鍚庣紑鐨勬枃浠躲��"); + proxy.$modal.msgError("鏂囦欢鏍煎紡閿欒锛岃涓婁紶鍥剧墖绫诲瀷,濡傦細JPG锛孭NG鍚庣紑鐨勬枃浠躲��") } else { - const reader = new FileReader(); - reader.readAsDataURL(file); + const reader = new FileReader() + reader.readAsDataURL(file) reader.onload = () => { - options.img = reader.result; - options.filename = file.name; - }; + options.img = reader.result + options.filename = file.name + } } } /** 涓婁紶鍥剧墖 */ function uploadImg() { - proxy.$refs.cropper.getCropBlob(data => { - let formData = new FormData(); - formData.append("avatarfile", data, options.filename); - uploadAvatar(formData).then(response => { - open.value = false; - options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl; - userStore.avatar = options.img; - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - visible.value = false; - }); - }); + proxy.$refs.cropper.getCropBlob((data) => { + let formData = new FormData() + formData.append("avatarfile", data, options.filename) + uploadAvatar(formData).then((response) => { + open.value = false + options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl + userStore.avatar = options.img + proxy.$modal.msgSuccess("淇敼鎴愬姛") + visible.value = false + }) + }) } /** 瀹炴椂棰勮 */ function realTime(data) { - options.previews = data; + options.previews = data } /** 鍏抽棴绐楀彛 */ function closeDialog() { - options.img = userStore.avatar; - options.visible = false; + options.img = userStore.avatar + options.visible = false } </script> -<style lang='scss' scoped> +<style lang="scss" scoped> .user-info-head { position: relative; display: inline-block; @@ -168,4 +163,4 @@ line-height: 110px; border-radius: 50%; } -</style> \ No newline at end of file +</style> diff --git a/zhitan-vue/src/views/system/user/profile/userInfo.vue b/zhitan-vue/src/views/system/user/profile/userInfo.vue index f1d67b5..187c02e 100644 --- a/zhitan-vue/src/views/system/user/profile/userInfo.vue +++ b/zhitan-vue/src/views/system/user/profile/userInfo.vue @@ -1,67 +1,77 @@ <template> - <el-form ref="userRef" :model="form" :rules="rules" label-width="80px"> - <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName"> - <el-input v-model="form.nickName" maxlength="30" /> - </el-form-item> - <el-form-item label="鎵嬫満鍙风爜" prop="phoneNumber"> - <el-input v-model="form.phoneNumber" maxlength="11" /> - </el-form-item> - <el-form-item label="閭" prop="email"> - <el-input v-model="form.email" maxlength="50" /> - </el-form-item> - <el-form-item label="鎬у埆"> - <el-radio-group v-model="form.sex"> - <el-radio label="0">鐢�</el-radio> - <el-radio label="1">濂�</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item> - <el-button type="primary" @click="submit">淇濆瓨</el-button> + <el-form ref="userRef" :model="form" :rules="rules" label-width="80px"> + <el-form-item label="鐢ㄦ埛鏄电О" prop="nickName"> + <el-input v-model="form.nickName" maxlength="30" /> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜" prop="phoneNumber"> + <el-input v-model="form.phoneNumber" maxlength="11" /> + </el-form-item> + <el-form-item label="閭" prop="email"> + <el-input v-model="form.email" maxlength="50" /> + </el-form-item> + <el-form-item label="鎬у埆"> + <el-radio-group v-model="form.sex"> + <el-radio label="0">鐢�</el-radio> + <el-radio label="1">濂�</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item> + <!-- <el-button type="primary" @click="submit">淇濆瓨</el-button> --> <el-button type="danger" @click="close">鍏抽棴</el-button> - </el-form-item> - </el-form> + </el-form-item> + </el-form> </template> <script setup> -import { updateUserProfile } from "@/api/system/user"; +import { updateUserProfile } from "@/api/system/user" const props = defineProps({ user: { - type: Object - } -}); + type: Object, + }, +}) -const { proxy } = getCurrentInstance(); +const { proxy } = getCurrentInstance() -const form = ref({}); +const form = ref({}) const rules = ref({ nickName: [{ required: true, message: "鐢ㄦ埛鏄电О涓嶈兘涓虹┖", trigger: "blur" }], - email: [{ required: true, message: "閭鍦板潃涓嶈兘涓虹┖", trigger: "blur" }, { type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] }], - phoneNumber: [{ required: true, message: "鎵嬫満鍙风爜涓嶈兘涓虹┖", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }], -}); + email: [ + { required: true, message: "閭鍦板潃涓嶈兘涓虹┖", trigger: "blur" }, + { type: "email", message: "璇疯緭鍏ユ纭殑閭鍦板潃", trigger: ["blur", "change"] }, + ], + phoneNumber: [ + { required: true, message: "鎵嬫満鍙风爜涓嶈兘涓虹┖", trigger: "blur" }, + { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "璇疯緭鍏ユ纭殑鎵嬫満鍙风爜", trigger: "blur" }, + ], +}) /** 鎻愪氦鎸夐挳 */ function submit() { - proxy.$refs.userRef.validate(valid => { + proxy.$refs.userRef.validate((valid) => { if (valid) { - updateUserProfile(form.value).then(response => { - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - props.user.phoneNumber = form.value.phoneNumber; - props.user.email = form.value.email; - }); + updateUserProfile(form.value).then((response) => { + proxy.$modal.msgSuccess("淇敼鎴愬姛") + props.user.phoneNumber = form.value.phoneNumber + props.user.email = form.value.email + }) } - }); -}; + }) +} /** 鍏抽棴鎸夐挳 */ function close() { - proxy.$tab.closePage(); -}; + proxy.$tab.closePage() +} // 鍥炴樉褰撳墠鐧诲綍鐢ㄦ埛淇℃伅 -watch(() => props.user, user => { - if (user) { - form.value = { nickName: user.nickName, phoneNumber: user.phoneNumber, email: user.email, sex: user.sex }; - } -},{ immediate: true }); +watch( + () => props.user, + (user) => { + if (user) { + form.value = { nickName: user.nickName, phoneNumber: user.phoneNumber, email: user.email, sex: user.sex } + } + }, + { immediate: true } +) </script> diff --git a/zhitan-vue/src/views/tool/gen/index.vue b/zhitan-vue/src/views/tool/gen/index.vue index bea6531..538c139 100644 --- a/zhitan-vue/src/views/tool/gen/index.vue +++ b/zhitan-vue/src/views/tool/gen/index.vue @@ -1,156 +1,165 @@ <template> - <div class="app-container"> - <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> - <el-form-item label="琛ㄥ悕绉�" prop="tableName"> - <el-input - v-model="queryParams.tableName" - placeholder="璇疯緭鍏ヨ〃鍚嶇О" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="琛ㄦ弿杩�" prop="tableComment"> - <el-input - v-model="queryParams.tableComment" - placeholder="璇疯緭鍏ヨ〃鎻忚堪" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - ></el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> - </el-form> + <div class="app-container page"> + <div class="form-card"> + <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> + <el-form-item label="琛ㄥ悕绉�" prop="tableName"> + <el-input + v-model="queryParams.tableName" + placeholder="璇疯緭鍏ヨ〃鍚嶇О" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="琛ㄦ弿杩�" prop="tableComment"> + <el-input + v-model="queryParams.tableComment" + placeholder="璇疯緭鍏ヨ〃鎻忚堪" + clearable + style="width: 200px" + @keyup.enter="handleQuery" + /> + </el-form-item> + <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px"> + <el-date-picker + v-model="dateRange" + value-format="YYYY-MM-DD" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + ></el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </div> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="Download" - :disabled="multiple" - @click="handleGenTable" - v-hasPermi="['tool:gen:code']" - >鐢熸垚</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="Plus" - @click="openCreateTable" - v-hasRole="['admin']" - >鍒涘缓</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="info" - plain - icon="Upload" - @click="openImportTable" - v-hasPermi="['tool:gen:import']" - >瀵煎叆</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="success" - plain - icon="Edit" - :disabled="single" - @click="handleEditTable" - v-hasPermi="['tool:gen:edit']" - >淇敼</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['tool:gen:remove']" - >鍒犻櫎</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> - - <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" align="center" width="55"></el-table-column> - <el-table-column label="搴忓彿" type="index" width="50" align="center"> - <template #default="scope"> - <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span> - </template> - </el-table-column> - <el-table-column - label="琛ㄥ悕绉�" - align="center" - prop="tableName" - :show-overflow-tooltip="true" - /> - <el-table-column - label="琛ㄦ弿杩�" - align="center" - prop="tableComment" - :show-overflow-tooltip="true" - /> - <el-table-column - label="瀹炰綋" - align="center" - prop="className" - :show-overflow-tooltip="true" - /> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="160" /> - <el-table-column label="鏇存柊鏃堕棿" align="center" prop="updateTime" width="160" /> - <el-table-column label="鎿嶄綔" align="center" width="330" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-tooltip content="棰勮" placement="top"> - <el-button link type="primary" icon="View" @click="handlePreview(scope.row)" v-hasPermi="['tool:gen:preview']"></el-button> - </el-tooltip> - <el-tooltip content="缂栬緫" placement="top"> - <el-button link type="primary" icon="Edit" @click="handleEditTable(scope.row)" v-hasPermi="['tool:gen:edit']"></el-button> - </el-tooltip> - <el-tooltip content="鍒犻櫎" placement="top"> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['tool:gen:remove']"></el-button> - </el-tooltip> - <el-tooltip content="鍚屾" placement="top"> - <el-button link type="primary" icon="Refresh" @click="handleSynchDb(scope.row)" v-hasPermi="['tool:gen:edit']"></el-button> - </el-tooltip> - <el-tooltip content="鐢熸垚浠g爜" placement="top"> - <el-button link type="primary" icon="Download" @click="handleGenTable(scope.row)" v-hasPermi="['tool:gen:code']"></el-button> - </el-tooltip> - </template> - </el-table-column> - </el-table> - <pagination - v-show="total>0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> + <div class="table-bg-style"> + <div class="table-box"> + <div style="margin-bottom: 12px"> + <el-button + type="primary" + plain + icon="Download" + :disabled="multiple" + @click="handleGenTable" + v-hasPermi="['tool:gen:code']" + >鐢熸垚</el-button + > + <el-button type="primary" plain icon="Plus" @click="openCreateTable" v-hasRole="['admin']">鍒涘缓</el-button> + <el-button type="info" plain icon="Upload" @click="openImportTable" v-hasPermi="['tool:gen:import']" + >瀵煎叆</el-button + > + <el-button + type="success" + plain + icon="Edit" + :disabled="single" + @click="handleEditTable" + v-hasPermi="['tool:gen:edit']" + >淇敼</el-button + > + <el-button + type="danger" + plain + icon="Delete" + :disabled="multiple" + @click="handleDelete" + v-hasPermi="['tool:gen:remove']" + >鍒犻櫎</el-button + > + </div> + <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" align="center" width="60"></el-table-column> + <el-table-column label="搴忓彿" type="index" width="60" align="center"> + <template #default="scope"> + <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span> + </template> + </el-table-column> + <el-table-column label="琛ㄥ悕绉�" align="center" prop="tableName" :show-overflow-tooltip="true" /> + <el-table-column label="琛ㄦ弿杩�" align="center" prop="tableComment" :show-overflow-tooltip="true" /> + <el-table-column label="瀹炰綋" align="center" prop="className" :show-overflow-tooltip="true" /> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="160" /> + <el-table-column label="鏇存柊鏃堕棿" align="center" prop="updateTime" width="160" /> + <el-table-column label="鎿嶄綔" align="center" width="330" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="棰勮" placement="top"> + <el-button + link + type="primary" + icon="View" + @click="handlePreview(scope.row)" + v-hasPermi="['tool:gen:preview']" + ></el-button> + </el-tooltip> + <el-tooltip content="缂栬緫" placement="top"> + <el-button + link + type="primary" + icon="Edit" + @click="handleEditTable(scope.row)" + v-hasPermi="['tool:gen:edit']" + ></el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button + link + type="primary" + icon="Delete" + @click="handleDelete(scope.row)" + v-hasPermi="['tool:gen:remove']" + ></el-button> + </el-tooltip> + <el-tooltip content="鍚屾" placement="top"> + <el-button + link + type="primary" + icon="Refresh" + @click="handleSynchDb(scope.row)" + v-hasPermi="['tool:gen:edit']" + ></el-button> + </el-tooltip> + <el-tooltip content="鐢熸垚浠g爜" placement="top"> + <el-button + link + type="primary" + icon="Download" + @click="handleGenTable(scope.row)" + v-hasPermi="['tool:gen:code']" + ></el-button> + </el-tooltip> + </template> + </el-table-column> + </el-table> + <pagination + v-show="total > 0" + :total="total" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + @pagination="getList" + /> + </div> + </div> <!-- 棰勮鐣岄潰 --> <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body class="scrollbar"> <el-tabs v-model="preview.activeName"> <el-tab-pane v-for="(value, key) in preview.data" - :label="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))" - :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))" + :label="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" + :name="key.substring(key.lastIndexOf('/') + 1, key.indexOf('.vm'))" :key="value" > - <el-link :underline="false" icon="DocumentCopy" v-copyText="value" v-copyText:callback="copyTextSuccess" style="float:right"> 澶嶅埗</el-link> + <el-link + :underline="false" + icon="DocumentCopy" + v-copyText="value" + v-copyText:callback="copyTextSuccess" + style="float: right" + > 澶嶅埗</el-link + > <pre>{{ value }}</pre> </el-tab-pane> </el-tabs> @@ -161,139 +170,151 @@ </template> <script setup name="Gen"> -import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen"; -import router from "@/router"; -import importTable from "./importTable"; -import createTable from "./createTable"; +import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen" +import router from "@/router" +import importTable from "./importTable" +import createTable from "./createTable" -const route = useRoute(); -const { proxy } = getCurrentInstance(); +const route = useRoute() +const { proxy } = getCurrentInstance() -const tableList = ref([]); -const loading = ref(true); -const showSearch = ref(true); -const ids = ref([]); -const single = ref(true); -const multiple = ref(true); -const total = ref(0); -const tableNames = ref([]); -const dateRange = ref([]); -const uniqueId = ref(""); +const tableList = ref([]) +const loading = ref(true) +const showSearch = ref(true) +const ids = ref([]) +const single = ref(true) +const multiple = ref(true) +const total = ref(0) +const tableNames = ref([]) +const dateRange = ref([]) +const uniqueId = ref("") const data = reactive({ queryParams: { pageNum: 1, pageSize: 10, tableName: undefined, - tableComment: undefined + tableComment: undefined, }, preview: { open: false, title: "浠g爜棰勮", data: {}, - activeName: "domain.java" - } -}); + activeName: "domain.java", + }, +}) -const { queryParams, preview } = toRefs(data); +const { queryParams, preview } = toRefs(data) onActivated(() => { - const time = route.query.t; + const time = route.query.t if (time != null && time != uniqueId.value) { - uniqueId.value = time; - queryParams.value.pageNum = Number(route.query.pageNum); - dateRange.value = []; - proxy.resetForm("queryForm"); - getList(); + uniqueId.value = time + queryParams.value.pageNum = Number(route.query.pageNum) + dateRange.value = [] + proxy.resetForm("queryForm") + getList() } }) /** 鏌ヨ琛ㄩ泦鍚� */ function getList() { - loading.value = true; - listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => { - tableList.value = response.rows; - total.value = response.total; - loading.value = false; - }); + loading.value = true + listTable(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => { + tableList.value = response.rows + total.value = response.total + loading.value = false + }) } /** 鎼滅储鎸夐挳鎿嶄綔 */ function handleQuery() { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1 + getList() } /** 鐢熸垚浠g爜鎿嶄綔 */ function handleGenTable(row) { - const tbNames = row.tableName || tableNames.value; + const tbNames = row.tableName || tableNames.value if (tbNames == "") { - proxy.$modal.msgError("璇烽�夋嫨瑕佺敓鎴愮殑鏁版嵁"); - return; + proxy.$modal.msgError("璇烽�夋嫨瑕佺敓鎴愮殑鏁版嵁") + return } if (row.genType === "1") { - genCode(row.tableName).then(response => { - proxy.$modal.msgSuccess("鎴愬姛鐢熸垚鍒拌嚜瀹氫箟璺緞锛�" + row.genPath); - }); + genCode(row.tableName).then((response) => { + proxy.$modal.msgSuccess("鎴愬姛鐢熸垚鍒拌嚜瀹氫箟璺緞锛�" + row.genPath) + }) } else { - proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, "ruoyi.zip"); + proxy.$download.zip("/tool/gen/batchGenCode?tables=" + tbNames, "ruoyi.zip") } } /** 鍚屾鏁版嵁搴撴搷浣� */ function handleSynchDb(row) { - const tableName = row.tableName; - proxy.$modal.confirm('纭瑕佸己鍒跺悓姝�"' + tableName + '"琛ㄧ粨鏋勫悧锛�').then(function () { - return synchDb(tableName); - }).then(() => { - proxy.$modal.msgSuccess("鍚屾鎴愬姛"); - }).catch(() => {}); + const tableName = row.tableName + proxy.$modal + .confirm('纭瑕佸己鍒跺悓姝�"' + tableName + '"琛ㄧ粨鏋勫悧锛�') + .then(function () { + return synchDb(tableName) + }) + .then(() => { + proxy.$modal.msgSuccess("鍚屾鎴愬姛") + }) + .catch(() => {}) } /** 鎵撳紑瀵煎叆琛ㄥ脊绐� */ function openImportTable() { - proxy.$refs["importRef"].show(); + proxy.$refs["importRef"].show() } /** 鎵撳紑鍒涘缓琛ㄥ脊绐� */ function openCreateTable() { - proxy.$refs["createRef"].show(); + proxy.$refs["createRef"].show() } /** 閲嶇疆鎸夐挳鎿嶄綔 */ function resetQuery() { - dateRange.value = []; - proxy.resetForm("queryRef"); - handleQuery(); + dateRange.value = [] + proxy.resetForm("queryRef") + handleQuery() } /** 棰勮鎸夐挳 */ function handlePreview(row) { - previewTable(row.tableId).then(response => { - preview.value.data = response.data; - preview.value.open = true; - preview.value.activeName = "domain.java"; - }); + previewTable(row.tableId).then((response) => { + preview.value.data = response.data + preview.value.open = true + preview.value.activeName = "domain.java" + }) } /** 澶嶅埗浠g爜鎴愬姛 */ function copyTextSuccess() { - proxy.$modal.msgSuccess("澶嶅埗鎴愬姛"); + proxy.$modal.msgSuccess("澶嶅埗鎴愬姛") } // 澶氶�夋閫変腑鏁版嵁 function handleSelectionChange(selection) { - ids.value = selection.map(item => item.tableId); - tableNames.value = selection.map(item => item.tableName); - single.value = selection.length != 1; - multiple.value = !selection.length; + ids.value = selection.map((item) => item.tableId) + tableNames.value = selection.map((item) => item.tableName) + single.value = selection.length != 1 + multiple.value = !selection.length } /** 淇敼鎸夐挳鎿嶄綔 */ function handleEditTable(row) { - const tableId = row.tableId || ids.value[0]; - router.push({ path: "/tool/gen-edit/index/" + tableId, query: { pageNum: queryParams.value.pageNum } }); + const tableId = row.tableId || ids.value[0] + router.push({ path: "/tool/gen-edit/index/" + tableId, query: { pageNum: queryParams.value.pageNum } }) } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ function handleDelete(row) { - const tableIds = row.tableId || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎琛ㄧ紪鍙蜂负"' + tableIds + '"鐨勬暟鎹」锛�').then(function () { - return delTable(tableIds); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - }).catch(() => {}); + const tableIds = row.tableId || ids.value + proxy.$modal + .confirm('鏄惁纭鍒犻櫎琛ㄧ紪鍙蜂负"' + tableIds + '"鐨勬暟鎹」锛�') + .then(function () { + return delTable(tableIds) + }) + .then(() => { + getList() + proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛") + }) + .catch(() => {}) } -getList(); +getList() </script> + +<style lang="scss" scoped> +@import "@/assets/styles/page.scss"; +</style> -- Gitblit v1.9.3