|
@@ -1,56 +1,73 @@
|
|
|
<template>
|
|
|
- <div class="info">
|
|
|
- <el-tabs>
|
|
|
- <el-tab-pane style="height: 40px; padding: 10px; text-align: left; margin-left:10px; font-size: 16px;">新建部门
|
|
|
- <span><i class="el-icon-close" @click="close"></i></span>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <div style="display: flex;">
|
|
|
- <img class="img" src="" alt=""><span><el-button style="width: 60px; margin-left: -160px;
|
|
|
- margin-top: 60px; background-color:rgb(131, 208, 243);">更换</el-button></span>
|
|
|
- </div>
|
|
|
- <div class="form">
|
|
|
- <el-form :model="form" label-position="left" label-width="130px">
|
|
|
- <el-form-item :model="form.fullName" label="部门级别:">
|
|
|
- <el-select style="width:400px">
|
|
|
- <el-option label=""></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :model="form.abbreviateName" label="上级部门:">
|
|
|
- <el-select style="width:400px">
|
|
|
- <el-option label=""></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :model="form.registeredAddress" label="部门名称:">
|
|
|
- <el-input placeholder="test" type="text"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :model="form.registeredAddress" label="排重名:">
|
|
|
- <el-input placeholder="test" type="text"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :model="form.parentCorporation" label="部门负责人:">
|
|
|
- <el-select style="width:400px">
|
|
|
- <el-option label=""></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :model="form.sccide" label="部门接口人:">
|
|
|
- <el-select style="width:400px">
|
|
|
- <el-option label=""></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :model="form.businessAddress" label="在岗人数:">
|
|
|
- <el-input-number v-model="num" @change="handleChange" :min="1" :max="100"></el-input-number>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :model="form.staffCount" label="部门职责:">
|
|
|
- <el-input type="textarea" placeholder="请输入" v-model="textarea" maxlength="200"
|
|
|
- show-word-limit></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div style="margin-top: 30px;">
|
|
|
- <el-button style="background-color:rgb(131, 208, 243);">下一个</el-button>
|
|
|
- <el-button>重置</el-button>
|
|
|
- <el-button style="background-color:rgb(131, 208, 243);">更新</el-button>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <el-dialog v-dialog-drag style="overflow: hidden;" :title="popTitle" :visible.sync="dialogVisible" width="32%" append-to-body
|
|
|
+ >
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <div>
|
|
|
+ <el-image :src="url"></el-image>
|
|
|
+ <span>
|
|
|
+ <el-button class="alter">更换</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div style="height: 400px;">
|
|
|
+ <el-scrollbar style="height: 90%;width: 100%; top: -20px;">
|
|
|
+ <el-form :model="form" ref="form" label-position="left">
|
|
|
+ <el-form-item label="部门级别:" prop="department_level">
|
|
|
+ <el-select v-model="form.department_level">
|
|
|
+ <el-option v-for="item in levelOptions" :value="item.value" :key="item.value"
|
|
|
+ :label="item.label"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上级部门:" prop="superior_department">
|
|
|
+ <el-select v-model="form.superior_department">
|
|
|
+ <el-option v-for="item in superiorOptions" :value="item.value" :key="item.value"
|
|
|
+ :label="item.label"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门负责人:" prop="departmentManager">
|
|
|
+ <el-select v-model="form.departmentManager">
|
|
|
+ <el-option v-for="item in managerOptions" :value="item.value" :key="item.value"
|
|
|
+ :label="item.label"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门接口人:" prop="departmentOfficer">
|
|
|
+ <el-select v-model="form.departmentOfficer">
|
|
|
+ <el-option v-for="item in officerOptions" :value="item.value" :key="item.value"
|
|
|
+ :label="item.label"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排重名:" prop="duplication">
|
|
|
+ <el-input v-model="form.duplication" type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="在岗人数:" prop="staff_num">
|
|
|
+ <el-input-number :model="form.staff_num" v-model="num" @change="handleChange" :min="1"
|
|
|
+ :max="100"></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="自由员工:" prop="self_employee">
|
|
|
+ <el-input v-model="form.self_employee" type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="协作员工:" prop="collaborator">
|
|
|
+ <el-input v-model="form.collaborator" type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="第三方员工:" prop="thirdParty_employee">
|
|
|
+ <el-input v-model="form.thirdParty_employee" type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="部门职责:" prop="post">
|
|
|
+ <el-input type="textarea" placeholder="请输入" v-model="textarea" maxlength="200"
|
|
|
+ show-word-limit></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button style="background-color: #2EA8E6;
|
|
|
+ color: #FFFFFF; margin-right: 30px;">下一个</el-button>
|
|
|
+ <el-button style=" background-color: #B3B3B3;
|
|
|
+ color: #FFFFFF; margin-right: 30px;" @click="resetForm('form')">重置</el-button>
|
|
|
+ <el-button style="background-color: #2EA8E6;
|
|
|
+ color: #FFFFFF;">更新</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -58,73 +75,130 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ popTitle: '新建部门',
|
|
|
+ dialogVisible: false,
|
|
|
+ url: '',
|
|
|
form: {
|
|
|
-
|
|
|
+ department_level: '',
|
|
|
+ superior_department: '',
|
|
|
+ departmentManager: '',
|
|
|
+ departmentOfficer: '',
|
|
|
+ duplication: '',
|
|
|
+ staff_num: '',
|
|
|
+ self_employee: '',
|
|
|
+ collaborator: '',
|
|
|
+ thirdParty_employee: '',
|
|
|
+ post: ''
|
|
|
},
|
|
|
num: 100,
|
|
|
- textarea:''
|
|
|
+ textarea: '',
|
|
|
+ levelOptions: [],
|
|
|
+ superiorOptions: [
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label: '北京电信规划设计院'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ managerOptions: [],
|
|
|
+ officerOptions: [],
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- close() {
|
|
|
+ handleChange() {
|
|
|
|
|
|
+ },
|
|
|
+ resetForm() {
|
|
|
+ this.$refs.form.resetFields();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.info {
|
|
|
+/deep/.el-dialog__footer {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+/deep/.el-dialog__body {
|
|
|
+ padding-top: 0;
|
|
|
+}
|
|
|
+/deep/.el-divider--horizontal {
|
|
|
+ display: block;
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 !important;
|
|
|
+}
|
|
|
+.alter {
|
|
|
+ background-color: #2EA8E6;
|
|
|
+ color: #FFFFFF;
|
|
|
+ float: right;
|
|
|
+ position: relative;
|
|
|
+ top: -50px;
|
|
|
+ width: 80px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
margin-top: 10px;
|
|
|
- margin-left: 300px;
|
|
|
- left: 350px;
|
|
|
- width: 600px;
|
|
|
- height: 750px;
|
|
|
- box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
-
|
|
|
- .img {
|
|
|
- margin: 15px 50px 0 50px;
|
|
|
- width: 500px;
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
|
|
|
- .el-icon-close {
|
|
|
- margin-left: 480px;
|
|
|
- }
|
|
|
+.el-icon-close {
|
|
|
+ margin-left: 480px;
|
|
|
+}
|
|
|
|
|
|
- /deep/.el-tabs__header {
|
|
|
- height: 0;
|
|
|
+/deep/.el-tabs__header {
|
|
|
+ height: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.el-form {
|
|
|
+ padding: 0 5% 0 5%;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ padding-top: 10px;
|
|
|
+ margin-inline: 20px;
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
+ .el-select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .form {
|
|
|
- .el-form {
|
|
|
+ .el-input-number {
|
|
|
+ /deep/.el-input-number__decrease {
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ border-radius: 4px;
|
|
|
|
|
|
- .el-form-item {
|
|
|
- padding-top: 10px;
|
|
|
- margin-inline: 20px;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- /deep/.el-form-item__label {
|
|
|
- padding: 0;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
+ /deep/.el-input-number__increase {
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
|
|
|
- /deep/.el-form-item__content {
|
|
|
- display: flex;
|
|
|
- width: 400px;
|
|
|
- }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ border: 0;
|
|
|
+ background: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .el-button {
|
|
|
- width: 100px;
|
|
|
- height: 30px;
|
|
|
- padding: 5px;
|
|
|
- margin: 10px;
|
|
|
+ /deep/.el-form-item__label {
|
|
|
+ padding: 0;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: 550;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ display: flex;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.el-button {
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ padding: 5px;
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
</style>
|