tangguo_admin/src/views/aiManagement/aiImageToVideoList/index.vue

<template>
  <div class="ai-order-list">
    <ConfigTable
      ref="ct"
      :searchConfig="searchConfig"
      :tableColumns="tableColumns"
      :tableData="list"
      :total="total"
      @change="loadData"
      @delete="delRow"
      @edit="editRow"
    ></ConfigTable>
    <EditStatus ref="editDialog" @sure="callEdit"></EditStatus>
  </div>
</template>

<script>
import Gallery from "@/components/Gallery";
import ConfigTable from "@/components/ConfigTable";
import { changeDate } from "@/utils/filter";
import transApi from "@/api/transactionManagement";
import TagEdit from "./components/TagEdit.vue";
import {
  findLabel,
  findStatusLabel,
  findStatusType,
  sceneTypeMixin,
  statusOptions,
} from "./config";
import EditStatus from "./components/EditStatus.vue";

const searchConfig = (_this) => {
  return [
    { type: "input", placeholder: "请输入ID", key: "id" },
    {
      type: "select",
      placeholder: "请选择状态",
      key: "status",
      options: statusOptions,
    },
    {
      type: "select",
      placeholder: "请选择场景类型",
      key: "sceneType",
      options: _this.sceneTypes,
    },
    { type: "input", placeholder: "请输入用户ID", key: "uid" },
    { type: "button", icon: "search", placeholder: "搜索", key: "search" },
  ];
};

const tableColumns = (_this) => [
  { name: "ID", key: "id", width: 220, fixed: "fixed" },
  { name: "用户ID", key: "uid" },
  { name: "金币", key: "coin" },
  {
    name: "场景类型",
    key: "sceneType",
    component: TagEdit,
    props(value) {
      return {
        type: findStatusType(value),
        msg: "",
        showEdit: false,
      };
    },
    valueHandler: (val) => findLabel(val, _this.sceneTypes),
  },
  {
    name: "未处理的图片",
    key: "imgUrl",
    component: Gallery,
    props: (val) => ({ list: val }),
  },
  {
    name: "处理后的图片",
    key: "newImgUrl",
    component: Gallery,
    props: (val) => ({ list: val }),
  },
  {
    name: "状态",
    key: "status",
    component: TagEdit,
    props(value, row) {
      return {
        type: findStatusType(value),
        msg: value === 4 ? row.msg : "",
        showEdit: value === 4,
        onEdit() {
          _this.editRow(row);
        },
      };
    },
    valueHandler: findStatusLabel,
  },
  {
    name: "备注",
    key: "remark",
  },
  {
    name: "创建时间",
    key: "createdAt",
    valueHandler: changeDate,
  },
  {
    name: "更新时间",
    key: "updatedAt",
    valueHandler: changeDate,
  },
  {
    name: "操作",
    fixed: "right",
    actions: [
      {
        action: "edit",
        key: "refresh",
        text: "退款",
        hidden: (row) => row.status === 4 || row.status === 5,
      },
      "delete",
    ],
  },
];

export default {
  name: "AiImageToVideoList",
  components: { ConfigTable, EditStatus },
  mixins: [sceneTypeMixin],
  data() {
    return {
      total: 0,
      list: [],
      appOpts: [],
    };
  },
  computed: {
    tableColumns() {
      return tableColumns(this);
    },
    searchConfig() {
      return searchConfig(this);
    },
  },
  watch: {},
  mounted() {},
  methods: {
    async loadData(params) {
      try {
        const newParams = {};
        Object.keys(params).forEach((key) => {
          if (params[key] !== "") newParams[key] = params[key];
        });
        const r = await transApi.getAiImageToVideoList(newParams);
        const data = r.data;
        this.total = data.total;
        this.list = data.list;
      } catch (error) {
        console.error("查询失败：", error);
      }
    },
    async delRow(row) {
      try {
        await this.$confirm("您确定要删除该条数据吗？", "操作提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        const r = await transApi.delAiImageToVideo({ id: row.id });
        if (r.code === 200) {
          this.$message.success("已删除");
          this.$refs.ct.search();
        } else {
          this.$message.error(r.tip);
        }
      } catch (error) {
        console.log(error);
      }
    },
    async editRow(row) {
      this.$refs.editDialog.open(row);
    },
    async callEdit(r) {
      try {
        console.log(r);
        const res = await transApi.updateAiImageToVideo(r.data);
        if (res.code !== 200) {
          this.$message.error(res.data);
        } else {
          this.$message.success(r.isEdit ? "退款成功" : "");
          this.$refs.editDialog.close();
          setTimeout(() => {
            this.$refs.ct.search();
          }, 200);
        }
      } catch (error) {
        console.error("call edit error:", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ai-order-list {
  /deep/ .el-button {
    padding: 9px 15px;
  }

  /deep/ .el-image {
    width: 100px;
    height: 100px;

    img {
      object-fit: contain;
    }
  }
}
</style>