web_dist/src/views/dictionary/serviceNumber/ScrollNews.vue

<template>
  <div class="layout_container">
    <el-table :data="news">
      <el-table-column prop="sortNo" label="序号" width="100"></el-table-column>
      <el-table-column prop="title" label="标题">
        <template #default="{ row }">
          <div v-if="row.editMode">
            <el-input v-model="row.title"></el-input>
          </div>
          <div v-else>
            {{ row.title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="链接">
        <template #default="{ row }">
          <div v-if="row.editMode">
            <el-input v-model="row.link"></el-input>
          </div>
          <div v-else>
            {{ row.link }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button
            v-if="!row.editMode"
            type="primary"
            @click="row.editMode = true"
            >编辑</el-button
          >
          <el-button v-if="row.editMode" type="success" @click="saveRow(row)"
            >保存</el-button
          >
          <el-button v-if="row.editMode" type="info" @click="cancelEdit(row)"
            >取消</el-button
          >
          <el-button type="danger" @click="deleteRow(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {
  getById,
  getAll,
  update,
} from "@/api/dictionary/serviceNumber/sroll-news";
import { CyMessageBox } from "@/utils/cy-message-box";

const news = ref([]);
function getAllScrollNews() {
  getAll().then(res => {
    news.value = res;
  });
}

function saveRow(row) {
  update(row).then(() => {
    row.editMode = false;
  });
}

function cancelEdit(row) {
  getById(row.sortNo).then(res => {
    row.title = res.title;
    row.link = res.link;
    row.editMode = false;
  });
}

function deleteRow(row) {
  CyMessageBox.confirm({
    title: "提示",
    message: "删除后不可恢复，确定删除吗？",
  }).then(() => {
    update({ sortNo: row.sortNo, title: "", link: "" }).then(() => {
      getAllScrollNews();
    });
  });
}

onMounted(() => {
  getAllScrollNews();
});
</script>