big-model-web/src/views/manage/center/tenant/index.vue

<template>
  <CzrContent
    v-model:tableHead="state.query.head"
    @handleReset="onReset"
    @handleSearch="onSearch"
  >
    <template #tableTitle>
      <div class="flex gap-2.5"></div>
    </template>
    <template #buttons>
      <div class="flex items-center gap-2.5">
        <CzrForm class="bm-filter" label-width="0px" @handleEnter="onSearch">
          <CzrFormColumn
            width="19rem"
            class="__czr-table-form-column"
            :span="24"
            label-width="0px"
            v-model:param="state.query.form.time1"
            link="date"
            type="daterange"
            placeholder="租户启用时间"
          />
          <CzrFormColumn
            width="19rem"
            class="__czr-table-form-column"
            :span="24"
            label-width="0px"
            v-model:param="state.query.form.time2"
            link="date"
            type="daterange"
            placeholder="租户到期时间"
          />
          <CzrFormColumn
            width="6.68rem"
            class="__czr-table-form-column"
            :span="24"
            label-width="0px"
            v-model:param="state.query.form.enabled"
            link="select"
            :options="DictionaryStore.trueFalseStatus"
            placeholder="租户状态"
          />
          <CzrFormColumn
            width="15.63rem"
            class="__czr-table-form-column"
            :span="24"
            label-width="0px"
            v-model:param="state.text"
            placeholder="输入关键词以检索"
            :prefix-icon="Search"
          />
          <CzrButton type="add" @click="onAdd" />
        </CzrForm>
      </div>
    </template>
    <template #table>
      <CzrTable
        v-loading="state.query.loading"
        v-model:data="state.query.result.data"
        :head="state.query.head"
        :total="state.query.result.total"
        :page="state.query.page.pageNum"
        :pageSize="state.query.page.pageSize"
        @handlePage="onPage"
        @handleSort="onSort"
        v-model:selected="state.query.selected"
      >
        <template #caozuo-column-value="{ scope }">
          <div class="__czr-table-operations">
            <CzrButton type="table" title="编辑" @click="onEdit(scope.row)" />
            <CzrButton type="table-del" @click="onDel(scope.row)" />
          </div>
        </template>
      </CzrTable>
    </template>
  </CzrContent>
  <detailCom
    v-model:show="state.detail.show"
    :transfer="state.detail.transfer"
    @refresh="onSearch"
  />
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  watch,
} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { debounce } from 'lodash'
import { useAppStore, useDialogStore, useDictionaryStore } from '@/stores'
import { ElMessage } from 'element-plus'
import detailCom from './detail.vue'
import { tenantsDel, tenantsPage } from '@/api/modules/center/tenant'

const AppStore = useAppStore()
const DialogStore = useDialogStore()
const DictionaryStore = useDictionaryStore()
const emit = defineEmits([])
const props = defineProps({})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({
  text: '',
  query: {
    init: false,
    loading: false,
    head: [
      { value: 'name', label: '租户名称', show: true },
      { value: 'code', label: '租户编号', show: true },
      { value: 'userQuota', label: '用户配额', show: true },
      {
        value: 'enabled',
        label: '租户状态',
        show: true,
        dictList: computed(() => DictionaryStore.trueFalseStatus),
      },
      { value: 'userCounts', label: '用户数量', show: true, sort: true },
      {
        value: 'createTime',
        label: '租户启用时间',
        show: true,
        width: 180,
        datetime: true,
        sort: true,
      },
      {
        value: 'updateTime',
        label: '租户停用时间',
        show: true,
        width: 180,
        datetime: true,
        sort: true,
      },
      {
        value: 'caozuo',
        label: '操作',
        show: true,
        width: 200,
        fixed: 'right',
        popover: false,
      },
    ],
    page: {
      pageNum: 1,
      pageSize: 20,
    },
    form: {},
    formReal: {},
    sort: {},
    result: {
      total: 0,
      data: [],
    },
    selected: [],
  },
  detail: {
    show: false,
    transfer: {},
  },
})
const setText = debounce((v) => {
  state.query.form.keyword = v
}, 1000)
watch(
  () => state.text,
  (n) => {
    setText(n)
  },
)
watch(
  () => state.query.form,
  (n) => {
    if (state.query.init) {
      onSearch()
    }
  },
  { deep: true },
)
const onSort = ({ key, value }) => {
  state.query.sort[key] = value
  onSearch()
}
const onPage = (pageNum, pageSize) => {
  setTimeout(() => {
    state.query.init = true
  }, 100)
  state.query.page = {
    pageNum: pageNum,
    pageSize: pageSize,
  }
  const params = {
    page: state.query.page.pageNum,
    size: state.query.page.pageSize,
  }
  //  添加表单参数
  for (const [k, v] of Object.entries(state.query.formReal)) {
    if (proxy.$czrUtil.isValue(v)) {
      params[k] = v
    }
  }

  //  添加排序参数
  for (const [k, v] of Object.entries(state.query.sort)) {
    if (v) {
      params['sort'] = k
      params['direction'] = v
    }
  }
  state.query.loading = true
  tenantsPage(params)
    .then(({ data }: any) => {
      state.query.result.total = data.totalElements
      state.query.result.data = data.content
    })
    .catch(() => {})
    .finally(() => {
      state.query.loading = false
    })
}
const onSearch = () => {
  state.query.formReal = JSON.parse(JSON.stringify(state.query.form))
  onPage(1, state.query.page.pageSize)
}
const onReset = () => {
  state.query.page = {
    pageNum: 1,
    pageSize: 20,
  }
  state.query.form = {}
  state.query.sort = {}
  onSearch()
}
const onAdd = () => {
  state.detail.transfer = {
    mode: 'add',
  }
  state.detail.show = true
}
const onEdit = (row) => {
  state.detail.transfer = {
    mode: 'edit',
    id: row.id,
  }
  state.detail.show = true
}
const onDel = (row: any) => {
  DialogStore.confirm({
    title: '删除确认',
    content: `请确认是否删除${row.name}？`,
    onSubmit: () => {
      tenantsDel(row.id)
        .then(() => {
          ElMessage.success('删除成功！')
        })
        .catch(() => {})
        .finally(() => {
          onSearch()
        })
    },
  })
}
onMounted(() => {
  initDictionary()
  onReset()
})
const initDictionary = () => {}
</script>

<style lang="scss" scoped></style>