policeSecurity/securityManagement/src/views/userManagement/uniManagement/index.vue

<template>
  <div>
    <TableProMax
        ref="tableRef"
        :request-api="reqApi"
        :columns="columns"
        :searchFormOptions="searchFormOptions"
        :scroll="{x}"
    >
    </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, FromItem} 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 {UNIT_TYPE} from "@/config";


type TableProps = TableProMaxProps<BgManagementPagerQueryParams>

const tableRef = ref<ComponentExposed<typeof TableProMax>>(null!)
// table表格
const reqApi: TableProps['requestApi'] = (params) => api.post('/management/miniProgramUserPager', params)  //分页
const columns: TableProps['columns'] = [
  {
    dataIndex: 'name',
    title: '名称',
    width: 150,
    ellipsis: true
  },
  {
    dataIndex: 'identity',
    title: '身份类型',
    width: 150,
    customRender: ({text}) => <div>{text?.label}</div>,
  },
  {
    dataIndex: 'sex',
    title: '性别',
    customRender: ({text}) => <a-tag>{text?.label}</a-tag>,
    width: 100
  }, {
    dataIndex: 'telephone',
    title: '手机号码',
    width: 150,
    ellipsis: true
  },
  {
    dataIndex: 'createTime',
    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}) {
      if (record.checkStatus.value === 1) {
        return <a-space>
          <a-popconfirm
              title="确认审核通过嘛?"
              onConfirm={async () => {
                const resp = await api.post('/management/passMiniProgramUser', {
                  dataId: record.snowFlakeId,
                  unitOptType: UNIT_TYPE.security
                })
                message.success(resp.message)
                await tableRef.value?.requestGetTableData()
              }}>
            <a-button type="primary">审核通过</a-button>
          </a-popconfirm>
        </a-space>
      }
      return <a-space >
        <a-button
            className={record.isEnable.value === 0 ? 'btn-danger' : 'btn-success'}
            onClick={async () => {
              const resp = await api.post('/management/disableOrEnableMiniProgramUser', {
                dataId: record.snowFlakeId,
                unitOptType: UNIT_TYPE.security
              })
              message.success(resp.message)
              await tableRef.value?.requestGetTableData()
            }}
        >{record.isEnable.value === 0 ? '禁用' : '启用'}
        </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: any,
  remark?: string,
}>({
  name: '',
  sex: 0,
  telephone: '',
  isEnable: 0,
})

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)
  tableRef.value?.requestGetTableData()
  closeModal()

}
const closeModal = () => {
  formParams.value = {
    name: '',
    sex: 0,
    telephone: '',
    isEnable: 0,
    remark: ''
  }
  visible.value = false
  title.value = '新增用户'
}
//Form
// const addUserManagement = () => {
//   visible.value = true
// }
</script>


<style scoped lang="scss">

</style>