From e7bc3a89c88c161fb9de47f2417dfa5e3c042e8f Mon Sep 17 00:00:00 2001
From: lzhe <lzhe@example.com>
Date: 星期四, 28 三月 2024 18:30:09 +0800
Subject: [PATCH] 1
---
src/views/master/person/main/personPerson.vue | 39 ++++
src/views/master/person/main/post.vue | 159 +++++++++++++++++
src/views/master/person/main/personPost.vue | 309 ++++++++++++++++++++++++++++++++++
src/views/master/person/main/index.vue | 9
4 files changed, 510 insertions(+), 6 deletions(-)
diff --git a/src/views/master/person/main/index.vue b/src/views/master/person/main/index.vue
index cc6a3cc..d86292e 100644
--- a/src/views/master/person/main/index.vue
+++ b/src/views/master/person/main/index.vue
@@ -2,7 +2,7 @@
* @Author: lzhe lzhe@example.com
* @Date: 2024-03-26 10:28:33
* @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-03-28 11:44:15
+ * @LastEditTime: 2024-03-28 18:20:25
* @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
-->
@@ -12,7 +12,9 @@
<el-tab-pane label="鍛樺伐" name="first">
<person-person></person-person>
</el-tab-pane>
- <el-tab-pane label="宀椾綅" name="second">宀椾綅</el-tab-pane>
+ <el-tab-pane label="宀椾綅" name="second">
+ <person-post></person-post>
+ </el-tab-pane>
<el-tab-pane label="閮ㄩ棬" name="third">閮ㄩ棬</el-tab-pane>
</el-tabs>
</div>
@@ -20,6 +22,7 @@
<script>
import personPerson from './personPerson'
+ import personPost from './personPost'
export default {
name: "bakalaka",
data(){
@@ -27,7 +30,7 @@
activeName: 'first'
}
},
- components: {personPerson},
+ components: {personPerson,personPost},
created(){
},
diff --git a/src/views/master/person/main/personPerson.vue b/src/views/master/person/main/personPerson.vue
index 2c196d1..02e060d 100644
--- a/src/views/master/person/main/personPerson.vue
+++ b/src/views/master/person/main/personPerson.vue
@@ -2,7 +2,7 @@
* @Author: lzhe lzhe@example.com
* @Date: 2024-03-26 10:28:33
* @LastEditors: lzhe lzhe@example.com
- * @LastEditTime: 2024-03-28 18:08:51
+ * @LastEditTime: 2024-03-28 18:18:33
* @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
-->
@@ -116,10 +116,27 @@
:total="400">
</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>
</template>
<script>
@@ -128,6 +145,17 @@
name: "bakalaka",
data(){
return {
+ isSaveing: false,
+ groups: [],
+ departmentFrom: {
+ department: ""
+ },
+ departmentVisibleRules: {
+ department:[
+ {required: true, message: '璇烽�夋嫨閮ㄩ棬'}
+ ]
+ },
+ departmentVisible: false,
dialog: {
save: false
},
@@ -179,6 +207,9 @@
saveDialog
},
methods: {
+ departmentSubmit() {
+ this.departmentVisible=false; //閮ㄩ棬璋冩暣
+ },
//娣诲姞
addPerson(){
this.dialog.save = true
@@ -201,7 +232,9 @@
},
handleSelectionChange() {},
delPerson() {},
- changeDepartment() {},
+ changeDepartment() {
+ this.departmentVisible = true;
+ },
changeTab(name) {
if(name == 1) {
this.leftActive = true;
diff --git a/src/views/master/person/main/personPost.vue b/src/views/master/person/main/personPost.vue
new file mode 100644
index 0000000..5b20d59
--- /dev/null
+++ b/src/views/master/person/main/personPost.vue
@@ -0,0 +1,309 @@
+<!--
+ * @Author: lzhe lzhe@example.com
+ * @Date: 2024-03-26 10:28:33
+ * @LastEditors: lzhe lzhe@example.com
+ * @LastEditTime: 2024-03-28 18:25:55
+ * @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>
+ </div>
+ <div class="right-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>
+ <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>
+ </el-table>
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage4"
+ :page-sizes="[100, 200, 300, 400]"
+ :page-size="100"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="400">
+ </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>
+</template>
+<script>
+ import saveDialog from './post'
+ export default {
+ name: "bakalaka",
+ data(){
+ return {
+ isSaveing: false,
+ groups: [],
+ departmentFrom: {
+ department: ""
+ },
+ departmentVisibleRules: {
+ department:[
+ {required: true, message: '璇烽�夋嫨閮ㄩ棬'}
+ ]
+ },
+ departmentVisible: false,
+ dialog: {
+ save: false
+ },
+ leftActive: true,
+ input: '',
+ options: [{
+ value: '閫夐」1',
+ 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
+ }]
+ }
+ },
+ created(){
+
+ },
+ mounted(){
+
+ },
+ components: {
+ saveDialog
+ },
+ methods: {
+ departmentSubmit() {
+ this.departmentVisible=false; //閮ㄩ棬璋冩暣
+ },
+ //娣诲姞
+ addPerson(){
+ 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)
+ })
+ },
+ //鏌ョ湅
+ table_show(row){
+ this.dialog.save = true
+ this.$nextTick(() => {
+ this.$refs.saveDialog.open('show').setData(row)
+ })
+ },
+ handleSelectionChange() {},
+ delPerson() {},
+ changeDepartment() {
+ this.departmentVisible = true;
+ },
+ changeTab(name) {
+ if(name == 1) {
+ this.leftActive = true;
+ }else {
+ this.leftActive = false;
+ }
+ },
+ handleSizeChange(val) {
+ console.log(`姣忛〉 ${val} 鏉);
+ },
+ handleCurrentChange(val) {
+ console.log(`褰撳墠椤�: ${val}`);
+ }
+ }
+ }
+</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 {
+ 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 {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid #dcdfe6;
+ margin-bottom: 8px;
+ 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 {
+ padding-left: 8px;
+ padding-right: 8px;
+ margin-bottom: 8px;
+ }
+ .right-table {
+ padding-left: 8px;
+ padding-right: 8px;
+ margin-bottom: 8px;
+
+ }
+ .multipleTableRef {
+ margin-bottom: 8px;
+ }
+</style>
diff --git a/src/views/master/person/main/post.vue b/src/views/master/person/main/post.vue
new file mode 100644
index 0000000..8620a9b
--- /dev/null
+++ b/src/views/master/person/main/post.vue
@@ -0,0 +1,159 @@
+<template>
+ <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
+ <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="center">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="宀椾綅缂栧彿" prop="userName">
+ <el-input v-model="form.userName" placeholder="宀椾綅缂栧彿" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="宀椾綅" prop="name">
+ <el-input v-model="form.name" placeholder="宀椾綅" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="浣跨敤鐘舵��" prop="name">
+ <el-switch v-model="value1" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <el-button @click="visible=false" >鍙� 娑�</el-button>
+ <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">淇� 瀛�</el-button>
+ </template>
+ </el-dialog>
+</template>
+
+<script>
+ export default {
+ emits: ['success', 'closed'],
+ data() {
+ return {
+ value1: true,
+ mode: "add",
+ titleMap: {
+ add: '娣诲姞宀椾綅',
+ edit: '淇敼宀椾綅',
+ show: '鏌ョ湅'
+ },
+ visible: false,
+ isSaveing: false,
+ //琛ㄥ崟鏁版嵁
+ form: {
+ id:"",
+ userName: "",
+ avatar: "",
+ name: "",
+ dept: "",
+ group: []
+ },
+ //楠岃瘉瑙勫垯
+ rules: {
+ avatar:[
+ {required: true, message: '璇蜂笂浼犲ご鍍�'}
+ ],
+ userName: [
+ {required: true, message: '璇疯緭鍏ョ櫥褰曡处鍙�'}
+ ],
+ name: [
+ {required: true, message: '璇疯緭鍏ョ湡瀹炲鍚�'}
+ ],
+ password: [
+ {required: true, message: '璇疯緭鍏ョ櫥褰曞瘑鐮�'},
+ {validator: (rule, value, callback) => {
+ if (this.form.password2 !== '') {
+ this.$refs.dialogForm.validateField('password2');
+ }
+ callback();
+ }}
+ ],
+ password2: [
+ {required: true, message: '璇峰啀娆¤緭鍏ュ瘑鐮�'},
+ {validator: (rule, value, callback) => {
+ if (value !== this.form.password) {
+ callback(new Error('涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!'));
+ }else{
+ callback();
+ }
+ }}
+ ],
+ dept: [
+ {required: true, message: '璇烽�夋嫨鎵�灞為儴闂�'}
+ ],
+ group: [
+ {required: true, message: '璇烽�夋嫨鎵�灞炶鑹�', trigger: 'change'}
+ ]
+ },
+ //鎵�闇�鏁版嵁閫夐」
+ groups: [],
+ groupsProps: {
+ value: "id",
+ multiple: true,
+ checkStrictly: true
+ },
+ depts: [],
+ deptsProps: {
+ value: "id",
+ checkStrictly: true
+ }
+ }
+ },
+ mounted() {
+ // this.getGroup()
+ // this.getDept()
+ },
+ methods: {
+ //鏄剧ず
+ open(mode='add'){
+ this.mode = mode;
+ this.visible = true;
+ return this
+ },
+ //鍔犺浇鏍戞暟鎹�
+ async getGroup(){
+ var res = await this.$API.system.role.list.get();
+ this.groups = res.data.rows;
+ },
+ async getDept(){
+ var res = await this.$API.system.dept.list.get();
+ this.depts = res.data;
+ },
+ //琛ㄥ崟鎻愪氦鏂规硶
+ submit(){
+ this.$refs.dialogForm.validate(async (valid) => {
+ if (valid) {
+ this.isSaveing = true;
+ var res = await this.$API.demo.post.post(this.form);
+ this.isSaveing = false;
+ if(res.code == 200){
+ this.$emit('success', this.form, this.mode)
+ this.visible = false;
+ this.$message.success("鎿嶄綔鎴愬姛")
+ }else{
+ this.$alert(res.message, "鎻愮ず", {type: 'error'})
+ }
+ }else{
+ return false;
+ }
+ })
+ },
+ //琛ㄥ崟娉ㄥ叆鏁版嵁
+ setData(data){
+ this.form.id = data.id
+ this.form.userName = data.userName
+ this.form.avatar = data.avatar
+ this.form.name = data.name
+ this.form.group = data.group
+ this.form.dept = data.dept
+
+ //鍙互鍜屼笂闈竴鏍峰崟涓敞鍏ワ紝涔熷彲浠ュ儚涓嬮潰涓�鏍风洿鎺ュ悎骞惰繘鍘�
+ //Object.assign(this.form, data)
+ }
+ }
+ }
+</script>
+
+<style>
+</style>
--
Gitblit v1.9.3