123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <template>
- <div class="as-layout-horizontal">
- <div style="width:200px;padding:0 8px 0 8px">
- <el-input :prefix-icon="Search" clearable placeholder="输入部门名称搜索" style="width: 200px;margin-bottom: 10px;" />
- <el-tree :data="threeData" @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>
- <el-select v-model="searchCondition.fileThree" placeholder="状态" style="width: 80px;margin-right: 10px;">
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
-
- </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'
-
- const labelWidth = '80px'
- const topStart = ref(false)
- const initData = [
- {
- name: 'test',
- nickname: '测试',
- sex: '男',
- phone: '18888888889',
- email: 'test@el-admin.vip',
- department: '研发部',
- start: '启用',
- creationDate: '2020-05-05 11:15:49'
- },
- {
- name: 'admin',
- nickname: '管理员',
- sex: '男',
- phone: '18888888888',
- email: 'test@el-admin.vip',
- department: '研发部',
- start: '禁用',
- creationDate: '2018-05-05 11:15:49'
- }]
-
- //树数据
- const threeData = [
- {
- value: '黔通智联',
- label: '黔通智联',
- children: [
- {
- value: '部门一',
- label: '部门一',
- children: [],
- },
- ],
- }, {
- value: '世纪恒通',
- label: '世纪恒通',
- children: [
- {
- value: '部门二',
- label: '部门二',
- children: [],
- },
- ],
- },
- ]
-
- //表单数据
- let item = ref({
- 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)
- }
-
- //表单校验
- const ruleFormRef: any = ref()
- const crud: any = ref()
- const rules = reactive({ title: [{ required: true, message: '请输入部门名称', trigger: 'blur' }] })
-
- empty('department')
- if (get('department').length === 0) {
- add('department', initData)
- }
- const testData: any = get('department')
-
- const field = {
- searchShow: true,
- tabSize: 'small',
- dialogCustom: false,
- operateWidth: '150', //操作栏宽度
- field: [{
- prop: 'name',
- label: '用户名称',
- form: {
- type: 'input'
- }
- }, {
- prop: 'nickname',
- label: '昵称',
- form: {
- type: 'input'
- }
- }, {
- prop: 'sex',
- label: '性别',
- }, {
- prop: 'phone',
- label: '电话',
- form: {
- type: 'input',
- itemType: 'phone'
- }
- }, {
- prop: 'email',
- label: '邮箱',
- form: {
- type: 'input'
- }
- }, {
- prop: 'department',
- label: '部门',
- }, {
- prop: 'start',
- label: '状态',
- }, {
- prop: 'creationDate',
- label: '创建日期',
- form: {
- type: 'date'
- }
- }]
- }
-
- const submit = () => {
- ruleFormRef.value.validate((valid: any, fields: any) => {
- if (valid) {
- console.log(item, ruleFormRef);
- crud.value.reset()
- } else {
- return false
- }
- })
- }
-
- </script>
- <style scoped>
- /deep/.el-range-editor.el-input__inner {
- display: inline-flex;
- align-items: center;
- padding: 3px 10px;
- height: 33px;
- width: 300px;
- }
- </style>
|