zhiyu_duanju_distribution_manage_front/src/views/pageLayout/homePageManage/index.vue

<template>
  <div class="table-default">
    <div class="pt-5 pl-2" v-action="'operation.FirstPage.add'">
      <el-button type="primary" size="default" @click="openForm(null)">新增</el-button>
    </div>
    <el-table :data="tableData" class="mt-3" v-loading="loading">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="列表名称" prop="type_str">
      </el-table-column>
      <el-table-column label="添加时间" prop="created_at">
      </el-table-column>
      <el-table-column label="状态" v-action="'operation.FirstPage.enableStatus'">
        <template #default="scope">
          <div>
            <el-switch v-model="scope.row.status" :disabled="Boolean(scope.row.status)" @change="switchStatus(scope.row)"
              :active-value="1" :inactive-value="0">
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button link type="primary" size="default" @click="handleConfigure(scope.row)"
            v-action="'operation.FirstPage.setConfig'">配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Paginate />
  </div>
  <Dialog v-model="configVisible" title="配置" width="50%" destroy-on-close>
    <config @close="closeType('configVisible')" :primary="currentConfig"></config>
  </Dialog>

  <Dialog v-model="addVisible" title="新增" width="30%" destroy-on-close>
    <create @close="closeType('addVisible')"></create>
  </Dialog>
</template>

<script lang="ts"  setup>
import { InfoFilled } from '@element-plus/icons-vue';
import { computed, onMounted, ref } from 'vue';
import create from './form/create.vue';
import config from './form/config.vue';
import { useGetList } from '@/hook/curd/useGetList';
import { operationManageFirstPageEnableStatus } from '@/api/pageLayout/homePage/index'

const api = 'operationManage/firstPage/list';

const { data, query, search, reset, loading } = useGetList(api, true);
const tableData = computed(() => data.value?.data);
const addVisible = ref(false)
const currentConfig = ref({})
const configVisible = ref(false) //设置回传弹窗

const closeType = (type: string) => {
  switch (type) {
    case 'configVisible':
      configVisible.value = false
      break;
    case 'addVisible':
      addVisible.value = false
      break;
  }
  search()
}

const switchStatus = (data: object) => {
  operationManageFirstPageEnableStatus({ id: data.id }).then(res => {
    ElMessage.success(res.message)
    search()
  })
}


const openForm = (data: any) => {
  addVisible.value = true
};
const handleConfigure = (data: object) => {
  currentConfig.value = data
  configVisible.value = true
};
onMounted(() => {
  search();
});
</script>
<style  lang='scss' scoped></style>