feat: 项目账号新增账号编辑功能

src/api/sys/model/projectModel.ts

@@ -64,17 +64,20 @@ export type ProjectAccountItem = {
   safePermission: string
 }
 
-export type AddProjectAccountParams = {
+export type AddOrUpdateProjectAccountParams = {
+  id?: string
   projectId: string
   account: string
-  password: string
+  password?: string
   role: string
   name: string
   company: string
   position: string
   mobile: string
   telephone: string
+  isAdmin: number
 }
+
 /**
  * @description: Request list return value
  */

src/api/sys/project.ts

@@ -6,7 +6,7 @@ import {
   ProjectUpdateOrCreateParams,
   ProjectAccountParams,
   ProjectAccountListResultModal,
-  AddProjectAccountParams
+  AddOrUpdateProjectAccountParams
 } from './model/projectModel'
 enum Api {
   GetProjectList = '/backstage/project/list',
@@ -14,7 +14,8 @@ enum Api {
   UpdateProjectDetail = '/backstage/project/save',
   AddProject = '/backstage/project/add',
   GetProjectAccount = '/backstage/account',
-  AddProjectAccount = '/backstage/account/create'
+  AddProjectAccount = '/backstage/account/create',
+  SaveProjectAccount = '/backstage/account/save'
 }
 
 /**
@@ -67,9 +68,18 @@ export function getProjectAccount(params: ProjectAccountParams) {
   })
 }
 
-export function addProjectAccount(params: AddProjectAccountParams) {
+/** 新增项目账号 */
+export function addProjectAccount(params: AddOrUpdateProjectAccountParams) {
   return defHttp.post({
     url: Api.AddProjectAccount,
     params
   })
 }
+
+/** 更新项目账号 */
+export function saveProjectAccount(params: AddOrUpdateProjectAccountParams) {
+  return defHttp.post({
+    url: Api.SaveProjectAccount,
+    params
+  })
+}

src/views/dashboard/project-detail/components/account.vue

@@ -11,25 +11,27 @@
     <BasicForm @register="registerForm" ref="formElRef">
       <template #role="{ model, field }">
         <span v-if="hasAdmin" class="text-red">已存在管理员</span>
-        <a-radio-group v-else v-model:value="model[field]">
-          <a-radio value="1">设为<Icon icon="clarity:administrator-solid" />管理员</a-radio>
-        </a-radio-group>
+        <a-switch v-model:checked="model[field]" size="small" />
+        <span>设为<Icon icon="clarity:administrator-solid" />管理员</span>
+        <!-- <a-radio-group v-else v-model:value="model[field]">
+          <a-radio :value="1"></a-radio>
+        </a-radio-group> -->
       </template>
     </BasicForm>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { computed, defineComponent, PropType, ref, watch } from 'vue'
+  import { computed, defineComponent, nextTick, PropType, ref, watch } from 'vue'
   import { BasicTable, useTable } from '/@/components/Table'
   import { BasicModal, useModal } from '/@/components/Modal'
   import { PlusOutlined } from '@ant-design/icons-vue'
   import { BasicForm, FormActionType, FormSchema, useForm } from '/@/components/Form/index'
   import { getTableColumns } from './tableData'
-  import { getProjectAccount, addProjectAccount } from '/@/api/sys/project'
+  import { getProjectAccount, addProjectAccount, saveProjectAccount } from '/@/api/sys/project'
   import { propTypes } from '/@/utils/propTypes'
-  import { Radio } from 'ant-design-vue'
+  import { Switch } from 'ant-design-vue'
   import { Icon } from '/@/components/Icon/index'
-  import { AddProjectAccountParams } from '/@/api/sys/model/projectModel'
+  import { AddOrUpdateProjectAccountParams, ProjectAccountItem } from '/@/api/sys/model/projectModel'
   import { useMessage } from '/@/hooks/web/useMessage'
 
   export default defineComponent({
@@ -39,8 +41,9 @@
       BasicModal,
       BasicForm,
       PlusOutlined,
-      ARadio: Radio,
-      ARadioGroup: Radio.Group,
+      // ARadio: Radio,
+      // ARadioGroup: Radio.Group,
+      ASwitch: Switch,
       Icon
     },
     props: {
@@ -56,9 +59,10 @@
     },
     setup(props) {
       const formElRef = ref<Nullable<FormActionType>>(null)
+      const formType = ref(0) // 0 - 创建账号 1 - 更新账号
       const { createMessage } = useMessage()
-      const [registerTable, { setTableData, reload }] = useTable({
-        columns: getTableColumns(() => showModalFn()),
+      const [registerTable, { setTableData }] = useTable({
+        columns: getTableColumns((item: ProjectAccountItem) => showUpdateModalFn(item)),
         showTableSetting: true,
         canResize: true
       })
@@ -69,8 +73,6 @@
       watch(
         props,
         newProps => {
-          console.log(newProps.activeId)
-
           if (newProps.activeId === '2') {
             fetchTableData(props.id)
           }
@@ -80,6 +82,13 @@
       const [registerModal, { openModal, setModalProps }] = useModal()
       const schemas = computed<FormSchema[]>(() => [
         {
+          field: 'id',
+          component: 'Input',
+          label: '登录账号',
+          required: true,
+          show: false
+        },
+        {
           field: 'account',
           component: 'Input',
           label: '登录账号',
@@ -120,42 +129,78 @@
           label: '电话'
         },
         {
-          field: 'role',
+          field: 'isAdmin',
           label: '特殊账号',
           component: 'RadioGroup',
           slot: 'role'
         }
       ])
-      const [registerForm] = useForm({
+      const [registerForm, { removeSchemaByFiled, appendSchemaByField }] = useForm({
         labelWidth: 120,
         schemas,
         showActionButtonGroup: false
       })
 
       async function showModalFn() {
+        formType.value = 0
         openModal()
         setModalProps({
           title: '新增账号',
           okText: '确认添加'
         })
+        await nextTick()
+        removeSchemaByFiled('password')
+
+        appendSchemaByField(
+          {
+            field: 'password',
+            component: 'InputPassword',
+            label: '登录密码',
+            required: true
+          },
+          'account'
+        )
+        formElRef.value?.resetFields()
+      }
+
+      async function showUpdateModalFn(item: ProjectAccountItem) {
+        console.log('item', item)
+
+        formType.value = 1
+        openModal()
+        setModalProps({
+          title: '更新账号',
+          okText: '确认更新'
+        })
+        await nextTick()
+        removeSchemaByFiled('password')
+        formElRef.value?.setFieldsValue({ ...item })
       }
 
       function submitModal() {
         formElRef.value?.validate().then((values: any) => {
           try {
-            createProjectAccount({ ...values, projectId: props.id })
+            if (formType.value === 0) {
+              createProjectAccount({ ...values, projectId: props.id, isAdmin: values.isAdmin ? 1 : 0 })
+            } else {
+              updateProjectAccount({ ...values, projectId: props.id, isAdmin: values.isAdmin ? 1 : 0 })
+            }
           } finally {
-            reload()
             openModal(false)
-            createMessage.success('新建账号成功')
+            createMessage.success(formType.value === 0 ? '新建账号成功' : '更新账号成功')
+            fetchTableData(props.id)
           }
         })
       }
 
-      async function createProjectAccount(values: AddProjectAccountParams) {
+      async function createProjectAccount(values: AddOrUpdateProjectAccountParams) {
         await addProjectAccount(values)
       }
 
+      async function updateProjectAccount(values: AddOrUpdateProjectAccountParams) {
+        await saveProjectAccount(values)
+      }
+
       return { formElRef, registerTable, registerModal, registerForm, showModalFn, submitModal }
     }
   })

src/views/dashboard/project-detail/components/tableData.tsx

@@ -1,6 +1,7 @@
 import { BasicColumn } from '/@/components/Table/src/types/table'
 import { Icon } from '/@/components/Icon/index'
-export function getTableColumns(fn: (id: string) => void): BasicColumn[] {
+import { ProjectAccountItem } from '/@/api/sys/model/projectModel'
+export function getTableColumns(fn: (item: ProjectAccountItem) => void): BasicColumn[] {
   return [
     {
       dataIndex: 'account',
@@ -39,7 +40,7 @@ export function getTableColumns(fn: (id: string) => void): BasicColumn[] {
       title: '操作',
       customRender: ({ record }) => (
         <div>
-          <a-button type="primary" onClick={() => fn(record.id)}>
+          <a-button type="primary" onClick={() => fn(record)}>
             编辑
           </a-button>
         </div>