From b541e03cd3a1c7d73ed6b9dc55bd956f39e4108b Mon Sep 17 00:00:00 2001
From: wangting <wangting@vci-tech.com>
Date: 星期三, 08 一月 2025 15:44:16 +0800
Subject: [PATCH] 调整图标在树、列表中的显示，按钮配置修改样式
---
Source/plt-web/plt-web-ui/src/views/system/password/index.vue | 504 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 502 insertions(+), 2 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/src/views/system/password/index.vue b/Source/plt-web/plt-web-ui/src/views/system/password/index.vue
index 54b19c1..4e52112 100644
--- a/Source/plt-web/plt-web-ui/src/views/system/password/index.vue
+++ b/Source/plt-web/plt-web-ui/src/views/system/password/index.vue
@@ -1,13 +1,513 @@
<template>
+ <basic-container>
+ <avue-crud
+ ref="passWordCrud"
+ v-model="form"
+ :data="tableData"
+ :option="option"
+ :page.sync="page"
+ :table-loading="tableLoading"
+ @on-load="getTableList"
+ @refresh-change="handleRefresh"
+ @size-change="sizeChange"
+ @current-change="currentChange"
+ @row-save="rowSaveHandler"
+ @row-update="rowUpdateHandler"
+ >
+ <template slot="menuLeft" slot-scope="{ row, index }">
+ <el-button v-if="permissionList.addBtn" class="button-custom-icon" size="small"
+ type="primary" @click="$refs.passWordCrud.rowAdd()">
+ <icon-show :name="permissionList.addBtn.source"></icon-show>
+ 鏂� 澧�
+ </el-button>
+ </template>
+ <template slot="menu" slot-scope="{ row, index }">
+ <el-button
+ v-if="permissionList.editBtn"
+ size="small"
+ type="text"
+ @click="handleEdit(row, index)"
+ >
+ <icon-show :name="permissionList.editBtn.source"></icon-show>
+ 缂栬緫
+ </el-button>
+ <el-button
+ v-if="permissionList.delBtn"
+ size="small"
+ type="text"
+ @click="handleDel(row, index)"
+ >
+ <icon-show :name="permissionList.delBtn.source"></icon-show>
+ 鍒犻櫎
+ </el-button>
+ </template>
+
+
+ <template slot="name" slot-scope="{row}">
+ <el-tag>{{ row.name }}</el-tag>
+ </template>
+ <template slot="defaultFlag" slot-scope="{row}">
+ <el-tag v-if="row.defaultFlag" type="success">鏄�</el-tag>
+ <el-tag v-if="!row.defaultFlag" type="danger">鍚�</el-tag>
+ </template>
+ </avue-crud>
+ </basic-container>
</template>
<script>
+import {refDataGrid, deleteDep, addDept, updatePasswordStrateg} from "@/api/system/password/api"
+import basicOption from "@/util/basic-option";
+import {mapGetters} from "vuex";
+
export default {
- name: "index"
+ name: "index",
+ data() {
+ return {
+ form: {},
+ tableData: [],
+ page: {
+ currentPage: 1,
+ pageSize: 10,
+ total: 0,
+ pageSizes: [10, 30, 50, 100],
+ },
+ tableLoading: false,
+ checkboxlength: "", // 娣诲姞瀛樻斁澶氶�夌殑鍙橀噺,鐢ㄤ簬涓嬫媺鑿滃崟鐨勭鐢ㄦ晥鏋滃拰蹇呭～绉嶇被鏄惁澶т簬缁勫悎鏂瑰紡鐒跺悗鎻愮ず鐢ㄦ埛閲嶆柊閫夋嫨
+ selectlength: 0, // 涓嬫媺鑿滃崟鐨勬暟鎹彉閲�
+ checkboxlist: "", // 鐢ㄤ簬闃叉change鏃堕棿鍐掓场,鍑虹幇涓ゆ寮圭獥瀹氫箟鐨勫彉閲�
+ checkboxNumber: "", // 鐢ㄤ簬棣栨鐐瑰嚮缂栬緫锛屽垽鏂粍鍚堟柟寮忔槸鍚﹀皬浜庡繀濉绫荤殑鍙橀噺
+ selectNumber: "", // 瀛樻斁澶氶�夌殑鍙橀噺,鏁堟灉涓�鏍�,鍙槸鐢ㄤ綔鍦ㄧ紪杈戞ā鍧�
+ checkboxedit: "", // 鐢ㄤ簬鍒ゆ柇鏄惁鏄紪杈�
+ editFlag: false,
+ minValue: "", // 鏈�灏忛暱搴alue
+ maxValue: "" // 鏈�澶ч暱搴alue
+ }
+ },
+ computed: {
+ ...mapGetters(["permission"]),
+ permissionList() {
+ return {
+ addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
+ editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
+ delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
+ };
+ },
+ option() {
+ return {
+ ...basicOption,
+ addBtn: false,
+ selection: false,
+ menuWidth: 150,
+ editBtn: false,
+ delBtn: false,
+ calcHeight: -60,
+ column: [
+ {
+ label: '绛栫暐鍚嶇О',
+ prop: 'name',
+ sortable: true,
+ span: 24,
+ labelWidth: "11%",
+ rules: [{
+ required: true,
+ message: "璇疯緭鍏ョ瓥鐣ュ悕绉�",
+ trigger: "blur"
+ }]
+ },
+ {
+ label: '瀵嗙爜鏈�灏忛暱搴�',
+ prop: 'minLength',
+ sortable: true,
+ span: 12,
+ labelWidth: "22%",
+ rules: [{
+ required: true,
+ validator: (rule, value, callback) => {
+ this.minValue = value * 1
+ if (value == "") {
+ callback(new Error('璇疯緭鍏ュ瘑鐮佹渶灏忛暱搴�'));
+ } else if (/[^\d]/g.test(value)) {
+ callback(new Error('瀵嗙爜鏈�灏忛暱搴︾殑杈撳叆绫诲瀷鍙兘涓烘暟瀛楃被鍨�'));
+ } else if (this.minValue >= this.maxValue && this.maxValue != 0) {
+ callback(new Error('瀵嗙爜鏈�灏忛暱搴︿笉鑳藉ぇ浜庡瘑鐮佹渶澶ч暱搴�'))
+ } else {
+ callback();
+ }
+ },
+ trigger: 'blur'
+ }]
+ },
+ {
+ label: '瀵嗙爜鏈�澶ч暱搴�',
+ prop: 'maxLength',
+ sortable: true,
+ span: 12,
+ labelWidth: "28%",
+ rules: [{
+ required: true,
+ validator: (rule, value, callback) => {
+ this.maxValue = value * 1
+ if (value == "") {
+ callback(new Error('璇疯緭鍏ュ瘑鐮佹渶澶ч暱搴�'));
+ } else if (this.maxValue <= this.minValue) {
+ callback(new Error('瀵嗙爜鏈�澶ч暱搴︿笉鑳藉皬浜庡瘑鐮佹渶澶ч暱搴�'));
+ } else if (/[^\d]/g.test(value)) {
+ callback(new Error('瀵嗙爜鏈�澶ч暱搴︾殑杈撳叆绫诲瀷鍙兘涓烘暟瀛楃被鍨�'));
+ } else {
+ callback();
+ }
+ },
+ trigger: 'change'
+ }]
+ },
+ {
+ label: '缁勫悎鏂瑰紡',
+ prop: 'requireCharTypeText',
+ sortable: true,
+ display: false,
+ overHidden: true,
+ labelWidth: "22%",
+ },
+ {
+ label: '缁勫悎鏂瑰紡',
+ prop: 'requireCharType',
+ type: "checkbox",
+ hide: true,
+ span: 12,
+ labelWidth: "22%",
+ change: this.handleCheckboxChange,
+ rules: [{
+ required: true,
+ message: "璇烽�夋嫨缁勫悎鏂规硶",
+ trigger: "blur"
+ }],
+ dicData: [
+ {
+ label: '鏁板瓧',
+ value: "number"
+ },
+ {
+ label: '灏忓啓瀛楁瘝',
+ value: "lower"
+ },
+ {
+ label: '澶у啓瀛楁瘝',
+ value: "upper"
+ },
+ {
+ label: '绗﹀彿',
+ value: "symbol"
+ },
+ ]
+ },
+ {
+ label: '蹇呭～绉嶇被',
+ prop: 'requireCharCount',
+ type: 'select',
+ span: 12,
+ labelWidth: "28%",
+ sortable: true,
+ change: this.handleSelectChange,
+ dicData: [{
+ label: '1绉�',
+ value: 1,
+ disabled: false
+ },
+ {
+ label: '2绉�',
+ value: 2,
+ disabled: false
+ },
+ {
+ label: '3绉�',
+ value: 3,
+ disabled: false
+ },
+ {
+ label: '4绉�',
+ value: 4,
+ disabled: false
+ }
+ ]
+ },
+ {
+ label: '杩囨湡鏃堕棿锛堝ぉ)',
+ prop: 'validDay',
+ sortable: true,
+ span: 12,
+ labelWidth: "22%",
+ rules: [{
+ required: true,
+ validator: (rule, value, callback) => {
+ if (value == "") {
+ callback(new Error('璇疯緭鍏ヨ繃鏈熸椂闂�'));
+ } else if (/[^\d]/g.test(value)) {
+ callback(new Error('杩囨湡鏃堕棿鐨勮緭鍏ョ被鍨嬪彧鑳戒负鏁板瓧绫诲瀷'));
+ } else {
+ callback();
+ }
+ },
+ trigger: 'blur'
+ }]
+ },
+ {
+ label: '鎻愰啋鏃堕棿锛堝ぉ锛�',
+ prop: 'remindDay',
+ sortable: true,
+ span: 12,
+ labelWidth: "28%",
+ width: 140,
+ rules: [{
+ required: true,
+ validator: (rule, value, callback) => {
+ if (value == "") {
+ callback(new Error('璇疯緭鍏ヨ繃鏈熸椂闂�'));
+ } else if (/[^\d]/g.test(value)) {
+ callback(new Error('杩囨湡鏃堕棿鐨勮緭鍏ョ被鍨嬪彧鑳戒负鏁板瓧绫诲瀷'));
+ } else {
+ callback();
+ }
+ },
+ trigger: 'blur'
+ }]
+ },
+ {
+ label: '閲嶈瘯娆℃暟',
+ prop: 'retryTime',
+ sortable: true,
+ span: 12,
+ labelWidth: "22%",
+ rules: [{
+ required: true,
+ validator: (rule, value, callback) => {
+ if (value == "") {
+ callback(new Error('閲嶈瘯娆℃暟'));
+ } else if (/[^\d]/g.test(value)) {
+ callback(new Error('閲嶈瘯娆℃暟鐨勮緭鍏ョ被鍨嬪彧鑳戒负鏁板瓧绫诲瀷'));
+ } else {
+ callback();
+ }
+ },
+ trigger: 'blur'
+ }]
+ },
+ {
+ label: '閿佸畾鏃堕棿锛堝垎閽燂級',
+ prop: 'lockTime',
+ sortable: true,
+ width: 150,
+ span: 12,
+ labelWidth: "28%",
+ rules: [{
+ required: true,
+ validator: (rule, value, callback) => {
+ if (value == "") {
+ callback(new Error('璇疯緭鍏ラ攣瀹氭椂闂�'));
+ } else if (/[^\d]/g.test(value)) {
+ callback(new Error('閿佸畾鏃堕棿鐨勮緭鍏ョ被鍨嬪彧鑳戒负鏁板瓧绫诲瀷'));
+ } else {
+ callback();
+ }
+ },
+ trigger: 'blur'
+ }]
+ },
+ {
+ label: '鎻忚堪',
+ prop: 'description',
+ overHidden: true,
+ type: 'textarea',
+ span: 12,
+ labelWidth: "22%",
+ rows: 5,
+ },
+ {
+ label: '鏄惁涓洪粯璁ょ瓥鐣�',
+ prop: 'defaultFlag',
+ type: 'switch',
+ labelWidth: "30%",
+ value: 0,
+ dicData: [{
+ label: '鍚�',
+ value: 0
+ }, {
+ label: '鏄�',
+ value: 1
+ }]
+ },
+ ]
+ }
+ }
+ },
+ methods: {
+ // 琛ㄦ牸鍒濆鍖栬姹�
+ getTableList() {
+ console.log(this.$route)
+ this.tableLoading = true;
+ refDataGrid(this.page.currentPage, this.page.pageSize).then(res => {
+ this.tableData = res.data.data;
+ this.page.total = res.data.total;
+ this.tableLoading = false;
+ })
+ },
+
+ // 琛ㄦ牸澶撮儴鍒锋柊
+ handleRefresh() {
+ this.getTableList();
+ },
+
+ // 鏉℃暟
+ sizeChange(val) {
+ this.page.pageSize = val;
+ },
+
+ // 椤电爜
+ currentChange(val) {
+ this.page.currentPage = val;
+ },
+
+ // 娣诲姞
+ rowSaveHandler(row, done, loading) {
+ row.combinations = row.requireCharType.join(',');
+ delete row.requireCharType;
+ addDept(row).then(res => {
+ if (res.data.code === 200) {
+ this.$message.success(res.data.obj);
+ this.getTableList();
+ done()
+ }
+ }).catch(err => {
+ loading()
+ console.log(err);
+ })
+ },
+
+ // 缂栬緫鎸夐挳
+ handleEdit(row, index) {
+ this.$refs.passWordCrud.rowEdit(row, index);
+ this.editFlag = true;
+ this.checkboxNumber = row.requireCharType.split(",");
+ this.selectNumber = row.requireCharCount;
+ },
+
+ // 淇敼
+ rowUpdateHandler(row, index, done, loading) {
+ row.combinations = row.requireCharType;
+ delete row.requireCharType;
+ updatePasswordStrateg(row).then(res => {
+ if (res.data.code === 200) {
+ this.$message.success(res.data.obj);
+ this.getTableList();
+ done()
+ }
+ }).catch(err => {
+ loading()
+ console.log(err);
+ })
+ },
+
+ // 鍒犻櫎
+ handleDel(row, index) {
+ let params = {
+ pwdIds: row.oid
+ }
+
+ this.$confirm('鎮ㄧ‘瀹氳鍒犻櫎褰撳墠鐨勫瘑鐮佺瓥鐣ュ悧锛�', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ deleteDep(params).then(res => {
+ if (res.data.code === 200) {
+ this.$message.success(res.data.obj);
+ this.getTableList();
+ }
+ });
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ });
+ });
+ },
+
+ // 蹇呭～绉嶇被changge浜嬩欢
+ handleSelectChange(val) {
+ this.selectlength = val.value;
+ },
+
+ // 娣诲姞淇敼 缁勫悎鏂瑰紡鍒ゆ柇閫昏緫
+ handleCheckboxChange(val) {
+ const arr = this.option.column.find(item => item.prop === 'requireCharCount'); // 鎵惧埌option閲岄潰蹇呭～绉嶇被鐨勬暟缁�
+ this.checkboxlength = val.value;
+ this.checkboxedit = this.checkboxlength.toString().split(",");
+
+ if (val.value !== undefined && val.value !== null && val.value.length > 0) {
+ this.form.requireCharCount = 1;
+ if (this.checkboxlist === val.value) {
+ return;
+ } else {
+ this.checkboxlist = val.value;
+ if (this.selectlength > val.value.length && val.value.length > 0) {
+ // 鍒ゆ柇濡傛灉蹇呭～绉嶇被澶т簬缁勫悎鏂瑰紡娓呯┖
+ this.form.requireCharCount = "";
+ } else if (this.selectlength > this.checkboxedit.length && this.checkboxedit.length > 0) {
+ // 淇敼鍚屾牱閫昏緫
+ this.form.requireCharCount = "";
+ }
+ }
+ } else {
+ this.form.requireCharCount = "";
+ }
+
+ // 澶勭悊 蹇呭～绉嶇被閫夐」绂佺敤
+ if (val.value !== undefined && val.value !== null) {
+ if (val.value.length === 1) {
+ this.setDisabled(arr, [0]);
+ } else if (val.value.length === 2) {
+ this.setDisabled(arr, [0, 1]);
+ } else if (val.value.length === 3) {
+ this.setDisabled(arr, [0, 1, 2]);
+ } else if (val.value.length === 4) {
+ this.setDisabled(arr, [0, 1, 2, 3]);
+ } else if (val.value.length === 0) {
+ this.setDisabled(arr, [-1]);
+ }
+ } else if (this.checkboxNumber.length !== 0) {
+ this.setDisabled(arr, [0, 1, 2, 3]);
+ }
+
+ // 淇敼鍚岀悊
+ if (this.editFlag) {
+ if (this.checkboxedit.length === 1) {
+ this.setDisabled(arr, [0]);
+ } else if (this.checkboxedit.length === 2) {
+ this.setDisabled(arr, [0, 1]);
+ } else if (this.checkboxedit.length === 3) {
+ this.setDisabled(arr, [0, 1, 2]);
+ } else if (this.checkboxedit.length === 4) {
+ this.setDisabled(arr, [0, 1, 2, 3]);
+ } else if (this.checkboxedit.length === 0) {
+ this.setDisabled(arr, [-1]);
+ }
+ }
+ },
+
+ // 杩囨护鎵惧埌瀵瑰簲蹇呭～绉嶇被绂佺敤閫夐」
+ setDisabled(arr, indices) {
+ arr.dicData.forEach((item, index) => {
+ item.disabled = !indices.includes(index);
+ });
+ },
+
+ }
}
</script>
-<style scoped>
+<style lang="scss" scoped>
+.avue-form__group--flex {
+ padding-bottom: 25px !important;
+}
</style>
--
Gitblit v1.9.3