| | |
| | | * @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: '', |
| | |
| | | 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() |
| | |
| | | }, |
| | | 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); |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | //查看 |
| | |
| | | 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; |
| | | }, |
| | |
| | | }, |
| | | 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; |
| | |
| | | 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; |