|
|
@@ -1,10 +1,247 @@
|
|
|
<script setup>
|
|
|
import { ref, reactive } from 'vue'
|
|
|
+import { QuestionFilled } from '@element-plus/icons-vue'
|
|
|
+import { interactiveInterface,customInterence } from '@/api/api'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+
|
|
|
+const tableColumns = [
|
|
|
+ {label:'版块名称',key:'SectionName'},
|
|
|
+ {label:'品种',key:'VarietyName'},
|
|
|
+ {label:'状态',key:'Status',width:'200'},
|
|
|
+]
|
|
|
+let tableData = ref([{}])
|
|
|
+let tableParams = reactive({
|
|
|
+ pageNo:1,
|
|
|
+ pageSize:10,
|
|
|
+ totals:0
|
|
|
+})
|
|
|
+function handleCurrentChange(page){
|
|
|
+ tableParams.pageNo = page
|
|
|
+ getTableData()
|
|
|
+}
|
|
|
+async function getTableData(){
|
|
|
+ const res = await interactiveInterface.voiceList({
|
|
|
+ CurrentIndex: tableParams.pageNo,
|
|
|
+ PageSize:tableParams.pageSize
|
|
|
+ })
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ const { List,Paging } = res.Data;
|
|
|
+
|
|
|
+ tableData.value = List || [];
|
|
|
+ tableParams.totals = Paging.Totals;
|
|
|
+}
|
|
|
+getTableData()
|
|
|
+
|
|
|
+let isEdit = ref(false)
|
|
|
+let showAdd = ref(false)
|
|
|
+let formData = reactive({
|
|
|
+ name:'',
|
|
|
+ classify:'',
|
|
|
+ shareImg:'',
|
|
|
+ id:''
|
|
|
+})
|
|
|
+function handelShowAdd(data){
|
|
|
+ isEdit.value = data.SectionId?true:false
|
|
|
+ formData.name = data.SectionName||''
|
|
|
+ formData.classify = data.VarietyId||''
|
|
|
+ formData.shareImg = data.ImgUrl||''
|
|
|
+ formData.id = data.SectionId||''
|
|
|
+ showAdd.value = true
|
|
|
+}
|
|
|
+let classifyArr = ref([])
|
|
|
+let cascaderRef = ref(null)
|
|
|
+async function getClassifyList(){
|
|
|
+ const res = await customInterence.getvariety({CompanyType:"ficc"})
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ classifyArr.value = res.Data.List||[]
|
|
|
+}
|
|
|
+getClassifyList()
|
|
|
+function handleUpload(e){
|
|
|
+ let form = new FormData();
|
|
|
+ form.append('file',e.file);
|
|
|
+ customInterence.upload(form).then(res=>{
|
|
|
+ if(res.Ret===200){
|
|
|
+ formData.shareImg=res.Data.ResourceUrl
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+//编辑/保存板块
|
|
|
+async function handleAdd(){
|
|
|
+ if(!formData.name){
|
|
|
+ ElMessage.warning('请输入板块名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!formData.classify){
|
|
|
+ ElMessage.warning('请选择品种')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!formData.shareImg){
|
|
|
+ ElMessage.warning('请上传分享图片')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const params = formData.id
|
|
|
+ ?{
|
|
|
+ SectionId:Number(formData.id),
|
|
|
+ SectionName:formData.name,
|
|
|
+ ImgUrl:formData.shareImg
|
|
|
+ }
|
|
|
+ :{
|
|
|
+ SectionName:formData.name,
|
|
|
+ VarietyId:Number(formData.classify),
|
|
|
+ VarietyName:cascaderRef.value.getCheckedNodes()[0].label||'',
|
|
|
+ ImgUrl:formData.shareImg
|
|
|
+ }
|
|
|
+ const apiName = formData.id?'editVoiceSection':'addVoiceSection'
|
|
|
+ const res = await interactiveInterface[apiName](params)
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ ElMessage.success(formData.id?'编辑成功':'添加成功')
|
|
|
+ handleCurrentChange(1)
|
|
|
+ showAdd.value = false
|
|
|
+}
|
|
|
+//启用/禁用
|
|
|
+async function handleOptItem(data){
|
|
|
+ const res = await interactiveInterface.editVoiceSection({
|
|
|
+ SectionId:Number(data.SectionId),
|
|
|
+ Enable:data.Status==1?0:1
|
|
|
+ })
|
|
|
+ if(res.Ret===200){
|
|
|
+ ElMessage.success(`${data.Status==1?'禁用':'启用'}成功`)
|
|
|
+ getTableData()
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 板块配置
|
|
|
+ <div class="voice-plate-wrap">
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="handelShowAdd({})">新建板块</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:30px">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column v-for="column in tableColumns" :key="column.key"
|
|
|
+ :prop="column.key"
|
|
|
+ :label="column.label"
|
|
|
+ :width="column.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="{row}">
|
|
|
+ <span v-if="column.key==='Status'" :style="{color:row.Status===1?'':'#ef0000'}">{{row.Status===1?'启用':'禁用'}}</span>
|
|
|
+ <span v-else>{{ row[column.key] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="200"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <el-tooltip
|
|
|
+ effect="dark"
|
|
|
+ content="禁用后不可选择该版块新增语音播报，不影响历史数据；"
|
|
|
+ placement="top-start"
|
|
|
+ >
|
|
|
+ <div style="display: flex;align-items: center;justify-content: center;">
|
|
|
+ <span>操作</span>
|
|
|
+ <el-icon><QuestionFilled /></el-icon>
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ <template #default="{row}">
|
|
|
+ <span style="color:#409EFF;cursor:pointer;margin-right:5px" @click="handelShowAdd(row)">编辑</span>
|
|
|
+ <span :style="{color:row.Status===1?'#ef0000':'#409EFF',cursor:'pointer'}" @click="handleOptItem(row)">{{row.Status===1?'禁用':'启用'}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template slot="empty">
|
|
|
+ <div style="margin:50px 0">
|
|
|
+ <img style="width:150px" src="~@/assets/img/cus_m/nodata.png" alt="">
|
|
|
+ <div>暂无数据~</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ layout="total,prev,pager,next,jumper"
|
|
|
+ background
|
|
|
+ :current-page="tableParams.pageNo"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :page-size="tableParams.pageSize"
|
|
|
+ :total="tableParams.totals"
|
|
|
+ style="float:right;margin-top:20px">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <!-- 新增板块弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="showAdd"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body='false'
|
|
|
+ custom-class="dialog"
|
|
|
+ center
|
|
|
+ width="700px"
|
|
|
+ :title="isEdit?'编辑板块':'新建版块'"
|
|
|
+ @close="showAdd=false"
|
|
|
+ >
|
|
|
+ <div class="dialog-container">
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ label-position="left"
|
|
|
+ hide-required-asterisk
|
|
|
+ label-width="80px"
|
|
|
+ :model="formData"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="版块名称"
|
|
|
+ prop="name"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ style="width:400px"
|
|
|
+ v-model="formData.name"
|
|
|
+ placeholder="请输入板块名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="品种"
|
|
|
+ prop="classify"
|
|
|
+ >
|
|
|
+ <el-cascader
|
|
|
+ class="voice-plate-cascader"
|
|
|
+ v-model="formData.classify"
|
|
|
+ placeholder="请选择品种"
|
|
|
+ :options="classifyArr"
|
|
|
+ :props="{value:'ChartPermissionId',label:'ClassifyName',children:'Items',emitPath:false}"
|
|
|
+ :show-all-levels="false"
|
|
|
+ ref="cascaderRef"
|
|
|
+ :disabled="isEdit"
|
|
|
+ ></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="分享图片"
|
|
|
+ prop="shareImg"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ style="width:400px"
|
|
|
+ v-model="formData.shareImg"
|
|
|
+ placeholder="请上传分享图片"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ <el-upload
|
|
|
+ style="display: inline-block;margin-left:5px"
|
|
|
+ action=""
|
|
|
+ accept="image/*"
|
|
|
+ :http-request="handleUpload"
|
|
|
+ :show-file-list="false"
|
|
|
+ >
|
|
|
+ <el-button type="primary">选择图片</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="text-align:center;margin:30px 0">
|
|
|
+ <el-button type="primary" plain style="width:100px" @click="showAdd=false">取消</el-button>
|
|
|
+ <el-button type="primary" style="margin-left:30px;width:100px" @click="handleAdd">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
cxmo