|
|
@@ -1,5 +1,337 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
|
|
|
+
|
|
|
+interface RuleForm {
|
|
|
+ name: string
|
|
|
+ region: string
|
|
|
+ count: string
|
|
|
+ date1: string
|
|
|
+ date2: string
|
|
|
+ delivery: boolean
|
|
|
+ location: string
|
|
|
+ type: string[]
|
|
|
+ resource: string
|
|
|
+ desc: string
|
|
|
+}
|
|
|
+
|
|
|
+const formSize = ref<ComponentSize>('default')
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
+const ruleForm = reactive<RuleForm>({
|
|
|
+ name: 'Hello',
|
|
|
+ region: '',
|
|
|
+ count: '',
|
|
|
+ date1: '',
|
|
|
+ date2: '',
|
|
|
+ delivery: false,
|
|
|
+ location: '',
|
|
|
+ type: [],
|
|
|
+ resource: '',
|
|
|
+ desc: '',
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const rules = reactive<FormRules<RuleForm>>({
|
|
|
+ name: [
|
|
|
+ { required: true, message: 'Please input Activity name', trigger: 'blur' },
|
|
|
+ { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ region: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: 'Please select Activity zone',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ count: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: 'Please select Activity count',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ date1: [
|
|
|
+ {
|
|
|
+ type: 'date',
|
|
|
+ required: true,
|
|
|
+ message: 'Please pick a date',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ date2: [
|
|
|
+ {
|
|
|
+ type: 'date',
|
|
|
+ required: true,
|
|
|
+ message: 'Please pick a time',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ location: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: 'Please select a location',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ type: [
|
|
|
+ {
|
|
|
+ type: 'array',
|
|
|
+ required: true,
|
|
|
+ message: 'Please select at least one activity type',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ resource: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: 'Please select activity resource',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ desc: [
|
|
|
+ { required: true, message: 'Please input activity form', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+})
|
|
|
+
|
|
|
+const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate((valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('submit!')
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+import { ref,onMounted,reactive } from 'vue'
|
|
|
+import { Search,Download,Tools,Plus,Check,Close } from "@element-plus/icons-vue";
|
|
|
+let searchWord=ref('')
|
|
|
+let dialogVisible=ref(false)
|
|
|
+let logtitle=ref('新增用户')
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ date: '2016-05-03',
|
|
|
+ name: 'Tom',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: 'Tom',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: 'Tom',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: 'Tom',
|
|
|
+ address: 'No. 189, Grove St, Los Angeles',
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+let activeName=ref('first')
|
|
|
+
|
|
|
+const addUser=val=>{
|
|
|
+ dialogVisible.value=val
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
<template>
|
|
|
<div>
|
|
|
- userman
|
|
|
+ <div class="common-top">
|
|
|
+ <div class="left-part">
|
|
|
+ <div class="title">
|
|
|
+ 用户管理
|
|
|
+ </div>
|
|
|
+ <div class="sub-title">
|
|
|
+ 管理系统中的用户账户
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-part">
|
|
|
+ <el-button type="primary" :icon="Plus" @click="addUser(true)">新增用户</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="普通用户" name="first">
|
|
|
+ <div class="common-content">
|
|
|
+ <div class="common-search-box">
|
|
|
+ <div class="left-part">
|
|
|
+ <el-input
|
|
|
+ v-model="searchWord"
|
|
|
+
|
|
|
+ placeholder="搜索用户"
|
|
|
+ style="width:260px"
|
|
|
+ >
|
|
|
+
|
|
|
+ <template #append>
|
|
|
+ <el-button :icon="Search" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <el-button style="margin-left:10px">筛选</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="right-part">
|
|
|
+
|
|
|
+ <el-button :icon="Download">导出</el-button>
|
|
|
+ <el-button :icon="Tools">设置</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="date" label="用户信息" />
|
|
|
+ <el-table-column prop="name" label="联系方式" />
|
|
|
+ <el-table-column prop="address" label="角色" />
|
|
|
+ <el-table-column prop="address" label="状态" />
|
|
|
+ <el-table-column prop="address" label="注册时间" />
|
|
|
+ <el-table-column fixed="right" label="操作" min-width="120">
|
|
|
+ <template #default>
|
|
|
+ <el-button link type="primary" size="small" @click="handleClick">
|
|
|
+ 编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button link type="danger" size="small">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <div class="common-page-wrap">
|
|
|
+ <div class="left-part">
|
|
|
+ <span>显示第 </span>
|
|
|
+ <span>1 </span>
|
|
|
+ <span>至 </span>
|
|
|
+ <span>10 </span>
|
|
|
+ <span>条, </span>
|
|
|
+ <span>共1000条记录 </span>
|
|
|
+ </div>
|
|
|
+ <div class="right-part">
|
|
|
+ <el-pagination background layout="prev, pager, next" :total="1000" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="司机用户" name="second">
|
|
|
+ <div class="common-content">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :title="logtitle"
|
|
|
+ width="600"
|
|
|
+ >
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :model="ruleForm"
|
|
|
+ label-position="top"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="auto"
|
|
|
+ :size="formSize"
|
|
|
+ status-icon
|
|
|
+ >
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户名称" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="手机号码" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="身份证号" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户角色" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="用户状态" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注信息" prop="name">
|
|
|
+ <el-input v-model="ruleForm.name" type="textarea" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false" :icon="Close">取消</el-button>
|
|
|
+ <el-button type="primary" :icon="Check" @click="addUser(false)">
|
|
|
+ 确认创建
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
-</template>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .common-top{
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .common-page-wrap{
|
|
|
+ padding:10px 10px 10px 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .sub-title{
|
|
|
+ color:#4B5563;
|
|
|
+ font-size:16px;
|
|
|
+ margin-bottom:24px;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ color:#1F2937;
|
|
|
+ font-size:24px;
|
|
|
+ font-weight:600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .common-content{
|
|
|
+ background:#fff;
|
|
|
+ .common-search-box{
|
|
|
+ padding:10px 10px 10px 10px;
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
lyy