用户管理

src/router/modules/customer.js

@@ -12,7 +12,7 @@ export default[
       {
         path:'userList',
         name:'CustomerUserList',
-        component:()=>import('@/views/customer/UserList.vue'),
+        component:()=>import('@/views/customer/userList/Index.vue'),
         meta:{
           title:'用户管理'
         },

src/styles/tdesign.scss

@@ -16,10 +16,10 @@
     }
   }
   .t-dialog__body{
-    padding: var(--td-comp-paddingTB-l);
+    padding: 40px 60px;
   }
   .t-dialog__footer{
-    padding: var(--td-comp-paddingTB-l);
+    padding: 40px;
   }
 }
 

src/views/customer/UserList.vue → src/views/customer/userList/Index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { SearchIcon } from 'tdesign-icons-vue-next';
+import EditUser from './components/EditUser.vue'
 
 const jobOpts = [
   {
@@ -50,13 +51,16 @@ const tablePagination = {
 }
 
 
+const showEditUser=ref(false)
+
+
 
 </script>
 
 <template>
   <div class="customer-userlist-page">
     <div class="bg-white flex top-wrap">
-      <t-button style="width: 120px">新增用户</t-button>
+      <t-button style="width: 120px" @click="showEditUser=true">新增用户</t-button>
       <t-button style="width: 120px; margin-left: 10px">批量导入用户</t-button>
       <t-input
         style="width: 310px; margin-left: auto"
@@ -128,6 +132,8 @@ const tablePagination = {
       </t-table>
     </div>
   </div>
+  <!-- 新增\编辑用户 -->
+  <EditUser v-model:show="showEditUser"/>
 </template>
 
 <style lang="scss" scoped>

src/views/customer/userList/components/EditUser.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { useTemplateRef, watch } from "vue";
+
+
+const show = defineModel('show', { type: Boolean, default: false })
+const props=defineProps({
+  data:{
+    type:[null,Object],
+    default:null
+  }
+})
+
+const telCodeOpts=['86']
+
+const jobStatusOpts=[
+  {
+    label:'在职',
+    value:'在职'
+  },
+  {
+    label:'离职',
+    value:'离职'
+  }
+]
+
+const FORM_RULES = { 
+  name: [{ required: true, message: '请输入姓名' }],
+  tel:[{ required: true, message: '请输入手机号' }],
+  jobStatus:[{ required: true, message: '请选择在职状态' }],
+};
+
+const formIns=useTemplateRef('formIns')
+const formData=reactive({
+  name:'',
+  telCode:'86',
+  tel:'',
+  customer:'',
+  post:'',
+  depart:'',
+  jobStatus:''
+})
+
+async function handleSave(){
+  const validRes=await formIns.value.validate()
+  if(validRes!==true) return
+
+}
+
+
+watch(
+  ()=>show.value,
+  (n)=>{
+    if(!n){
+      formIns.value.reset()
+      return
+    }
+    if(n&&props.data){
+
+    }
+  }
+)
+
+</script>
+
+<template>
+  <t-dialog
+    v-model:visible="show"
+    :header="props.data?'编辑用户':'新增用户'"
+    draggable
+    attach="body"
+    top="50px"
+    width="600px"
+    :cancelBtn="null"
+    :confirmBtn="null"
+    class="edit-user-wrap"
+  >
+    <t-form
+      ref="formIns"
+      :rules="FORM_RULES"
+      :data="formData"
+      :colon="true"
+      labelAlign="top"
+    >
+      <t-form-item label="姓名" name="name">
+        <t-input v-model="formData.name" placeholder="请输入姓名"></t-input>
+      </t-form-item>
+      <t-form-item label="手机号" name="tel">
+        <t-select v-model:value="formData.telCode" style="width:80px">
+          <t-option
+            v-for="item in telCodeOpts"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </t-select>
+        <t-input v-model="formData.tel" placeholder="请输入手机号"></t-input>
+      </t-form-item>
+      <t-form-item label="所属客户" name="customer">
+        
+      </t-form-item>
+      <t-form-item label="岗位" name="post">
+        <t-input v-model="formData.post" placeholder="请输入岗位"></t-input>
+      </t-form-item>
+      <t-form-item label="部门" name="depart">
+        <t-input v-model="formData.depart" placeholder="请输入部门"></t-input>
+      </t-form-item>
+      <t-form-item label="在职状态" name="jobStatus">
+        <t-select
+          placeholder="请选择在职状态"
+          v-model:value="formData.jobStatus"
+          clearable
+        >
+          <t-option
+            v-for="item in jobStatusOpts"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </t-select>
+      </t-form-item>
+    </t-form>
+    <template #footer>
+      <div class="bottom-btn">
+        <t-button theme="default" @click="show=false">取消</t-button>
+        <t-button type="submit" @click="handleSave">确定</t-button>
+      </div>
+    </template>
+  </t-dialog>
+</template>
+
+<style lang="scss" scoped>
+.edit-user-wrap{
+  .bottom-btn{
+    margin-top: 60px;
+    text-align: center;
+    .t-button{
+      width: 120px;
+    }
+  }
+}
+</style>

src/views/customer/userList/components/MoveUser.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { useTemplateRef, watch } from "vue";
+
+
+const show = defineModel('show', { type: Boolean, default: false })
+const props=defineProps({
+  data:{
+    type:[null,Object],
+    default:null
+  }
+})
+
+const FORM_RULES = { 
+  company: [{ required: true, message: '请输入姓名' }],
+};
+
+const formIns=useTemplateRef('formIns')
+const formData=reactive({
+  company:'',
+})
+
+async function handleSave(){
+  const validRes=await formIns.value.validate()
+  if(validRes!==true) return
+
+}
+
+
+watch(
+  ()=>show.value,
+  (n)=>{
+    if(!n){
+      formIns.value.reset()
+      return
+    }
+  }
+)
+
+</script>
+
+<template>
+  <t-dialog
+    v-model:visible="show"
+    header="移动到"
+    draggable
+    attach="body"
+    top="50px"
+    width="600px"
+    :cancelBtn="null"
+    :confirmBtn="null"
+    class="edit-user-wrap"
+  >
+    <t-form
+      ref="formIns"
+      :rules="FORM_RULES"
+      :data="formData"
+      :colon="true"
+      labelAlign="top"
+    >
+      <t-form-item label="移动到" name="company">
+        <t-input v-model="formData.company" placeholder="请选择公司"></t-input>
+      </t-form-item>
+      
+      <t-form-item label="所属客户" name="customer">
+        
+      </t-form-item>
+    </t-form>
+    <template #footer>
+      <div class="bottom-btn">
+        <t-button theme="default" @click="show=false">取消</t-button>
+        <t-button type="submit" @click="handleSave">确定</t-button>
+      </div>
+    </template>
+  </t-dialog>
+</template>
+
+<style lang="scss" scoped>
+.edit-user-wrap{
+  .bottom-btn{
+    margin-top: 60px;
+    text-align: center;
+    .t-button{
+      width: 120px;
+    }
+  }
+}
+</style>