UI完善

src/router/index.ts

@@ -25,7 +25,7 @@ const router = createRouter({
         },
         {
           path: "/carman",
-          component: () => import("../views/home/index.vue"),
+          component: () => import("../views/carman/index.vue"),
           meta: { title: "用户信息",parent:'wdxx' },
         },
         {

src/views/carman/index.vue

@@ -1,6 +1,385 @@
+<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',
+    zws: '3',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'18679056174',
+    role:'普通用户',
+    cardNum:'京C45678'
+  },
+  {
+    date: '2016-05-02',
+    zws: '4',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'13247781993',
+    role:'4',
+    cardNum:'京B98765'
+  },
+  {
+    date: '2016-05-04',
+    zws: '6',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'15179162828',
+    role:'普通用户',
+    cardNum:'京A12345'
+  }
+]
+
+let activeName=ref('first')
+
+const addUser=val=>{
+  dialogVisible.value=val
+}
+
+onMounted(()=>{
+  
+})
+
+
+</script>
 <template>
-    
     <div>
-        carman
+       <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>
+
+       <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>
+                       
+                      </div>
+                      <div class="right-part">
+                      
+                        
+                        <el-button :icon="Tools">筛选</el-button>
+                        <el-button :icon="Download">导出</el-button>
+                      </div>
+                    </div>
+                    <el-table header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%">
+                        <el-table-column prop="cardNum" label="车牌号" />
+                        <el-table-column prop="zws" label="座位数" />
+                        <el-table-column prop="info" label="默认路线">
+                          <template #default>
+                           <div>
+                            <div>朝阳区 → 海淀区</div>
+                            <div>08:00</div>
+                           </div>
+                          </template>
+                        </el-table-column>
+                        <el-table-column prop="info" label="司机">
+                          <div class="table-user-wrap">
+                            <div class="left-part">
+
+                            </div>
+                            <div class="right-part">
+                              <div style="color:#000">林诗雨</div>
+                              <div style="color: #6B7280;">ID:100002</div>
+                            </div>
+                          </div>
+                        </el-table-column>
+                        
+                        <el-table-column prop="role" label="GPS设备">
+                          <template #default>
+                           <div>
+                            GPS-20230001
+                           </div>
+                          </template>
+                        </el-table-column>
+                       
+                        <el-table-column prop="date" 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="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-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">
+
+    .reset-gray-head{
+      background:#f3f4f6;
+      .el-table__cell,th{
+        background:#f3f4f6!important;
+      }
+      
+    }
+    
+
+</style>
+
+<style lang="scss" scoped>
+   
+    .table-user-wrap{
+      display:flex;
+      align-items: center;
+      .left-part{
+        width:30px;
+        height:30px;
+        background:red;
+        border-radius: 50%;
+        margin-right:6px;
+      }
+    }
+    .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>

src/views/orderman/index.vue

@@ -1,6 +1,384 @@
+<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 = [
+  {
+    routeName:'RT20230815001',
+    cfqy: '北京市',
+    mdqy:'上海市',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'18679056174',
+    ypl:'45',
+    status:'活跃'
+  },
+  {
+    routeName:'RT20230815001',
+    cfqy: '广州市',
+    mdqy:'深圳市',
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'13247781993',
+    ypl:'12',
+    status:'活跃'
+  },
+  {
+    routeName:'RT20230815001',
+    cfqy: '上海市',
+    mdqy:'广州市',
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'15179162828',
+    ypl:'10',
+    status:'活跃'
+  }
+]
+
+let activeName=ref('first')
+
+const addUser=val=>{
+  dialogVisible.value=val
+}
+
+onMounted(()=>{
+  
+})
+
+
+</script>
 <template>
-    
     <div>
-        orderman
+       <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>
+
+       <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 header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%">
+                        <el-table-column prop="routeName" label="订单编号">
+                         
+                        </el-table-column>
+                        <el-table-column prop="cfqy" label="订单日期" />
+                        <el-table-column prop="mdqy" label="路线">
+                        
+                        </el-table-column>
+                        <el-table-column prop="role" label="发车时间">
+                        
+                    </el-table-column>
+                    <el-table-column prop="role" label="乘客名称">
+                        
+                    </el-table-column>
+                  
+                        <el-table-column prop="status" label="支付状态">
+                          <template #default>
+                           <div style="background:#DCFCE7;width:64px;height:20px;border-radius:9999px;display:flex;align-items: center;justify-content: center;">
+                            已支付
+                           </div>
+                          </template>
+                        </el-table-column>
+                        <el-table-column prop="ypl" label="支付时间" />
+                        <el-table-column prop="ypl" label="座位号" />
+                        <el-table-column prop="ypl" label="车牌号" />
+                        <el-table-column prop="ypl" label="出发站点" />
+                        <el-table-column prop="ypl" label="目的站点" />
+                        <el-table-column fixed="right" label="操作" min-width="120">
+                          <template #default>
+                            <el-button link type="primary" size="small" @click="handleClick">
+                              编辑
+                            </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-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">
+
+    .reset-gray-head{
+      background:#f3f4f6;
+      .el-table__cell,th{
+        background:#f3f4f6!important;
+      }
+      
+    }
+    
+
+</style>
+
+<style lang="scss" scoped>
+   
+    .table-user-wrap{
+      display:flex;
+      align-items: center;
+      .left-part{
+        width:30px;
+        height:30px;
+        background:red;
+        border-radius: 50%;
+        margin-right:6px;
+      }
+    }
+    .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>

src/views/routeman/index.vue

@@ -1,5 +1,382 @@
+<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 = [
+  {
+    routeName:'RT20230815001',
+    cfqy: '北京市',
+    mdqy:'上海市',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'18679056174',
+    ypl:'45',
+    status:'活跃'
+  },
+  {
+    routeName:'RT20230815001',
+    cfqy: '广州市',
+    mdqy:'深圳市',
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'13247781993',
+    ypl:'12',
+    status:'活跃'
+  },
+  {
+    routeName:'RT20230815001',
+    cfqy: '上海市',
+    mdqy:'广州市',
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    link:'15179162828',
+    ypl:'10',
+    status:'活跃'
+  }
+]
+
+let activeName=ref('first')
+
+const addUser=val=>{
+  dialogVisible.value=val
+}
+
+onMounted(()=>{
+  
+})
+
+
+</script>
 <template>
     <div>
-        routeman
+       <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>
+
+       <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 header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%">
+                        <el-table-column prop="routeName" label="路线编号">
+                         
+                        </el-table-column>
+                        <el-table-column prop="cfqy" label="出发区域" />
+                        <el-table-column prop="mdqy" label="目的区域">
+                        
+                        </el-table-column>
+                        <el-table-column prop="role" label="出发时间">
+                        
+                    </el-table-column>
+                    <el-table-column prop="role" label="基础票价(元)">
+                        
+                    </el-table-column>
+                    <el-table-column prop="role" label="浮动范围">
+                        
+                    </el-table-column>
+                        <el-table-column prop="status" label="排班状态">
+                          <template #default>
+                           <div style="background:#DCFCE7;width:64px;height:20px;border-radius:9999px;display:flex;align-items: center;justify-content: center;">
+                            已排班
+                           </div>
+                          </template>
+                        </el-table-column>
+                        <el-table-column prop="ypl" 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-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">
+
+    .reset-gray-head{
+      background:#f3f4f6;
+      .el-table__cell,th{
+        background:#f3f4f6!important;
+      }
+      
+    }
+    
+
+</style>
+
+<style lang="scss" scoped>
+   
+    .table-user-wrap{
+      display:flex;
+      align-items: center;
+      .left-part{
+        width:30px;
+        height:30px;
+        background:red;
+        border-radius: 50%;
+        margin-right:6px;
+      }
+    }
+    .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>