cc-officialweb-admin/src/view/links/link.vue

<template>
  <div>
    <el-card>
      <el-button type="primary"
                 @click="() => router.push({ path: '/links/add'})">添加
      </el-button>
      <!-- 添加el-dialog组件 -->
      <el-table :data="tableData" border style="width: 100%;margin-top:20px">
        <el-table-column label="序号" width="60">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180">
          <template #default="scope">
            <el-input v-model="scope.row.title"   @change="UpData(scope.row.ID,'title',scope.row.title)" size="mini" />
          </template>
        </el-table-column>
        <el-table-column prop="types" label="链接" width="280">
          <template #default="scope">
            <el-input v-model="scope.row.url"   @change="UpData(scope.row.ID,'url',scope.row.url)" size="mini" />
          </template>
        </el-table-column>
        <el-table-column prop="nums" label="排序" width="180">
          <template #default="scope">
            <el-input-number v-model="scope.row.sort" @change="UpData(scope.row.ID,'sort',scope.row.sort)" size="mini" />
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleteData(scope.row.ID)">删除</el-button>
            <!--            <el-button type="primary" size="small" @click="deleteResource(scope.row.ID)">修改</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="margin-top:20px" :current-page="searchForm.page" :page-size="searchForm.size"
                     :total="total"
                     @current-change="handleCurrentChange"/>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRouter} from 'vue-router'
import link from "../../api/links.js";
const dataType = reactive([])

const router = useRouter();
// Dom 挂载之后
onMounted(() => {
  getDataAll();
})

let tableData = ref([]);
let total = ref(0);

// 搜索条件
const searchForm = reactive({
  page: 1,
  size: 10,
  desc: 'created_at desc'
})

const UpData = async (id,field,value) => {
  const res = await link.UpdateLinks({
    id: parseInt(id),
    [field]: value,
  });
  if (res.data.Code === 200) {
      ElMessage.success("修改成功")
      await getDataAll();
    } else {
      ElMessage.error(res.data.Msg)
    }
}
// 获取资源列表
const getDataAll = async () => {
  const res = await link.getalllinks(searchForm);
  tableData.value = res.data.Data.Data;
  total.value = res.data.Data.Size;
}

const handleCurrentChange = (current) => {
  searchForm.page = current;
  getDataAll();
}

// 删除资源信息
const deleteData = (id) => {
  ElMessageBox.confirm(
      '确定要删除该资源信息吗?',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const res = await link.deletelinks({id: id});
    if (res.data.code === 200) {
      ElMessage.success("删除成功")
      await getDataAll();
    } else {
      ElMessage.error(res.data.msg)
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
</script>

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