|
|
@@ -1,9 +1,15 @@
|
|
|
<template>
|
|
|
<div id="sence">
|
|
|
|
|
|
- <tableForm :tableData="tableData"
|
|
|
+ <!-- <a v-auth-all="[2,1]">122</a> -->
|
|
|
+ <tableForm :loading="loading"
|
|
|
+ :tableData="tableData"
|
|
|
:searchFormData="searchFormData"
|
|
|
- :tableHeader="tableHeader">
|
|
|
+ :handleSearch="handleSearch"
|
|
|
+ :tableHeader="tableHeader"
|
|
|
+ :pageInfo="pageInfo"
|
|
|
+ :handlePageChange="handlePageChange"
|
|
|
+ :handleSizeChange="handleSizeChange">
|
|
|
|
|
|
<!-- <template #button>
|
|
|
<el-button type="success">新增</el-button>
|
|
|
@@ -25,16 +31,45 @@
|
|
|
width="40%"
|
|
|
:before-close="handleClose">
|
|
|
|
|
|
- <el-form ref="formData"
|
|
|
- label-width="80px">
|
|
|
+ <el-form label-width="140px"
|
|
|
+ :model="editData">
|
|
|
<el-form-item label="场景名称">
|
|
|
- <el-input></el-input>
|
|
|
+ <el-input v-model="editData.sceneName"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="封面">
|
|
|
- <div class="">
|
|
|
+ <div class="picBox">
|
|
|
+ <img :src="editData.thumb ?editData.thumb:`@/assets/img/no_bg.png`"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+ <div class="contorlBtn">
|
|
|
+ <div>
|
|
|
+ <el-icon :size="14">
|
|
|
+ <pictureFilled />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-icon :size="14">
|
|
|
+ <delete />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="Msg">
|
|
|
+ <p>1、支持png、jpg和gif图片格式；</p>
|
|
|
+ <p>2、最大可上传2M的图片。</p>
|
|
|
+ <p>3、推荐大小：400 * 400 像素</p>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
|
|
|
+ <el-form-item label="是否在小程序里显示">
|
|
|
+ <div>
|
|
|
+ <el-radio v-model="radio1"
|
|
|
+ label="1">是</el-radio>
|
|
|
+ <el-radio v-model="radio1"
|
|
|
+ label="2">否</el-radio>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
</el-form>
|
|
|
|
|
|
<template #footer>
|
|
|
@@ -49,221 +84,237 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- defineComponent,
|
|
|
- reactive,
|
|
|
- ref,
|
|
|
- toRefs,
|
|
|
- onMounted,
|
|
|
- getCurrentInstance,
|
|
|
- h,
|
|
|
-} from 'vue'
|
|
|
+import { defineComponent, reactive, ref, toRefs, onMounted, getCurrentInstance, h } from 'vue'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
import tableForm from '@/components/tableForm/index.vue'
|
|
|
import { senceList } from '@/api/sence'
|
|
|
+// import { Edit } from '@element-plus/icons'
|
|
|
export default defineComponent({
|
|
|
- components: { tableForm },
|
|
|
- setup(props) {
|
|
|
- const { ctx } = getCurrentInstance()
|
|
|
- const data = reactive({
|
|
|
- dialogVisible: false,
|
|
|
- pageParam: {
|
|
|
- limit: 10,
|
|
|
- nd: 1635487948418,
|
|
|
- order: 'asc',
|
|
|
- page: 1,
|
|
|
- sidx: '',
|
|
|
- token: localStorage.getItem('token'),
|
|
|
- _search: false,
|
|
|
- },
|
|
|
- })
|
|
|
- const searchFormData = ref({
|
|
|
- formData: {},
|
|
|
- searchList: [
|
|
|
- {
|
|
|
- type: 'input',
|
|
|
- model: 'input_data',
|
|
|
- inputType: 'text',
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'select',
|
|
|
- model: 'select_data',
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: 'Option1',
|
|
|
- label: 'Option1',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'Option2',
|
|
|
- label: 'Option2',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 'Option3',
|
|
|
- label: 'Option3',
|
|
|
+ components: { tableForm },
|
|
|
+ setup(props) {
|
|
|
+ const { ctx } = getCurrentInstance()
|
|
|
+ const data = reactive({
|
|
|
+ radio1: '1',
|
|
|
+ editData: {},
|
|
|
+ loading: true,
|
|
|
+ dialogVisible: false,
|
|
|
+ pageInfo: {},
|
|
|
+ pageParam: {
|
|
|
+ limit: 10,
|
|
|
+ nd: 1635487948418,
|
|
|
+ order: 'asc',
|
|
|
+ page: 1,
|
|
|
+ sidx: '',
|
|
|
+ token: localStorage.getItem('token'),
|
|
|
+ _search: false,
|
|
|
},
|
|
|
+ })
|
|
|
+
|
|
|
+ const searchFormData = ref({
|
|
|
+ formData: {},
|
|
|
+ searchList: [
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ model: 'input_data',
|
|
|
+ inputType: 'text',
|
|
|
+ placeholder: '场景名称',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // action: [
|
|
|
+ // {
|
|
|
+ // name: '新增',
|
|
|
+ // clickFun: () => {
|
|
|
+ // data.dialogVisible = true
|
|
|
+ // // handleTableData()
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ })
|
|
|
+ const handleClose = () => {
|
|
|
+ console.log('handleClose')
|
|
|
+ }
|
|
|
+ const tableHeader = ref([
|
|
|
+ { prop: 'sceneName', label: '场景名称' },
|
|
|
{
|
|
|
- value: 'Option4',
|
|
|
- label: 'Option4',
|
|
|
+ prop: 'thumb',
|
|
|
+ label: '封面',
|
|
|
+ render: params => {
|
|
|
+ // console.log(params.row.thumb)
|
|
|
+ return h('img', {
|
|
|
+ style: {
|
|
|
+ width: '100px',
|
|
|
+ height: '100px',
|
|
|
+ },
|
|
|
+ src: params.row.thumb,
|
|
|
+ })
|
|
|
+ },
|
|
|
},
|
|
|
+ { prop: 'sceneUrl', label: '场景链接' },
|
|
|
{
|
|
|
- value: 'Option5',
|
|
|
- label: 'Option5',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- // action: [
|
|
|
- // {
|
|
|
- // name: '新增',
|
|
|
- // clickFun: () => {
|
|
|
- // data.dialogVisible = true
|
|
|
- // // handleTableData()
|
|
|
- // },
|
|
|
- // },
|
|
|
- // ],
|
|
|
- })
|
|
|
- const handleClose = () => {
|
|
|
- console.log('handleClose')
|
|
|
- }
|
|
|
- const tableHeader = ref([
|
|
|
- { prop: 'sceneName', label: '场景名称' },
|
|
|
- {
|
|
|
- prop: 'thumb',
|
|
|
- label: '封面',
|
|
|
- render: (params) => {
|
|
|
- // console.log(params.row.thumb)
|
|
|
- return h('img', {
|
|
|
- style: {
|
|
|
- width: '100px',
|
|
|
- height: '100px',
|
|
|
- },
|
|
|
- src: params.row.thumb,
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- { prop: 'sceneUrl', label: '场景链接' },
|
|
|
- {
|
|
|
- prop: 'sceneType',
|
|
|
- label: '是否显示',
|
|
|
- render: (params) => {
|
|
|
- if (params.row.sceneType == 0) {
|
|
|
- return h(
|
|
|
- 'span',
|
|
|
- {
|
|
|
- style: {
|
|
|
- fontSize: '10px',
|
|
|
- fontWeight: 600,
|
|
|
- backgroundColor: ' #ed5565',
|
|
|
- color: '#FFFFFF',
|
|
|
- padding: '3px 8px',
|
|
|
+ prop: 'sceneType',
|
|
|
+ label: '是否显示',
|
|
|
+ render: params => {
|
|
|
+ if (params.row.sceneType == 0) {
|
|
|
+ return h(
|
|
|
+ 'span',
|
|
|
+ {
|
|
|
+ style: {
|
|
|
+ fontSize: '10px',
|
|
|
+ fontWeight: 600,
|
|
|
+ backgroundColor: ' #ed5565',
|
|
|
+ color: '#FFFFFF',
|
|
|
+ padding: '3px 8px',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ '否'
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ return h(
|
|
|
+ 'span',
|
|
|
+ {
|
|
|
+ style: {
|
|
|
+ fontSize: '10px',
|
|
|
+ fontWeight: 600,
|
|
|
+ backgroundColor: ' #409EFF',
|
|
|
+ color: '#FFFFFF',
|
|
|
+ padding: '3px 8px',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ '是'
|
|
|
+ )
|
|
|
+ }
|
|
|
},
|
|
|
- },
|
|
|
- '否'
|
|
|
- )
|
|
|
- } else {
|
|
|
- return h(
|
|
|
- 'span',
|
|
|
- {
|
|
|
- style: {
|
|
|
- fontSize: '10px',
|
|
|
- fontWeight: 600,
|
|
|
- backgroundColor: ' #409EFF',
|
|
|
- color: '#FFFFFF',
|
|
|
- padding: '3px 8px',
|
|
|
- },
|
|
|
- },
|
|
|
- '是'
|
|
|
- )
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- // prop: 'action',
|
|
|
- label: '操作',
|
|
|
- action: [
|
|
|
- {
|
|
|
- name: '修改',
|
|
|
- type: 'danger',
|
|
|
- clickFun: (index, row) => {
|
|
|
- // console.log(index, row)
|
|
|
- editRow(index, row)
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: '打开编辑器',
|
|
|
- type: 'success',
|
|
|
- clickFun: (index, row) => {
|
|
|
- console.log(index, row)
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- name: '生成直播间',
|
|
|
- clickFun: (index, row) => {
|
|
|
- console.log(index, row)
|
|
|
- hanldeDelRow(index, row)
|
|
|
+ {
|
|
|
+ // prop: 'action',
|
|
|
+ label: '操作',
|
|
|
+ action: [
|
|
|
+ {
|
|
|
+ name: '修改',
|
|
|
+ type: 'danger',
|
|
|
+ clickFun: (index, row) => {
|
|
|
+ // console.log(index, row)
|
|
|
+ editRow(index, row)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '打开编辑器',
|
|
|
+ type: 'success',
|
|
|
+ clickFun: (index, row) => {
|
|
|
+ console.log(index, row)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '生成直播间',
|
|
|
+ clickFun: (index, row) => {
|
|
|
+ console.log(index, row)
|
|
|
+ hanldeDelRow(index, row)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ])
|
|
|
- const tableData = ref([])
|
|
|
+ ])
|
|
|
+ const tableData = ref([])
|
|
|
|
|
|
- // const getSenceList = (params) => {
|
|
|
- // return senceList(params)
|
|
|
- // }
|
|
|
- onMounted(() => {
|
|
|
- handleTableData()
|
|
|
- })
|
|
|
- const handleSearch = (res) => {
|
|
|
- console.log('handleSearch', res)
|
|
|
- }
|
|
|
- const handleTableData = async () => {
|
|
|
- let res = await senceList(data.pageParam)
|
|
|
- // .then((res) => {
|
|
|
- // console.log(res)
|
|
|
- // data.tableData = res.page.list
|
|
|
- // })
|
|
|
- // .catch((err) => {})
|
|
|
- tableData.value = res.page.list
|
|
|
- console.log(tableData)
|
|
|
- }
|
|
|
- const editRow = (index, row) => {
|
|
|
- data.formData = row
|
|
|
- data.dialogVisible = true
|
|
|
- // console.log(formData.value.sceneName)
|
|
|
- }
|
|
|
- const hanldeDelRow = (index, row) => {
|
|
|
- ElMessageBox.confirm('是否删除改数据?', {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- tableData.value.splice(index, 1)
|
|
|
+ // const getSenceList = (params) => {
|
|
|
+ // return senceList(params)
|
|
|
+ // }
|
|
|
+ onMounted(() => {
|
|
|
+ handleTableData()
|
|
|
})
|
|
|
- .catch(() => {
|
|
|
- // catch error
|
|
|
- })
|
|
|
- }
|
|
|
- return {
|
|
|
- handleSearch,
|
|
|
- handleTableData,
|
|
|
- handleClose,
|
|
|
- tableHeader,
|
|
|
- tableData,
|
|
|
- searchFormData,
|
|
|
- ...toRefs(data),
|
|
|
- }
|
|
|
- },
|
|
|
+ //分页
|
|
|
+ const handlePageChange = val => {
|
|
|
+ console.log(`current page: ${val}`)
|
|
|
+ data.pageParam.page = val
|
|
|
+ handleTableData()
|
|
|
+ }
|
|
|
+ //页码
|
|
|
+ const handleSizeChange = val => {
|
|
|
+ console.log(`${val} items per page`)
|
|
|
+ data.pageParam.limit = val
|
|
|
+ handleTableData()
|
|
|
+ }
|
|
|
+ const handleSearch = res => {
|
|
|
+ console.log('handleSearch', res)
|
|
|
+ data.pageParam.name = res.input_data
|
|
|
+ handleTableData()
|
|
|
+ }
|
|
|
+ const handleTableData = async () => {
|
|
|
+ data.loading = true
|
|
|
+ let res = await senceList(data.pageParam)
|
|
|
+
|
|
|
+ data.loading = false
|
|
|
+ tableData.value = res.page.list
|
|
|
+ data.pageInfo = res.page
|
|
|
+ console.log(tableData)
|
|
|
+ }
|
|
|
+ const editRow = (index, row) => {
|
|
|
+ data.dialogVisible = true
|
|
|
+
|
|
|
+ data.editData = JSON.parse(JSON.stringify(row))
|
|
|
+ console.log(data.editData)
|
|
|
+ }
|
|
|
+ const hanldeDelRow = (index, row) => {
|
|
|
+ ElMessageBox.confirm('是否删除改数据?', {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ tableData.value.splice(index, 1)
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // catch error
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ handleSizeChange,
|
|
|
+ handlePageChange,
|
|
|
+ handleSearch,
|
|
|
+ handleTableData,
|
|
|
+ handleClose,
|
|
|
+ tableHeader,
|
|
|
+ tableData,
|
|
|
+ searchFormData,
|
|
|
+ ...toRefs(data),
|
|
|
+ }
|
|
|
+ },
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
#sence {
|
|
|
- .cell {
|
|
|
- .el-link {
|
|
|
- display: block;
|
|
|
+ .cell {
|
|
|
+ .el-link {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .picBox {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contorlBtn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin: 10px;
|
|
|
+ > div {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .Msg {
|
|
|
+ > p {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #676a6c;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
