From b78c039181ac316964a0f0de077170de178d90ab Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 27 七月 2022 15:14:25 +0800
Subject: [PATCH] 更新
---
src/views/system/department/component/deptDialog.vue | 274 +++++++++++++++++++++++++++---------------------------
1 files changed, 136 insertions(+), 138 deletions(-)
diff --git a/src/views/system/department/component/deptDialog.vue b/src/views/system/department/component/deptDialog.vue
index e3757f2..fbb3a9b 100644
--- a/src/views/system/department/component/deptDialog.vue
+++ b/src/views/system/department/component/deptDialog.vue
@@ -1,154 +1,152 @@
<template>
- <div class="system-add-dept-container">
- <el-dialog :title="title" v-model="isShowDialog" width="600px">
- <el-form :model="departmentForm" size="default" label-width="90px">
- <el-row :gutter="35">
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="上级部门">
- <el-cascader
- :options="deptData"
- :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
- placeholder="请选择部门"
- clearable
- class="w100"
- v-model="departmentForm.parentDepId"
- >
- </el-cascader>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="部门名称">
- <el-input v-model="departmentForm.depName" placeholder="请输入部门名称" clearable></el-input>
- </el-form-item>
- </el-col>
- <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
- <el-form-item label="部门描述">
- <el-input v-model="departmentForm.depInfo" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
+ <div class="system-add-dept-container">
+ <el-dialog :title="title" v-model="isShowDialog" width="600px">
+ <el-form :model="departmentForm" size="default" label-width="90px">
+ <el-row :gutter="35">
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="上级部门">
+ <el-cascader
+ :options="deptData"
+ :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }"
+ placeholder="请选择部门"
+ clearable
+ class="w100"
+ v-model="departmentForm.parentDepId"
+ >
+ </el-cascader>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="部门名称">
+ <el-input v-model="departmentForm.depName" placeholder="请输入部门名称" clearable></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+ <el-form-item label="部门描述">
+ <el-input v-model="departmentForm.depInfo" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="onCancel" size="default">取 消</el-button>
+ <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ </div>
</template>
<script lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-import { departmentApi } from "/@/api/department";
+import { departmentApi } from '/@/api/department';
// 定义接口来定义对象的类型
interface TableDataRow {
- name:string,
- info:string,
- parentId:string,
- id:number,
+ name: string;
+ info: string;
+ parentId: string;
+ id: number;
}
interface DeptSate {
- title:string;
- isShowDialog: boolean;
- departmentForm: {
- depName:string,
- depInfo:string,
- parentDepId:string
- };
- deptData: Array<TableDataRow>;
+ title: string;
+ isShowDialog: boolean;
+ departmentForm: {
+ depName: string;
+ depInfo: string;
+ parentDepId: string;
+ };
+ deptData: Array<TableDataRow>;
}
export default defineComponent({
- name: 'systemAddDept',
- setup(prop,context) {
- const state = reactive<DeptSate>({
- title:'',
- isShowDialog: false,
- departmentForm: {
- depName:'',
- parentDepId:'',
- depInfo:'',
- },
- deptData: [], // 部门数据
- });
- // 打开弹窗
- const openDialog = (type:string, value: any,departmentList: []) => {
- state.isShowDialog = true;
- state.deptData = JSON.parse(JSON.stringify(departmentList))
- if(type === '新增'){
- state.title = '新增部门'
- state.departmentForm = {
- depName:'',
- parentDepId:'',
- depInfo:'',
- }
- }else{
- state.title = '修改部门'
- state.departmentForm = JSON.parse(JSON.stringify(value))
- }
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = async () => {
- if(state.title === '新增部门'){
- let res = await departmentApi().addDepartment(state.departmentForm)
- if(res.data.code === '200'){
- ElMessage({
- type:'success',
- message:'部门新增成功',
- duration:2000
- })
- closeDialog();
- context.emit('getDepartmentList')
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }else{
- let res = await departmentApi().modDepartment(state.departmentForm)
- if(res.data.code === '200'){
- ElMessage({
- type:'success',
- message:'部门修改成功',
- duration:2000
- })
- closeDialog();
- context.emit('getDepartmentList')
- }else{
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- }
- };
- // 初始化部门数据
- const initTableData = () => {
-
- };
- // 页面加载时
- onMounted(() => {
- initTableData();
- });
- return {
- openDialog,
- closeDialog,
- onCancel,
- onSubmit,
- ...toRefs(state),
- };
- },
+ name: 'systemAddDept',
+ setup(prop, context) {
+ const state = reactive<DeptSate>({
+ title: '',
+ isShowDialog: false,
+ departmentForm: {
+ depName: '',
+ parentDepId: '',
+ depInfo: ''
+ },
+ deptData: [] // 部门数据
+ });
+ // 打开弹窗
+ const openDialog = (type: string, value: any, departmentList: []) => {
+ state.isShowDialog = true;
+ state.deptData = JSON.parse(JSON.stringify(departmentList));
+ if (type === '新增') {
+ state.title = '新增部门';
+ state.departmentForm = {
+ depName: '',
+ parentDepId: '',
+ depInfo: ''
+ };
+ } else {
+ state.title = '修改部门';
+ state.departmentForm = JSON.parse(JSON.stringify(value));
+ }
+ };
+ // 关闭弹窗
+ const closeDialog = () => {
+ state.isShowDialog = false;
+ };
+ // 取消
+ const onCancel = () => {
+ closeDialog();
+ };
+ // 新增
+ const onSubmit = async () => {
+ if (state.title === '新增部门') {
+ let res = await departmentApi().addDepartment(state.departmentForm);
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ message: '部门新增成功',
+ duration: 2000
+ });
+ closeDialog();
+ context.emit('getDepartmentList');
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ } else {
+ let res = await departmentApi().modDepartment(state.departmentForm);
+ if (res.data.code === '200') {
+ ElMessage({
+ type: 'success',
+ message: '部门修改成功',
+ duration: 2000
+ });
+ closeDialog();
+ context.emit('getDepartmentList');
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+ };
+ // 初始化部门数据
+ const initTableData = () => {};
+ // 页面加载时
+ onMounted(() => {
+ initTableData();
+ });
+ return {
+ openDialog,
+ closeDialog,
+ onCancel,
+ onSubmit,
+ ...toRefs(state)
+ };
+ }
});
</script>
--
Gitblit v1.9.2