1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/console/system/dict.vue

@@ -2,128 +2,91 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-03-28 18:25:55
 * @LastEditTime: 2024-04-02 17:48:31
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
   <div class="person-person">
      <div class="person-person-right">
         <div class="right-top">
            <div class="right-bottom"> 
               <el-button type="primary" @click="addPerson">+ 新增</el-button>
               <el-button type="danger" plain @click="delPerson">删除</el-button>
            </div>
            <div>
               <el-select v-model="input3" placeholder="状态" class="searchStatus">
                  <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"
                     size="small"
                  />
               </el-select>
               <el-input
                  v-model="input3"
                  style="width: 200px"
                  size="small"
                  placeholder="请输入关键字进行过滤"
                  class="input-with-select"
                  >
                  <template #append>
                     <el-button :icon="Search" />
                  </template>
               </el-input>
   <div class="dict-main">
      <el-form :inline="true" :model="searchData" label-width="80px">
         <el-form-item label="字典编号">
            <el-input v-model="searchData.code" placeholder="字典编号" clearable />
         </el-form-item>
         <el-form-item label="字典名称">
            <el-input v-model="searchData.dictValue" placeholder="字典名称" clearable></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="searchclick">搜索</el-button>
            <el-button @click="searchClearBtn">清空</el-button>
         </el-form-item>
      </el-form>
      <div>
         <div class="dict-Btn">
            <div class="dict-btn-bottom"> 
               <el-button type="primary" @click="addData">+ 新增</el-button>
               <el-button type="danger" plain @click="delData">删除</el-button>
            </div>
         </div>
         <div class="right-table">
            <el-table
               ref="multipleTableRef"
               :data="tableData"
               border
               style="width: 100%"
               class="multipleTableRef"
               @selection-change="handleSelectionChange"
            >
         <div class="dict-table">
            <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" />
               <el-table-column
               prop="date"
               label="字典编号">
               <el-table-column prop="code" label="字典编号">
                  <template #default="scope">
                     <el-check-tag type="info" checked @change="table_allocation(scope.row, scope.$index)">{{scope.row.code}}</el-check-tag>
                  </template>
               </el-table-column>
               <el-table-column
               prop="name"
               label="字典名称">
               <el-table-column prop="dictValue" label="字典名称"></el-table-column>
               <el-table-column prop="sort" label="字典排序"></el-table-column>
               <el-table-column prop="isSealed" label="封存">
                  <template #default="scope">
                     <div>{{scope.row.isSealed == 0?"否":"是"}}</div>
                  </template>
               </el-table-column>
               <el-table-column
               prop="name"
               label="字典排序">
               </el-table-column>
               <el-table-column
               prop="name"
               label="封存">
               </el-table-column>
               <el-table-column
               fixed="right"
               label="操作">
               <template #default="scope">
                  <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                  <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
               </template>
               <el-table-column fixed="right" label="操作">
                  <template #default="scope">
                     <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                     <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                     <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                     <el-button text type="primary" size="small" @click="table_allocation(scope.row, scope.$index)">字典配置</el-button>
                  </template>
               </el-table-column>
            </el-table>
            <el-pagination
               style="margin-top: 12px;"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage4"
               :page-sizes="[100, 200, 300, 400]"
               :page-size="100"
               :page-sizes="[15, 50, 100]"
               :page-size="15"
               layout="total, sizes, prev, pager, next, jumper"
               :total="400">
               :total="total">
            </el-pagination>
         </div>
      </div>
   </div>

   <el-dialog title="部门调整" v-model="departmentVisible" :width="400" destroy-on-close>
      <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
         <el-row>
            <el-col :span="24">
               <el-form-item label="部门" prop="department">
                  <el-select v-model="departmentFrom.department" style="width: 100%">
                     <el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
                  </el-select>
               </el-form-item>
            </el-col>
         </el-row>
      </el-form>
      <template #footer>
         <el-button @click="departmentVisible=false" >取 消</el-button>
         <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保 存</el-button>
      </template>
   </el-dialog>
   
   <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
   <save-dialog v-if="dialog.save" ref="saveDialog" @success="addDictSuccess" @closed="dialog.save=false"></save-dialog>
   <allocation-dialog v-if="dialog.allocation" ref="allocationDialog" :getModalData="getModalData" @success="handleSuccess" @closed="dialog.allocation=false"></allocation-dialog>
</template>
<script>
   import saveDialog from './addDict'
   import allocationDialog from './allocationDialog'
   export default {
      name: "bakalaka",
      name: "allocation",
      data(){
         return {
            isSaveing: false,
            groups: [],
            departmentFrom: {
               department: ""
            getModalData: [],
            selection: [],
            total: 0,
            searchData: {
               code: "",
               dictValue: "",
               current: "1",
               size: "15"
            },
            departmentVisibleRules: {
               department:[
                  {required: true, message: '请选择部门'}
               ]
            },
            departmentVisible: false,
            dialog: {
               save: false
               save: false,
               allocation: false
            },
            leftActive: true,
            input: '',
@@ -132,52 +95,72 @@
               label: '黄金糕'
            }],
            input3: '',
            tableData: [{
               date: '2016-05-02',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1518 弄',
               zip: 200333
               }, {
               date: '2016-05-04',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1517 弄',
               zip: 200333
               }, {
               date: '2016-05-01',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1519 弄',
               zip: 200333
               }, {
               date: '2016-05-03',
               name: '王小虎',
               province: '上海',
               city: '普陀区',
               address: '上海市普陀区金沙江路 1516 弄',
               zip: 200333
            }]
            tableData: []
         }
      },
      created(){
         
      },
      mounted(){
			
         this.searchBtn();
      },
      components: {
         saveDialog
         saveDialog,allocationDialog
      },
      methods: {
         departmentSubmit() {
            this.departmentVisible=false;  //部门调整
         codeClick() {
				
         },
         addDictSuccess(addDictForm) {
            this.searchClearBtn();
         },
         searchClearBtn() {
            this.searchData = {
               code: "",
               dictValue: "",
               current: "1",
               size: "15"
            }
            this.searchBtn();
         },
         searchclick() {
            this.searchData.current = "1";
            this.searchData.size = "15";
            this.searchBtn();
         },
         searchBtn() {
            this.$HTTP.get("/api/blade-system/dict/parent-list",this.searchData).then(res=> {
               if(res.code == 200) {
                  this.tableData = res.data.records;
                  this.total = res.data.total;
               }
            })
         },
         //字典配置
         table_allocation(row) {
            this.dialog.allocation = true;
            this.$nextTick(() => {
               this.$refs.allocationDialog.open('edit').setData(row);
            })
         },
         //删除
         table_del(row) {
            var that = this;
            this.$confirm(`确定将选择数据删除?`, '', {
               type: 'warning'
            }).then(() => {
               this.$HTTP.post("/api/blade-system/dict/remove?ids="+row.id).then(res=> {
                  if(res.code == 200) {
                     that.$message.success("操作成功");
                     that.searchBtn();
                  }
               })
            }).catch(() => {

            })
         },
         //添加
         addPerson(){
         addData(){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open()
@@ -185,8 +168,13 @@
         },
         table_edit(row){
            this.dialog.save = true
            this.$nextTick(() => {
               this.$refs.saveDialog.open('edit').setData(row)
            this.$HTTP.get("/api/blade-system/dict/detail?id="+row.id).then(res=> {
               if(res.code == 200) {
                  this.dialog.save = true;
                  this.$nextTick(() => {
                     this.$refs.saveDialog.open('edit').setData(res.data);
                  })
               }
            })
         },
         //查看
@@ -196,8 +184,30 @@
               this.$refs.saveDialog.open('show').setData(row)
            })
         },
         handleSelectionChange() {},
         delPerson() {},
         handleSelectionChange(selection) {
            this.selection = selection;
         },
         delData() {
            if(this.selection.length == 0) {
               this.$message({
                   message: '请选择至少一条数据',
                   type: 'warning'
                 });
                 return;
            }
            var selStr = "";
            this.selection.map(item=> {
               selStr += item.id + ","
            })
            selStr = selStr.replace(/,$/, '');
            var that = this;
            this.$HTTP.post("/api/blade-system/dict/remove?ids="+selStr).then(res=> {
               if(res.code == 200) {
                  that.$message.success("操作成功");
                  that.searchclick();
               }
            })
         },
         changeDepartment() {
            this.departmentVisible = true;
         },
@@ -210,79 +220,26 @@
         },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.searchData.current = "1";
            this.searchData.size = val;
            this.searchBtn();
         },
         handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.searchData.current = val;
            this.searchBtn();
         }
      }
   }
</script>

<style scoped>
   .person-person {
      width: 100%;
      background-color: #f9fafb;
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
      display: flex;
   }
   .person-person-left {
   .dict-main {
      background-color: #fff;
      width: 300px;
      min-width: 300px;
      margin: 8px;
      overflow: hidden;
      border-radius: 4px;
      padding: 8px;
   }
   .person-person-right {
      background-color: #fff;
      flex: 1;
      margin-top: 8px;
      margin-bottom: 8px;
      overflow: hidden;
      border-radius: 4px;
      padding-top: 8px;
      padding-bottom: 8px;
   }
   .person-left-title {
      text-align: center;
      vertical-align: middle;
      padding-left: 8px;
   }
   .person-left-title div {
      display: inline-block;
      width: 55px;
      height: 28px;
      line-height: 28px;
      border: 1px solid #dcdfe6;
      cursor: pointer;
   }
   .person-left-title div:nth-child(1) {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-right: 0px;
   }
   .person-left-title div:nth-child(2) {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-left: 0px;
   }
   .person-left-active {
      background-color: #3b8e8e;
      color: #fff;
   }
   .person-left-search {
      padding-top: 8px;
      padding-bottom: 8px;
   }
   .person-tree {
      background-color: #d8e8e8;
      padding: 4px 18px;
      font-size: 14px;
      font-weight: 400;
   }
   .right-top {
   .dict-Btn {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #dcdfe6;
@@ -290,22 +247,16 @@
      padding-left: 8px;
      padding-right: 8px;
   }
   .right-title {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 12px;
      margin-bottom: 8px;
   }
   .searchStatus {
      margin-right: 6px;
      width: 200px;
   }
   .right-bottom {
   .dict-btn-bottom {
      padding-left: 8px;
      padding-right: 8px;
      margin-bottom: 8px;
   }
   .right-table {
   .dict-table {
      padding-left: 8px;
      padding-right: 8px;
      margin-bottom: 8px;