選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

Home.vue 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <div class="as-layout-horizontal">
  3. <div style="width:200px;padding:0 8px 0 8px">
  4. <el-input :prefix-icon="Search" clearable placeholder="输入部门名称搜索" style="width: 200px;margin-bottom: 10px;" />
  5. <el-tree :data="threeData" @node-click="handleNodeClick" />
  6. </div>
  7. <crud-template class="as-weight" ref="crud" :home-data="field" :tableData="testData" @submit="submit"
  8. @handleEdit="handleEdit">
  9. <template #search="{ searchCondition }">
  10. <el-input v-model="searchCondition.fileTwo" clearable placeholder="输入名称或邮箱名称" style="width: 200px;" />
  11. <div>
  12. <el-date-picker class="el-range-editor" v-model="searchCondition.fileOne" type="daterange" range-separator=":"
  13. start-placeholder="开始日期" end-placeholder="结束日期" style="margin: 0 10px 0 10px;" />
  14. </div>
  15. <el-select v-model="searchCondition.fileThree" placeholder="状态" style="width: 80px;margin-right: 10px;">
  16. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  17. </el-select>
  18. </template>
  19. </crud-template>
  20. </div>
  21. </template>
  22. <script lang="ts" setup>
  23. // @ts-ignore crudFrom模板
  24. import CrudTemplate from "@/crud/index.vue"
  25. import { add, get, empty } from "@/utils/offLineData"
  26. import { reactive, ref, toRaw } from 'vue'
  27. import { Search } from '@element-plus/icons-vue'
  28. const labelWidth = '80px'
  29. const topStart = ref(false)
  30. const initData = [
  31. {
  32. name: 'test',
  33. nickname: '测试',
  34. sex: '男',
  35. phone: '18888888889',
  36. email: 'test@el-admin.vip',
  37. department: '研发部',
  38. start: '启用',
  39. creationDate: '2020-05-05 11:15:49'
  40. },
  41. {
  42. name: 'admin',
  43. nickname: '管理员',
  44. sex: '男',
  45. phone: '18888888888',
  46. email: 'test@el-admin.vip',
  47. department: '研发部',
  48. start: '禁用',
  49. creationDate: '2018-05-05 11:15:49'
  50. }]
  51. //树数据
  52. const threeData = [
  53. {
  54. value: '黔通智联',
  55. label: '黔通智联',
  56. children: [
  57. {
  58. value: '部门一',
  59. label: '部门一',
  60. children: [],
  61. },
  62. ],
  63. }, {
  64. value: '世纪恒通',
  65. label: '世纪恒通',
  66. children: [
  67. {
  68. value: '部门二',
  69. label: '部门二',
  70. children: [],
  71. },
  72. ],
  73. },
  74. ]
  75. //表单数据
  76. let item = ref({
  77. title: '',
  78. sort: 0,
  79. top: '是',
  80. start: '启用',
  81. section: ''
  82. })
  83. const options = [{
  84. value: 'Option1',
  85. label: '启用',
  86. },
  87. {
  88. value: 'Option2',
  89. label: '禁用',
  90. }]
  91. //树形事件
  92. const handleNodeClick = (event: any) => {
  93. console.log(event);
  94. }
  95. //编辑事件
  96. const handleEdit = (idx: any, row: any) => {
  97. item.value = toRaw(row)
  98. }
  99. //表单校验
  100. const ruleFormRef: any = ref()
  101. const crud: any = ref()
  102. const rules = reactive({ title: [{ required: true, message: '请输入部门名称', trigger: 'blur' }] })
  103. empty('department')
  104. if (get('department').length === 0) {
  105. add('department', initData)
  106. }
  107. const testData: any = get('department')
  108. const field = {
  109. searchShow: true,
  110. tabSize: 'small',
  111. dialogCustom: false,
  112. operateWidth: '150', //操作栏宽度
  113. field: [{
  114. prop: 'name',
  115. label: '用户名称',
  116. form: {
  117. type: 'input'
  118. }
  119. }, {
  120. prop: 'nickname',
  121. label: '昵称',
  122. form: {
  123. type: 'input'
  124. }
  125. }, {
  126. prop: 'sex',
  127. label: '性别',
  128. }, {
  129. prop: 'phone',
  130. label: '电话',
  131. form: {
  132. type: 'input',
  133. itemType: 'phone'
  134. }
  135. }, {
  136. prop: 'email',
  137. label: '邮箱',
  138. form: {
  139. type: 'input'
  140. }
  141. }, {
  142. prop: 'department',
  143. label: '部门',
  144. }, {
  145. prop: 'start',
  146. label: '状态',
  147. }, {
  148. prop: 'creationDate',
  149. label: '创建日期',
  150. form: {
  151. type: 'date'
  152. }
  153. }]
  154. }
  155. const submit = () => {
  156. ruleFormRef.value.validate((valid: any, fields: any) => {
  157. if (valid) {
  158. console.log(item, ruleFormRef);
  159. crud.value.reset()
  160. } else {
  161. return false
  162. }
  163. })
  164. }
  165. </script>
  166. <style scoped>
  167. /deep/.el-range-editor.el-input__inner {
  168. display: inline-flex;
  169. align-items: center;
  170. padding: 3px 10px;
  171. height: 33px;
  172. width: 300px;
  173. }
  174. </style>