VberAdmin-Java_V1/UI/VA.Vue_V1.0/src/views/system/post/index.vue

<script setup lang="ts" name="Post">
import apis from "@/api"
import DictSelect from "@/components/dict/DictSelect.vue"
import type { VbFormItem } from "@/components/form/models"
import { ElInput } from "element-plus"
import { permissionNames } from "@/core/services/PermissionNames"

const tableRef = ref()
const modalRef = ref()
const opts = reactive<any>({
  columns: [
    { field: "postId", name: `岗位编号`, width: 85 },
    { field: "postCode", name: `岗位编码`, isSort: true },
    { field: "postName", name: `岗位名称`, isSort: true },
    { field: "postSort", name: `岗位排序`, isSort: true },
    { field: "status", name: `状态` },
    { field: "createTime", name: `创建时间`, isSort: true },
    { field: "actions", name: `操作`, width: 150 },
  ],
  queryParams: {
    postCode: undefined,
    postName: undefined,
    status: undefined,
  },
  searchFormItems: [
    {
      field: "postCode",
      label: "岗位编码",
      placeholder: "请输入岗位编码",
      required: false,
      component: ElInput,
      listeners: {
        keyup: (e: KeyboardEvent) => {
          if (e.code == "Enter") {
            handleQuery()
          }
        },
      },
    },
    {
      field: "postName",
      label: "岗位名称",
      placeholder: "请输入岗位名称",
      required: false,
      component: ElInput,
      listeners: {
        keyup: (e: KeyboardEvent) => {
          if (e.code == "Enter") {
            handleQuery()
          }
        },
      },
    },
    {
      field: "status",
      label: "岗位状态",
      required: false,
      component: DictSelect,
      props: {
        placeholder: "请选择岗位状态",
        dictType: "sys_normal_disable",
      },
    },
    // {
    //   field: "dateRange",
    //   label: "登录时间",
    //   required: false,
    //   component: ElDatePicker,
    //   props: {
    //     placeholder: "请选登录建时间",
    //     valueFormat: "YYYY-MM-DD HH:mm:ss",
    //     type: "daterange",
    //     rangeSeparator: "-",
    //     startPlaceholder: "开始日期",
    //     endPlaceholder: "结束日期",
    //     defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)],
    //   },
    //   listeners: {
    //     change: (v: any) => {
    //       //console.log("DATE_RANGE_CHANGE", v)
    //       //dateRange.value = v
    //       queryParams.value.dateRange = v
    //     },
    //   },
    // },
  ],
  permission: permissionNames.SystemPost,
  handleFuns: {},
  customBtns: [],
  tableListFun: apis.system.postApi.listPost,
  getEntityFun: apis.system.postApi.getPost,
  deleteEntityFun: apis.system.postApi.delPost,
  exportUrl: apis.system.postApi.exportUrl,
  exportName: "POST",
  modalTitle: "岗位",
  resetForm: () => {
    form.value = emptyFormData.value
  },
  emptyFormData: {
    postId: undefined,
    postCode: undefined,
    postName: undefined,
    postSort: 0,
    status: "0",
    remark: undefined,
  },
})
const { queryParams, emptyFormData } = toRefs(opts)
const form = ref<any>(emptyFormData.value)

/** 修改按钮操作 */
function handleUpdate(row: any) {
  tableRef.value.defaultHandleFuns["handleUpdate"]("", row)
}
/** 删除按钮操作 */
function handleDelete(rows: Array<any>) {
  tableRef.value.defaultHandleFuns["handleDelete"]("", rows)
}
/** 提交按钮 */
function submitForm() {
  if (form.value.postId != undefined) {
    apis.system.postApi.updatePost(form.value).then(() => {
      message.msgSuccess("修改成功")
      handleQuery()
    })
  } else {
    apis.system.postApi.addPost(form.value).then(() => {
      message.msgSuccess("新增成功")
      handleQuery()
    })
  }
}
/** 查询按钮 */
function handleQuery() {
  addDateRange(queryParams.value, queryParams.value.dateRange)
  tableRef.value?.search()
}
/** 查询重置按钮 */
function resetQuery() {
  queryParams.value.dateRange = []
  addDateRange(queryParams.value, queryParams.value.dateRange)
}
const formItems = ref([
  {
    field: "postName",
    label: "岗位名称",
    placeholder: "请输入岗位名称",
    required: true,
    component: ElInput,
    span: 12,
  },
  {
    field: "postCode",
    label: "岗位编码",
    placeholder: "请输入岗位编码",
    required: true,
    component: ElInput,
    span: 12,
  },
  {
    field: "postSort",
    label: "岗位顺序",
    placeholder: "请输入岗位顺序",
    required: true,
    component: ElInput,
    span: 12,
  },
  {
    field: "status",
    label: "岗位状态",
    class: "w-100",
    component: DictSelect,
    props: {
      placeholder: "请选择岗位状态",
      dictType: "sys_normal_disable",
    },
    span: 12,
  },
  {
    field: "remark",
    label: "备注",
    type: "textarea",
    placeholder: "请输入备注内容",
    required: false,
    component: ElInput,
    span: 24,
  },
])
</script>

<template>
  <div class="app-container">
    <VbDataTable
      ref="tableRef"
      :handle-perm="opts.permission"
      :handle-funs="opts.handleFuns"
      :search-form-items="opts.searchFormItems"
      :header="opts.columns"
      :custom-btns="opts.customBtns"
      :remote-fun="opts.tableListFun"
      :get-entiy-fun="opts.getEntityFun"
      :delete-entiy-fun="opts.deleteEntityFun"
      :export-url="opts.exportUrl"
      :export-name="opts.exportName"
      :modal="modalRef"
      :reset-form-fun="opts.resetForm"
      v-model:form-data="form"
      :query-params="queryParams"
      :check-multiple="true"
      :has-checkbox="true"
      :reset-search-form-fun="resetQuery"
      :custom-search-fun="handleQuery"
    >
      <template #status="{ row }">
        <DictTag :value="row.status" type="sys_normal_disable"></DictTag>
      </template>
      <template #actions="{ row }">
        <vb-tooltip content="修改" placement="top">
          <el-button link type="primary" @click="handleUpdate(row)" v-hasPermission="permissionNames.SystemPostEdit">
            <template #icon>
              <KTIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></KTIcon>
            </template>
          </el-button>
        </vb-tooltip>
        <vb-tooltip content="删除" placement="top">
          <el-button
            link
            type="primary"
            @click="handleDelete([row])"
            v-hasPermission="permissionNames.SystemPostRemove"
          >
            <template #icon>
              <KTIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></KTIcon>
            </template>
          </el-button>
        </vb-tooltip>
      </template>
    </VbDataTable>
    <VbModal
      v-model:modal="modalRef"
      :title="opts.modalTitle"
      :form-items="(formItems as Array<VbFormItem>)"
      :form-data="form"
      @confirm="submitForm"
      append-to-body
    ></VbModal>
  </div>
</template>