ai_mooc/src/pages/home/szrdzgl/index.vue

<script setup>
import { Search } from '@element-plus/icons-vue'
import { getTime } from "~/utils/helper";
const status = ref();
const statusData = ref([
  {
    name: "声音定制管理",
    status: "1",
  },
  {
    name: "形象定制管理",
    status: "2",
  }
]);
changeStatus("1");
function changeStatus(data) {
  status.value = data;
}

const keywordVoice = $ref('')
let tableData = $ref([])
const total = ref(0);
const page = ref(1);
const limit = ref(10);
function handleCurrentChange(val) {
  page.value = val
  getData()
}
getData()
function getData() {
  request({
    url: '/aimooc/xnszr_audio/index',
    data: {
      page: page.value,
      limit: limit.value,
      keyword: keywordVoice
    }
  }).then(res => {
    tableData = res.data.page_data
    total.value = Number(res.data.total_rows)
  })
}

const keywordImage = $ref('')
let tableDataImage = $ref([])
const totalImage = ref(0);
const pageImage = ref(1);
const limitImage = ref(10);
function handleCurrentChangeImage(val) {
  pageImage.value = val
  getDataImage()
}
getDataImage()
function getDataImage() {
  request({
    url: '/aimooc/xnszr_img/index',
    data: {
      page: pageImage.value,
      limit: limitImage.value,
      keyword: keywordImage
    }
  }).then(res => {
    tableDataImage = res.data.page_data
    totalImage.value = Number(res.data.total_rows)
  })

}
const dialogFormVisible_check = ref(false)
const formLabelWidth = "100px";
const ruleFormRef = ref();
const checkForm = ref({
  result: "",
  reason: "",
});

let currentType = ''
let operationRow = {}
function openAuditDialog(type, row) {
  currentType = type
  operationRow = row
  if (type == 'voice') {
    checkForm.value.result = row.axa_sycj_shzt_v2
    checkForm.value.reason = row.axa_bzms
    dialogFormVisible_check.value = true
  } else if (type == 'image') {
    checkForm.value.result = row.axi_rxcj_shzt_v2
    checkForm.value.reason = row.axi_bzms
    dialogFormVisible_check.value = true
  }
}
const rules = ref({
  result: [
    {
      required: true,
      message: "请选择一项",
      trigger: "change",
    },
  ],
  reason: [{ required: true, message: "请输入理由", trigger: "blur" }],
});

//审核按钮
const checkSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      if (currentType == 'voice') {
        request({
          url: '/aimooc/xnszr_audio/edit', data: {
            axa_id: operationRow.axa_id,
            aimooc_xnszr_audio: {
              axa_sycj_shzt_v2: checkForm.value.result,
              axa_bzms: checkForm.value.result == 2 ? checkForm.value.reason : ''
            }
          }
        }).then(res => {
          if (res.code == 1) {
            ElMessage({
              message: res.msg,
              type: "success",
            });
            dialogFormVisible_check.value = false;
            getData()
          }
        })
      } else if (currentType == 'image') {
        request({
          url: '/aimooc/xnszr_img/edit', data: {
            axi_id: operationRow.axi_id,
            aimooc_xnszr_img: {
              axi_rxcj_shzt_v2: checkForm.value.result,
              axi_bzms: checkForm.value.result == 2 ? checkForm.value.reason : ''
            }
          }
        }).then(res => {
          if (res.code == 1) {
            ElMessage({
              message: res.msg,
              type: "success",
            });
            dialogFormVisible_check.value = false;
            getDataImage()
          }
        })
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
function del(type, row) {
  ElMessageBox.confirm("确定要删除这条记录吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (type == 'voice') {
        const { code, data } = await request({
          url: "/aimooc/xnszr_audio/delete",
          data: { axa_id: row.axa_id },
        });
        if (code === "1") {
          ElMessage.success("删除成功！");
          getData()
        }
      } else if (type == 'image') {
        const { code, data } = await request({
          url: "/aimooc/xnszr_img/delete",
          data: { axi_id: row.axi_id },
        });
        if (code === "1") {
          ElMessage.success("删除成功！");
          getDataImage()
        }
      }

    })
    .catch(() => { });

}
const router = useRouter()
function voiceDetail(row) {
  router.push({
    path: '/home/szrdzgl/voiceDetail', query: {
      axa_id: row.axa_id
    }
  })
}
let imageVisableDialog = $ref(false)
let videoUrl = $ref('')
function viewImageDetail(row) {
  videoUrl = row.axi_rxcj_spwj_v2
  imageVisableDialog = true
}
</script>

<template>
  <div class="h-full flex flex-col">
    <el-scrollbar view-class="h-full flex flex-col">
      <div class="my-15px flex items-center justify-between">
        <div class="flex space-x-6">
          <div v-for="(item, index) in statusData" :key="index" class="pageTitle"
            :class="status === item.status && 'active'" @click="changeStatus(item.status)">
            {{ item.name }}
          </div>
        </div>
        <div class="flex items-center">
          <el-input v-show="status == 1" v-model="keywordVoice" class="ml-20px h-42px rounded-8px" placeholder="搜索"
            :prefix-icon="Search" @change="getData()" />
          <el-input v-show="status == 2" v-model="keywordImage" class="ml-20px h-42px rounded-8px" placeholder="搜索"
            :prefix-icon="Search" @change="getDataImage()" />
        </div>
      </div>
      <div v-if="status == 1">
        <el-table :data="tableData" size="large">
          <el-table-column prop="axa_name" label="声音名称" />
          <el-table-column prop="axa_mssc" label="声音描述" />
          <el-table-column prop="axa_sycj_syxb_v2" label="性别">
            <template #default="scope">
              <span>{{ scope.row.axa_sycj_syxb_v2 == 'female' ? '女' : scope.row.axa_sycj_syxb_v2 == 'male' ? '男' : ''
                }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_dateline" label="创建时间">
            <template #default="scope">
              <span>{{ getTime(scope.row.create_dateline) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="axa_sycj_shzt_v2" label="审核状态">
            <template #default="scope">
              <span
                :style="'color:' + (scope.row.axa_sycj_shzt_v2 == '1' ? '#55B51F' : scope.row.axa_sycj_shzt_v2 ==
            '2' ? '#FF6A55' : scope.row.axa_sycj_shzt_v2 == '3' ? '' : scope.row.axa_sycj_shzt_v2 == '4' ? '#fdcb9e' : '')">{{
            scope.row.axa_sycj_shzt_v2 == '1' ? '通过' : scope.row.axa_sycj_shzt_v2 ==
              '2' ? '不通过' : scope.row.axa_sycj_shzt_v2 == '3' ? '待审核' : scope.row.axa_sycj_shzt_v2 == '4' ? '未完成' : ''
          }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="opeation" label="操作">
            <template #default="scope">
              <div style="display: flex;">
                <img src="../../../assets/szrdzgl-detail.png" style="cursor: pointer;"
                  @click="voiceDetail(scope.row)" />
                <img src="../../../assets/szrdzgl-audit.png" style="cursor: pointer;margin-left: 10px;"
                  @click="openAuditDialog('voice', scope.row)" />
                <img src="../../../assets/szrdzgl-delete.png" style="cursor: pointer;margin-left: 10px;"
                  @click="del('voice', scope.row)" />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-end box-border px-80px pb-30px mt-20px" style="color: #000;">
          <el-pagination v-model:current-page="page" v-model:page-size="limit"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
        </div>
      </div>
      <div v-if="status == 2">
        <el-table :data="tableDataImage" size="large">
          <el-table-column prop="axi_name" label="形象名称" />
          <el-table-column prop="axi_img" label="头像">
            <template #default="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.axi_img" :zoom-rate="1.2" :max-scale="7"
                :min-scale="0.2" :preview-src-list="[scope.row.axi_img]" :initial-index="0" fit="cover" :z-index="99999" :preview-teleported="true"/>
            </template>
          </el-table-column>
          <el-table-column prop="create_dateline" label="创建时间">
            <template #default="scope">
              <span>{{ getTime(scope.row.create_dateline) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="axi_rxcj_shzt_v2" label="审核状态">
            <template #default="scope">
              <span
                :style="'color:' + (scope.row.axi_rxcj_shzt_v2 == '1' ? '#55B51F' : scope.row.axi_rxcj_shzt_v2 ==
            '2' ? '#FF6A55' : scope.row.axi_rxcj_shzt_v2 == '3' ? '' : scope.row.axi_rxcj_shzt_v2 == '4' ? '#fdcb9e' : '')">{{
            scope.row.axi_rxcj_shzt_v2 == '1' ? '通过' : scope.row.axi_rxcj_shzt_v2 ==
              '2' ? '不通过' : scope.row.axi_rxcj_shzt_v2 == '3' ? '待审核' : scope.row.axi_rxcj_shzt_v2 == '4' ? '未完成' : ''
          }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="opeation" label="操作">
            <template #default="scope">
              <div style="display: flex;">
                <img src="../../../assets/szrdzgl-detail.png" style="cursor: pointer;"
                  @click="viewImageDetail(scope.row)" />
                <img src="../../../assets/szrdzgl-audit.png" style="cursor: pointer;margin-left: 10px;"
                  @click="openAuditDialog('image', scope.row)" />
                <img src="../../../assets/szrdzgl-delete.png" style="cursor: pointer;margin-left: 10px;"
                  @click="del('image', scope.row)" />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-end box-border px-80px pb-30px mt-20px" style="color: #000;">
          <el-pagination v-model:current-page="pageImage" v-model:page-size="limitImage"
            layout="total, sizes, prev, pager, next, jumper" :total="totalImage"
            @current-change="handleCurrentChangeImage" />
        </div>
      </div>
    </el-scrollbar>
    <el-dialog v-model="dialogFormVisible_check" title="审核" width="360px">
      <el-form :model="checkForm" ref="ruleFormRef" :rules="rules" label-position="top">
        <el-form-item label="" :label-width="formLabelWidth" prop="result">
          <el-radio-group v-model="checkForm.result">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="checkForm.result == '2'" label="备注描述：" :label-width="formLabelWidth" prop="reason">
          <el-input v-model="checkForm.reason" :autosize="{ minRows: 3 }" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" class="w-full" size="large" @click="checkSubmit(ruleFormRef)">确认</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="imageVisableDialog" width="1000px" style="height: 600px;">
      <video v-if="imageVisableDialog" :src="videoUrl" controls style="width: 100%;height: 500px;"></video>
    </el-dialog>
  </div>
</template>

<route lang="json">{
  "meta": {
    "title": "数字人定制管理",
    "img": "/images/szrdzgl.png",
    "sort": 8
  }
}</route>

<style lang="scss" scoped>
@use "~/styles/page.scss";
</style>