policeSecurity/securityManagement/src/views/test.vue

<template>
  <div>
    <TableProMax
        ref="tableRef"
        :request-api="reqApi"
        :columns="columns"
        :searchFormOptions="searchFormOptions"
        :scroll="{x}"
    >
      <template #tableHeader>
        <a-space>
          <a-button type="primary" @click="addUserManagement">新增用户</a-button>
        </a-space>
      </template>
    </TableProMax>
    <a-modal
        v-model:open="visible"
        :title="title"
        @ok="submit"
        @cancel="closeModal"
    >
      <FormProMax ref="formRef" v-model:value="formParams"  :form-item-options="formItemOptions"/>
    </a-modal>
  </div>

</template>

<script setup lang="tsx">
import TableProMax from "@/components/table/TableProMax.vue";
import {TableProMaxProps} from "@/types/components/table";
import api from "@/axios";
import {ref} from "vue";
import {ComponentExposed} from "vue-component-type-helpers";
import {dictSelectNodes} from "@/config/dict.ts";
import {BgManagementPagerQueryParams} from "@/types/views/bgManagement.ts";
import FormProMax from "@/components/form/FormProMax.vue";
import {FormProMaxItemOptions} from "@/types/components/form";
import {FormExpose} from "ant-design-vue/es/form/Form";
import {message} from "ant-design-vue";
import {} from '@/hooks/useTableProMax.ts'


type TableProps = TableProMaxProps<BgManagementPagerQueryParams>

const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
// table表格
const reqApi: TableProps['requestApi'] = (params) => api.post('/managementSecurityUnitUser/pager', params)  //分页
const columns: TableProps['columns'] = [
  {
    dataIndex: 'account',
    title: '账号',
    width: 100,
    ellipsis: true
  },
  {
    dataIndex: 'name',
    title: '名称',
    width: 200,
    ellipsis: true
  }, {
    dataIndex: 'sex',
    title: '性别',
    customRender: ({text}) => <a-tag>{text?.label}</a-tag>,
    width: 150
  }, {
    dataIndex: 'telephone',
    title: '手机号码',
    width: 150,
    ellipsis: true
  },
  {
    dataIndex: 'createTime',
    title: '创建时间',
    width: 200,
    ellipsis: true,
  },
  {
    dataIndex: 'snowFlakeId',
    title: '社区唯一编码',
    width: 200,
    ellipsis: true
  }, {
    dataIndex: 'remark',
    title: '备注',
    width: 200,
    ellipsis: true
  }, {
    dataIndex: 'isEnable',
    title: '是否启用',
    customRender: ({text}) => <a-tag color={text?.extData?.color}>{text?.label}</a-tag>,
    width: 150
  }, {
    dataIndex: 'opt',
    title: '操作',
    fixed: "right",
    customRender({record}) {
      return <a-space>
        <a-button class={record.isEnable.value === 0 ? 'btn-danger' : 'btn-success'}  onClick={async () => {
          const resp = await api.post('/management/disableOrEnable', {
            unitId: record.snowFlakeId,
            unitOptType: UNIT_TYPE.security
          })
          message.success(resp.message)
          await tableRef.value?.requestGetTableData()
        }}>
          {record.isEnable.value === 0 ? '禁用' : '启用'}
        </a-button>



        <a-button>
          删除
        </a-button>
        <a-button  onClick={async () => {
              visible.value = true
              title.value = "编辑用户"
              formParams.value.snowFlakeId = record.snowFlakeId
              formParams.value.name = record.name,
              formParams.value.sex =  record.sex.value,
              formParams.value. telephone = record.telephone,
              formParams.value.isEnable = record.isEnable?.value,
              formParams.value.remark = record.remark
        }}>
          编辑
        </a-button>
      </a-space>
    }
  },
]
const x: number = columns.reduce((a, b) => a + (b.width as number), 0)
const searchFormOptions: TableProps["searchFormOptions"] = {
  name: {
    type: 'input',
    label: '名称'
  }, sex: {
    type: 'select',
    label: '性别',
    options: [
      {
        value: null,
        label: '全部'
      }, ...dictSelectNodes('Sex')
    ]
  },
  telephone: {
    type: 'input',
    label: '手机号'
  },
  isEnable: {
    type: 'select',
    label: '是否启用',
    options: [
      {
        value: null,
        label: '全部'
      }, ...dictSelectNodes('IsEnable')
    ]
  }
}


const visible = ref(false)
const title = ref('新增用户')
const formRef  = ref<FormExpose>(null)
const formParams = ref<{
  snowFlakeId?: string,
  name: string,
  sex: number,
  telephone: string,
  isEnable: boolean,
  remark?: string,
}>({
  name: '',
  sex: null,
  telephone: '',
  isEnable: null,
})

interface FromItem {
  snowFlakeId?: string,
  name: string,
  sex: number,
  telephone: string,
  isEnable: boolean,
  remark?: string,
}

const formItemOptions = ref<FormProMaxItemOptions<FromItem>>({

  name:{
     type:'input',
     label:'姓名',
     required:true,
  },
  sex:{
     type:'radioGroup',
     label:'性别',
     options: dictSelectNodes('Sex'),
     required:true,
  },
  telephone:{
    type:'input',
    label:'手机号',
    required:true,
  },
  isEnable:{
    type:'radioGroup',
    label:'启用状态',
    options: dictSelectNodes('IsEnable'),
    required:true,
  },
  remark:{
    type:'inputTextArea',
    label:'备注',
  }
})
const submit = async () => {
  await formRef.value.validate()
  const snowFlakeId = ref('')
   if(title.value === '新增用户'){
     snowFlakeId.value = ''
   }else{
     snowFlakeId.value = formParams.value.snowFlakeId
   }
  const managementSecurityUnitUserSaveOrUpdateParams = {
    snowFlakeId:snowFlakeId.value,
    name:formParams.value.name,
    sex:formParams.value.sex,
    telephone:formParams.value.telephone,
    isEnable:formParams.value.isEnable,
    remark:formParams.value.remark
  }
  const resp =  await api.post('/managementSecurityUnitUser/saveOrUpdate',managementSecurityUnitUserSaveOrUpdateParams)
  message.success(resp.message)
  close()
}
const close = ()=>{
  tableRef.value?.requestGetTableData()
  visible.value = false
  closeModal()
}
const closeModal = () => {
  formParams.value = {
    name:'',
    sex:null,
    telephone:'',
    isEnable:null,
    remark:''
  }
  visible.value = false
  // formRef.value.
  console.log('取消')
}
//Form
const addUserManagement = () => {
  visible.value = true
  title.value = ''
}
</script>


<style scoped lang="scss">

</style>