njzscloud-dispose-web/src/pages/sys/sn-config/SnConfig.vue

<script lang="ts" setup>
import Page from '@/components/page/Page.vue'
import SnConfigApi from '@/pages/sys/sn-config/sn-config-api.ts'
import { descConfig } from '@/pages/sys/sn-config/sn-config-util.ts'
import SnConfigForm from '@/pages/sys/sn-config/SnConfigForm.vue'
import Strings from '@/common/utils/strings.ts'
import { elIcons } from '@/common/element/element.ts'

const snConfigFormIns = useTemplateRef<InstanceType<typeof SnConfigForm>>('snConfigForm')

function addHandler() {
  snConfigFormIns.value?.open()
}

function reset() {
  searchForm.value = {}
  searchHandler()
}

const searchForm = ref<SnConfigTypes.SearchSnConfigParam>({
  snname: undefined,
  sncode: undefined,
  current: 1,
  size: 20,
})
const searching = ref(false)

const totalCount = ref(0)
const datasource = ref<SnConfigTypes.SnConfigDetail[]>([])

function searchHandler() {
  searching.value = true
  SnConfigApi.paging(searchForm.value)
    .then((res) => {
      totalCount.value = res.data?.total ?? 0
      datasource.value = res.data.records.map((it) => ({
        key: it.id,
        ...it,
        configDesc: descConfig(it.config).join('\n'),
      }))
    })
    .finally(() => {
      searching.value = false
    })
}

function modify(record: SnConfigTypes.SnConfigDetail) {
  snConfigFormIns.value?.open(record)
}


function del(record: SnConfigTypes.SnConfigDetail) {
  console.log(record)
  SnConfigApi.del(record.id)
    .then(() => {
      ElMessage.success('删除成功')
      searchHandler()
    })
}

onMounted(() => {
  searchHandler()
})
</script>

<template>
  <Page>
    <ElForm class="search-form" inline @submit.prevent="searchHandler">
      <ElFormItem :gutter="[0, 10]" label="规则名称">
        <ElInput clearable control="snname" placeholder="请输入规则名称"/>
      </ElFormItem>
      <ElFormItem :gutter="[0, 10]" label="规则代码">
        <ElInput clearable control="sncode" placeholder="请输入规则代码"/>
      </ElFormItem>
      <ElFormItem>
        <ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
        <ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
      </ElFormItem>
    </ElForm>
    <div class="tool-bar">
      <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton>
    </div>
    <ElTable
      v-loading="searching" :data="datasource"
      cell-class-name="table-cell"
      class="table-list"
      empty-text="暂无数据"
      header-row-class-name="table-header"
      row-key="id">
      <ElTableColumn label="规则名称" prop="snname" width="180"/>
      <ElTableColumn label="规则代码" prop="sncode" width="170"/>
      <ElTableColumn label="示例" prop="example" width="200"/>
      <ElTableColumn label="配置信息" prop="configDesc">
        <template #default="scope">
          <span v-if="Strings.isBlank(scope.row.configDesc)"/>
          <template v-else>
            <div v-for="(item,i) in  scope.row.configDesc.split('\n')" :key="scope.row.id+i">{{ item }}</div>
          </template>
        </template>
      </ElTableColumn>
      <ElTableColumn label="备注" prop="memo" width="200"/>
      <ElTableColumn label="操作" width="180">
        <template #default="scope">
          <ElPopconfirm
            cancel-button-text="否"
            cancel-button-type="primary"
            confirm-button-text="是"
            confirm-button-type="danger"
            placement="top"
            title="是否删除当前数据?"
            width="180"
            @confirm="del(scope)">
            <template #reference>
              <ElButton text type="danger">删除</ElButton>
            </template>
          </ElPopconfirm>
          <ElButton text type="primary" @click="modify(scope.row)">修改</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      v-model:current-page="searchForm.current"
      v-model:page-size="searchForm.size"
      :hide-on-single-page="false"
      :page-sizes="[10, 20, 50, 100, 500]"
      :teleported="false"
      :total="totalCount"
      layout="->, sizes, total, prev, pager, next"
      @change="searchHandler"/>
    <SnConfigForm ref="snConfigForm" @close="searchHandler"/>
  </Page>
</template>

<style lang="stylus" scoped>
.table-list {
  flex 1;
  margin 0 0 20px 0
  width 100%

  :deep(.table-header) {
    color #454C59

    th {
      background-color #EDF1F7
      font-weight 500
      position relative

      & > div {
        display flex
        gap 5px
        align-items center
      }

      &:not(:first-child) > div::before {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 1px;
        background-color: #D3D7DE;
        transform: translateY(-50%);
        content: "";
        height 50%
      }
    }
  }

  :deep(.table-cell) {
    color #2F3540
  }

  .action-btn {
    width 100%
    display flex
    flex-wrap wrap

    & > button {
      margin 0
    }
  }
}

.tool-bar {
  display flex
  justify-content space-between
  margin 0 0 20px 0
}
</style>