dg_erp/jy-ui/src/views/business/log/userOperation/index.vue

<script setup lang="ts">
import AForm from '@/components/AForm/index.vue'
import { FormConfigType } from '@/components/AForm/type'
import { ToolbarConfigType } from '@/components/AToolbar/type'
import { ColumnConfigType } from '@/components/ATable/type'
import { StrAnyObj, StrAnyObjArr } from '@/typings'
import { editApi, getDetailApi, getPageApi } from '@/api/business/log/userOperation'
import { getListApi } from '@/api/system/user'

const props = withDefaults(
  defineProps<{
    logData: StrAnyObj
  }>(),
  {
    logData: {}
  }
)
const queryRef = ref<InstanceType<typeof AForm>>()
const formRef = ref<InstanceType<typeof AForm>>()

const showQuery = ref<boolean>(true)
const pageTotal = ref<number>(0)

const queryData = ref<StrAnyObj>({ pageNum: 1, pageSize: 10 })
const tableData = ref<StrAnyObjArr>([])
const formData = ref<StrAnyObj>({})

const dialogVisible = ref<boolean>(false)

const queryConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'moduleName',
    label: '操作模块'
  },
  {
    type: 'select',
    prop: 'operatorId',
    label: '操作人',
    keyName: 'id',
    labelName: 'nickname',
    async option() {
      return await getListApi()
    }
  },
  {
    type: 'select',
    prop: 'operationType',
    label: '操作类型',
    option: [
      {
        key: 2,
        label: '新增'
      },
      {
        key: 3,
        label: '修改'
      },
      {
        key: 4,
        label: '删除'
      }
    ]
  },
  {
    type: 'select',
    prop: 'auditStatus',
    label: '审核状态',
    option: [
      {
        key: 0,
        label: '待审核'
      },
      {
        key: 1,
        label: '通过'
      },
      {
        key: 2,
        label: '拒绝'
      }
    ]
  }
]

const toolbarConfig: ToolbarConfigType[] = [
  {
    common: 'search',
    click() {
      queryData.value.pageNum = 1
      getPage()
    }
  },
  {
    common: 'reset',
    click() {
      queryRef.value?.resetFields()
      getPage()
    }
  }
]

const columnConfig: ColumnConfigType[] = [
  {
    prop: 'moduleName',
    label: '模块标题',
    width: 140
  },
  {
    prop: 'operatorName',
    label: '操作人姓名',
    width: 140
  },
  {
    prop: 'operationType',
    label: '操作类型',
    formatter: (row) => {
      switch (row.operationType) {
        case 2:
          return '新增'
        case 3:
          return '修改'
        case 4:
          return '删除'
      }
      return ''
    },
    width: 120
  },
  {
    prop: 'createTime',
    label: '操作时间',
    width: 160
  },
  {
    prop: 'description',
    label: '操作描述'
  },
  {
    prop: 'auditStatus',
    label: '审核状态',
    formatter: (row) => {
      switch (row.auditStatus) {
        case 0:
          return '待审核'
        case 1:
          return '通过'
        case 2:
          return '拒绝'
      }
      return ''
    },
    width: 120,
    if: () => !(props.logData && props.logData.id)
  },
  {
    prop: 'auditTime',
    label: '审核时间',
    width: 160,
    if: () => !(props.logData && props.logData.id)
  },
  {
    prop: 'remark',
    label: '审核注释',
    width: 160,
    if: () => !(props.logData && props.logData.id)
  },
  {
    width: 120,
    if: () => !(props.logData && props.logData.id),
    handleConfig: [
      {
        if: (row) => row.auditStatus == 0,
        text: '审核',
        click(row) {
          dialogVisible.value = true
          getDetailApi({ id: row.id }).then((resp: StrAnyObj) => {
            formData.value = resp
          })
        }
      }
    ]
  }
]

onMounted(() => {
  getPage()
})

function getPage() {
  if (props.logData && props.logData.id) {
    queryData.value.businessId = props.logData.id
  }
  getPageApi(queryData.value).then((resp) => {
    tableData.value = resp.records
    pageTotal.value = resp.total
  })
}

function formSubmit(status: boolean) {
  editApi({ ...formData.value, auditStatus: status ? 1 : 2 }).then(() => {
    dialogVisible.value = false
    ElMessage.success('操作成功')
    getPage()
  })
}
</script>

<template>
  <div :style="props.logData && props.logData.id ? 'max-height: calc(100vh - 140px); overflow: hidden auto' : ''">
    <el-card v-if="showQuery">
      <a-form ref="queryRef" v-model="queryData" :config="queryConfig" :span="6"> </a-form>
    </el-card>

    <a-table
      :data="tableData"
      :page-total="pageTotal"
      :toolbar-config="toolbarConfig"
      :column-config="columnConfig"
      v-model:show-query="showQuery"
      v-model:page-num="queryData.pageNum"
      v-model:page-size="queryData.pageSize"
      @page-num-change="getPage"
      @page-size-change="getPage"
    >
    </a-table>

    <a-dialog v-model="dialogVisible" title="审核" :footer="false">
      <el-form-item label="操作描述">
        <el-input type="textarea" v-model="formData.description" disabled placeholder="操作描述" />
      </el-form-item>
      <el-form-item label="审核备注">
        <el-input type="textarea" v-model="formData.remark" placeholder="请输入审核备注" />
      </el-form-item>
      <div style="text-align: center">
        <div>
          <el-button plain type="info" @click="dialogVisible = false">关 闭</el-button>
          <el-button plain type="success" @click="formSubmit(true)">通 过</el-button>
          <el-button plain type="warning" @click="formSubmit(false)">拒 绝</el-button>
        </div>
      </div>
    </a-dialog>
  </div>
</template>