2022年5月19日14:57:12

src/views/system/home/Home.vue

@@ -1,85 +1,128 @@
 <template>
-  <div class="as-layout-horizontal">
-    <div style="width:200px;padding:0 8px 0 8px;"> 
-      <div class="as-layout-horizontal" style="width:200px;margin-bottom: 10px;">
-        <span class="as-weight as-bold" style="color:#606266">菜单分配</span>
-        <el-button disabled type="primary" size="small">保存</el-button>
-      </div>
-      <el-tree :props="props" :data="threeData" show-checkbox @node-click="handleNodeClick" />
-    </div>
-    <crud-template class="as-weight" ref="crud" :home-data="field" :tableData="testData" @submit="submit"
-      @handleEdit="handleEdit">
-      <template #search="{ searchCondition }">
-        <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" />
-        <div>
-          <el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange" range-separator=":"
-            start-placeholder="开始日期" end-placeholder="结束日期" style="margin: 0 10px 0 10px;" />
-        </div>
-      </template>
+    <crud-template ref="crud" :home-data="field" :tableData="testData" @submit="submit" @handleEdit="handleEdit">
+        <template #search="{ searchCondition }">
+            <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" />
+            <div>
+                <el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange"
+                    range-separator=":" start-placeholder="开始日期" end-placeholder="结束日期"
+                    style="margin: 0 10px 0 10px;" />
+            </div>
+        </template>
+        <template #dialog>
+            <el-form :inline="false" ref="ruleFormRef" :rules="rules" :model="item">
+
+                <el-form-item class="as-bold" :label-width="labelWidth" label="名称" prop="title">
+                    <div style="width: 100%">
+                        <el-input v-model="item.title" placeholder="请输入部门名称"></el-input>
+                    </div>
+                </el-form-item>
+
+                <el-form-item class="as-bold" :label-width="labelWidth" label="排序">
+                    <!-- 简单解决sort类型问题 -->
+                    <div v-show="false">
+                        {{ item.sort = Number(item.sort) }}
+                    </div>
+                    <el-input-number :min="0" class="el-input-number" v-model="item.sort" style="width: 100%;"
+                        controls-position="right">
+                    </el-input-number>
+                </el-form-item>
+
+                <div class="as-layout-horizontal">
+                    <el-form-item class="as-weight as-bold" :label-width="labelWidth" label="顶级部门">
+                        <el-radio-group v-model="item.top">
+                            <el-radio label="是" />
+                            <el-radio label="否" />
+                        </el-radio-group>
+                    </el-form-item>
+
+                    <el-form-item class="as-weight as-bold" :label-width="labelWidth" label="状态">
+                        <el-radio-group v-model="item.start">
+                            <el-radio label="启用" />
+                            <el-radio label="禁用" />
+                        </el-radio-group>
+                    </el-form-item>
+                </div>
+
+                <el-form-item v-show="item.top === '否'" class="as-bold" :label-width="labelWidth" label="上级部门">
+                    <el-tree-select v-model="item.section" :data="threeData" />
+                </el-form-item>
+
+            </el-form>
+        </template>
     </crud-template>
-  </div>
 </template>
+<!-- 部门管理模块 -->
 <script lang="ts" setup>
 // @ts-ignore crudFrom模板
 import CrudTemplate from "@/crud/index.vue"
 import { add, get, empty } from "@/utils/offLineData"
 import { reactive, ref, toRaw } from 'vue'
-import { Search } from '@element-plus/icons-vue'
-import {
-  list
-} from '@/data/menuData'
 
 const labelWidth = '80px'
-const topStart = ref(false)
 const initData = [
-  {
-    field1: '超级管理员',
-    field2: '全部',
-    field3: '1',
-    field4: '-',
-    field5: '2018-11-23 11:04:37'
-  },
-  {
-    field1: '普通用户',
-    field2: '自定义',
-    field3: '2',
-    field4: '-',
-    field5: '2018-11-23 13:09:06'
-  }]
-
-//树数据
-const threeData = list
-const props = {
-  label: 'title',
-  children: 'children',
-}
+    {
+        title: '黔通智联',
+        sort: 1,
+        start: '启用',
+        top: '是',
+        children: [{
+            title: '部门一',
+            start: '启用',
+            top: '否',
+            sort: 2,
+            children: []
+        }]
+    },
+    {
+        title: '世纪恒通',
+        sort: 3,
+        start: '启用',
+        top: '是',
+        children: [{
+            title: '部门二',
+            start: '启用',
+            top: '否',
+            sort: 4
+        }]
+    }]
+
+const threeData = [
+    {
+        value: '黔通智联',
+        label: '黔通智联',
+        children: [
+            {
+                value: '部门一',
+                label: '部门一',
+                children: [],
+            },
+        ],
+    }, {
+        value: '世纪恒通',
+        label: '世纪恒通',
+        children: [
+            {
+                value: '部门二',
+                label: '部门二',
+                children: [],
+            },
+        ],
+    },
+]
 
-//表单数据
 let item = ref({
-  title: '',
-  sort: 0,
-  top: '是',
-  start: '启用',
-  section: ''
+    title: '',
+    sort: 0,
+    top: '是',
+    start: '启用',
+    section: ''
 })
 
-const options = [{
-  value: 'Option1',
-  label: '启用',
-},
-{
-  value: 'Option2',
-  label: '禁用',
-}]
-
-//树形事件
-const handleNodeClick = (event: any) => {
-  console.log(event);
-}
-
 //编辑事件
 const handleEdit = (idx: any, row: any) => {
-  item.value = toRaw(row)
+    console.log(row);
+
+    item.value = toRaw(row)
 }
 
 //表单校验
@@ -89,59 +132,45 @@ const rules = reactive({ title: [{ required: true, message: '请输入部门名
 
 empty('department')
 if (get('department').length === 0) {
-  add('department', initData)
+    add('department', initData)
 }
 const testData: any = get('department')
 
 const field = {
-  searchShow: true,
-  tabSize: 'small',
-  dialogCustom: false,
-  operateWidth: '150', //操作栏宽度
-  field: [{
-    prop: 'field1',
-    label: '名称',
-    form: {
-      type: 'input'
-    }
-  }, {
-    prop: 'field2',
-    label: '数据权限',
-    form: {
-      type: 'input'
-    }
-  }, {
-    prop: 'field3',
-    label: '角色级别',
-  }, {
-    prop: 'field4',
-    label: '描述',
-    form: {
-      type: 'input',
-      itemType: 'phone'
-    }
-  }, {
-    prop: 'field5',
-    label: '创建日期',
-    form: {
-      type: 'date'
-    }
-  }]
+    rowKey: 'title',
+    searchShow: true,
+    crudShow: true,
+    dialogCustom: true,
+    field: [{
+        prop: 'title',
+        label: '名称',
+    }, {
+        prop: 'sort',
+        label: '排序',
+    }, {
+        prop: 'start',
+        label: '状态',
+    }]
 }
 
 const submit = () => {
-  ruleFormRef.value.validate((valid: any, fields: any) => {
-    if (valid) {
-      console.log(item, ruleFormRef);
-      crud.value.reset()
-    } else {
-      return false
-    }
-  })
+    ruleFormRef.value.validate((valid: any, fields: any) => {
+        if (valid) {[]
+            console.log(item, ruleFormRef);
+            crud.value.reset()
+        } else {
+            return false
+        }
+    })
 }
 
 </script> 
 <style  scoped>
+/*数字文本框文本对齐方式 */
+/deep/ .el-input-number .el-input__inner {
+    text-align: left;
+}
+
 /deep/.el-range-editor.el-input__inner {
   display: inline-flex;
   align-items: center;