1

src/assets/styles/common.scss

@@ -1,5 +1,9 @@
 //公用样式文件
-
+ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
 //页面标题
 .page_title {
 	width: 100%;

src/views/system/dept/index.vue

@@ -24,11 +24,18 @@
 					</el-col>
 					<el-col :span="24">
 						<el-form-item label="部门名称" prop="deptName">
-							<el-input v-model="deptForm.deptName" placeholder="请输入部门名称" maxlength="20" show-word-limit />
+							<el-input v-model.trim="deptForm.deptName" placeholder="请输入部门名称" maxlength="20" show-word-limit />
 						</el-form-item>
 					</el-col>
 					<el-col :span="24">
-						<el-form-item label="公司简称"> </el-form-item>
+						<el-form-item label="公司简称">
+							<ul class="short">
+								<li v-for="item in shortList" :key="item.title">
+									<span>{{ item.title }}</span>
+									<input type="checkbox" :checked="item.checked" @change="shortChange(item.index, $event)" />
+								</li>
+							</ul>
+						</el-form-item>
 					</el-col>
 				</el-row>
 			</el-form>
@@ -48,6 +55,7 @@ export default {
 	components: { DeptItem },
 	data() {
 		return {
+			checked: true,
 			//组织架构数据
 			dataList: [],
 			//弹窗显示
@@ -61,7 +69,11 @@ export default {
 				//上级部门名称
 				parentName: '',
 				//部门名称
-				deptName: ''
+				deptName: '',
+				//部门简称
+				shortName: '',
+				//简称索引
+				shortNameIndex: ''
 			},
 			//表单验证
 			deptFormRules: {}
@@ -79,6 +91,17 @@ export default {
 			}
 		})
 	},
+	computed: {
+		shortList() {
+			return this.deptForm.deptName.split('').map((title, index) => {
+				return {
+					index,
+					title,
+					checked: true
+				}
+			})
+		}
+	},
 	provide() {
 		return {
 			updData: this.updData,
@@ -95,7 +118,9 @@ export default {
 		//表单重置
 		resetForm() {},
 		//弹窗提交
-		sub() {},
+		sub() {
+			console.log(this.shortList)
+		},
 		//编辑部门
 		updData(type, data) {
 			this.show = true
@@ -108,6 +133,8 @@ export default {
 				this.title = '部门修改'
 			}
 		},
+		//简称索引改变
+		shortChange(index, e) {},
 		delData() {},
 		resetDel() {}
 	}
@@ -131,4 +158,13 @@ export default {
 	width: auto;
 	display: inline-block;
 }
+.short {
+	display: flex;
+	flex-wrap: wrap;
+	li {
+		height: 36px;
+		line-height: 36px;
+		margin-right: 10px;
+	}
+}
 </style>