dySdDesignerVue_Admin/src/views/system/contentList/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input @keyup.enter="handleSearch" class="w200px mr5px" v-model="queryForm.keyWord" placeholder="关键字搜索"/>
      <el-button v-throttle type="primary" @click="handleSearch">
        <i-ep-search/>
        搜索
      </el-button>
      <el-button v-throttle @click="openDialog()" color="#11a983">
        <i-ep-plus/>
        增加
      </el-button>
      <el-button v-throttle type="primary" @click="refreshTableInfo">
        <i-ep-refresh/>
      </el-button>
    </div>
    <div class="table-con">
      <el-table
          :max-height="tableHeight"
          v-loading="loading"
          :data="tableData"
          highlight-current-row
          border
      >
        <el-table-column label="操作" width="140">
          <template #default="{row}">
            <el-button link @click="openDialog(row.id)" type="primary">
              <i-ep-edit/>
              编辑
            </el-button>
            <el-button  link @click="handleDisable(row.id)" type="warning">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
            type="index"
            label="#"
            width="50">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="groupName" width="150" label="分组名称"/>
        <el-table-column prop="caption" width="150" label="标题名称"/>
        <el-table-column prop="siteLabel" width="150" label="标签"/>
        <el-table-column prop="sortIndex" width="150" label="排序"/>
        <el-table-column
            prop="createTime"
            label="创建时间"
            >
          <template #default="{row}">
          <span v-if="row.createTime">
           {{ $filters.formatDate(row.createTime)}}
          </span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryPage.pageIndex"
          v-model:limit="queryPage.pageSize"
          @pagination="getTableData"
      />
    </div>
    <child-dialog ref="childDialog" @dialogChange="dialogChange"></child-dialog>
  </div>
</template>
<script setup lang="ts">
import {callSite} from "@/api/system";
import ChildDialog from './compt/childDialog.vue'
import {useTable} from '@/hooks/useTable'
import {formatDate} from "@/utils/filters";

const childDialog = ref<any>()

//增加编辑
function openDialog(item?: any) {
  childDialog.value.dialogVisible = true;
  if (item) {
    childDialog.value.dialogTitle = "编辑";
    nextTick(() => {
      childDialog.value.getItemData(item)
    });
  } else {
    nextTick(() => {
      childDialog.value.dialogTitle = "增加";
      childDialog.value.resetForm()
    })
  }
}

//禁用删除
function handleDisable(id) {
  ElMessageBox.confirm("确认操作?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const params = {
      "businessMethod":'SiteContent_Delete',
      "params":JSON.stringify({
        "id": id
      })
    };
    callSite(params).then((response) => {
      if (response.httpCode == 200) {
        ElMessage.success("操作成功");
        getTableData();
      }

    })
  })
}

//修改成功后传递事件
function dialogChange() {
  getTableData()
}

const queryForm = reactive({
  keyWord: '',
  voidFlag: 0
})
const {
  tableData,
  queryPage,
  total,
  loading,
  getTableData,
  tableHeight,
  handleSearch,//搜索
  refreshTableInfo,//刷新
} = useTable(callSite, queryForm,'SiteContent_List');
</script>