|
- <!--
- * @Date: 2021-07-08 11:02:40
- * @LastEditTime: 2022-07-27 10:48:43
- * @Description:数字人直播
- -->
- <template>
- <div class="app-container">
- <!--工具栏-->
- <div class="head-container">
- <!-- <div>
- 搜索
- <el-input v-model="query.name" prefix-icon="el-icon-search" clearable placeholder="名称" class="filter-item"
- @keyup.enter.native="crud.toQuery" />
-
- <rrOperation />
- </div> -->
- <div>
- <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
- @click="openSave()">新增</el-button>
- </div>
- </div>
-
- <!--表格渲染-->
- <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
- <el-table-column :show-overflow-tooltip="true" prop="serialNumber" label="序号" />
- <el-table-column :show-overflow-tooltip="true" prop="image" label="图片">
- <template slot-scope="scope">
- <img :src="scope.row.image" width="50px" />
- </template>
- </el-table-column>
- <el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
- <el-table-column label="操作" width="230" align="center" fixed="right">
- <template slot-scope="scope" class="btn">
- <el-button type="text" size="mini" @click="openSave(scope.row)">编辑</el-button>
-
- <el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
- <p>是否确认删除该数据?</p>
- <div style="text-align: right; margin: 0">
- <el-button size="mini"
- @click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
- <el-button type="primary" size="mini" @click="del(scope)">确定</el-button>
- </div>
- <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
- </el-popover>
- </template>
- </el-table-column>
- </el-table>
- <!--分页组件-->
- <pagination />
-
- <!-- 新增修改弹窗 -->
- <el-dialog v-if="dialogVisible" title="轮播" :visible.sync="dialogVisible" append-to-body width="600px">
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="resetform">
- <el-form-item label="图片" prop="image">
- <uploadFile :url.sync="ruleForm.image" type="image" />
- </el-form-item>
- <el-form-item label="序号" prop="serialNumber">
- <el-input v-model="ruleForm.serialNumber"></el-input>
- </el-form-item>
- <el-form-item label="标题" prop="title">
- <el-input v-model="ruleForm.title"></el-input>
- </el-form-item>
- <el-form-item label="副标题" prop="subTitle">
- <el-input v-model="ruleForm.subTitle"></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">立即创建</el-button>
- <el-button @click="resetForm('ruleForm')">重置</el-button>
- </el-form-item>
- </el-form>
- </el-dialog>
- </div>
- </template>
- <script>
- import { delLunbo } from '@/api/homePage'
- import { saveShuzirenZhiBo } from '@/api/aigc'
- import CRUD, { presenter, header, crud } from '@crud/crud'
- import pagination from '@crud/Pagination'
- import uploadFile from '@/components/uploadFile'
-
- export default {
- components: { pagination, uploadFile },
- mixins: [presenter(), header(), crud()],
- data() {
- return {
- dialogVisible: false,
- ruleForm: {
- image: '',
- serialNumber: '',
- title: '',
- subTitle: ''
- },
- rules: {
- name: [
- { required: true, message: '请上传图片', trigger: 'blur' }
- ],
- serialNumber: [
- { required: true, message: '请输入序号', trigger: 'blur' }
- ],
- title: [
- { required: true, message: '请输入标题', trigger: 'blur' }
- ],
- subTitle: [
- { required: true, message: '请输入副标题', trigger: 'blur' }
- ]
- },
- loadingBtn: false
- }
- },
- cruds() {
- return CRUD({ title: '列表', url: '/aigc/shuzirenZhiBoList', query: {}})
- },
- methods: {
- openSave(item) {
- if (item) {
- this.ruleForm.id = item.id
- this.ruleForm.image = item.image
- this.ruleForm.serialNumber = item.serialNumber
- this.ruleForm.title = item.title
- this.ruleForm.subTitle = item.subTitle
- }
- this.dialogVisible = true
- },
- close(tag) {
- if (tag) this.crud.toQuery()
- this.dialogVisible = false
- },
- /* 删除 */
- del(scope) {
- delLunbo(scope.row.id).then(res => {
- this.$message({
- message: '删除成功!',
- type: 'success'
- })
- this.crud.toQuery()
- scope._self.$refs[`del-${scope.$index}`].doClose()
- })
- },
- submitForm(formName) {
- this.$refs[formName].validate((valid) => {
- if (valid) {
- this.loadingBtn = true
- saveShuzirenZhiBo(this.ruleForm).then(res => {
- this.$message({
- message: '操作成功!',
- type: 'success'
- })
- this.loadingBtn = false
- this.dialogVisible = false
- this.$refs[formName].resetFields()
- this.crud.toQuery()
- }).catch(() => {
- this.loadingBtn = false
- })
- } else {
- console.log('error submit!!')
- return false
- }
- })
- },
- resetForm(formName) {
- this.$refs[formName].resetFields()
- }
- }
- }
- </script>
|