fix: post请求改为使用原形链上实例

main
wu.jian2 2 years ago
parent 4f4fecdd75
commit 2a66b40a50

@ -2,27 +2,63 @@
<div class="big-screen-list-wrap"> <div class="big-screen-list-wrap">
<div class="internal-box"> <div class="internal-box">
<div class="top-search-wrap"> <div class="top-search-wrap">
<el-select v-if="catalogInfo !== 'system'" v-model="catalogCode" class="bs-el-select" popper-class="bs-el-select" <el-select
placeholder="请选择分组" clearable @change="reSearch"> v-if="catalogInfo !== 'system'"
<el-option v-for="item in catalogList" :key="item.code" :label="item.name" :value="item.code" /> v-model="catalogCode"
class="bs-el-select"
popper-class="bs-el-select"
placeholder="请选择分组"
clearable
@change="reSearch"
>
<el-option
v-for="item in catalogList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select> </el-select>
<el-input v-model="searchKey" class="bs-el-input" placeholder="请输入组件名称" prefix-icon="el-icon-search" clearable <el-input
@clear="reSearch" @keyup.enter.native="reSearch" /> v-model="searchKey"
<el-button type="primary" @click="reSearch"> class="bs-el-input"
placeholder="请输入组件名称"
prefix-icon="el-icon-search"
clearable
@clear="reSearch"
@keyup.enter.native="reSearch"
/>
<el-button
type="primary"
@click="reSearch"
>
搜索 搜索
</el-button> </el-button>
<el-button v-if="catalogInfo !== 'system'" type="primary" @click="catalogManage"> <el-button
v-if="catalogInfo !== 'system'"
type="primary"
@click="catalogManage"
>
分组管理 分组管理
</el-button> </el-button>
</div> </div>
<div v-loading="loading" class="list-wrap bs-scrollbar" element-loading-text="" :style="{ <div
display: gridComputed ? 'grid' : 'flex', v-loading="loading"
justifyContent: gridComputed ? 'space-around' : 'flex-start' class="list-wrap bs-scrollbar"
}"> element-loading-text="加载中"
:style="{
display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
}"
>
<!-- 第一个是新增大屏卡片 --> <!-- 第一个是新增大屏卡片 -->
<div v-if="catalogInfo !== 'system'" class="big-screen-card-wrap" :style="{ <div
width: gridComputed ? 'auto' : '290px' v-if="catalogInfo !== 'system'"
}" @click="add"> class="big-screen-card-wrap"
:style="{
width: gridComputed ? 'auto' : '290px'
}"
@click="add"
>
<div class="big-screen-card-inner big-screen-card-inner-add"> <div class="big-screen-card-inner big-screen-card-inner-add">
<div class="add-big-screen-card"> <div class="add-big-screen-card">
<div class="add-big-screen-card-inner"> <div class="add-big-screen-card-inner">
@ -34,38 +70,72 @@
</div> </div>
</div> </div>
<!-- 后面遍历 list --> <!-- 后面遍历 list -->
<div v-for="screen in list" :key="screen.id" class="big-screen-card-wrap" :style="{ <div
width: gridComputed ? 'auto' : '290px' v-for="screen in list"
}"> :key="screen.id"
class="big-screen-card-wrap"
:style="{
width: gridComputed ? 'auto' : '290px'
}"
>
<div class="big-screen-card-inner"> <div class="big-screen-card-inner">
<div class="screen-card__hover"> <div class="screen-card__hover">
<div class="screen-card__hover-box"> <div class="screen-card__hover-box">
<div class="preview"> <div class="preview">
<div class="screen-card__oper-label circle" @click="preview(screen)"> <div
class="screen-card__oper-label circle"
@click="preview(screen)"
>
<span>预览</span> <span>预览</span>
</div> </div>
<div v-if="catalogInfo !== 'system'" class="circle" @click="design(screen)"> <div
v-if="catalogInfo !== 'system'"
class="circle"
@click="design(screen)"
>
<span>设计</span> <span>设计</span>
</div> </div>
<div v-if="catalogInfo !== 'system'" class="circle" @click="edit(screen)"> <div
v-if="catalogInfo !== 'system'"
class="circle"
@click="edit(screen)"
>
<span>编辑</span> <span>编辑</span>
</div> </div>
<div v-if="catalogInfo !== 'system'" class="circle" @click="copy(screen)"> <div
v-if="catalogInfo !== 'system'"
class="circle"
@click="copy(screen)"
>
<span>复制</span> <span>复制</span>
</div> </div>
<div v-if="catalogInfo !== 'system'" class="circle" @click="del(screen)"> <div
v-if="catalogInfo !== 'system'"
class="circle"
@click="del(screen)"
>
<span>删除</span> <span>删除</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="big-screen-card-img"> <div class="big-screen-card-img">
<el-image :src="catalogInfo !== 'system' ? screen.coverPicture : screen.img" fit="fill" <el-image
style="width: 100%; height: 100%"> :src="catalogInfo !== 'system' ? screen.coverPicture : screen.img"
<div slot="placeholder" class="image-slot"> fit="fill"
style="width: 100%; height: 100%"
>
<div
slot="placeholder"
class="image-slot"
>
加载中··· 加载中···
</div> </div>
<div slot="error" class="image-slot" style="font-size: 20px"> <div
slot="error"
class="image-slot"
style="font-size: 20px"
>
<div class="error-img-text"> <div class="error-img-text">
{{ catalogInfo !== 'system' ? screen.name : screen.title }} {{ catalogInfo !== 'system' ? screen.name : screen.title }}
</div> </div>
@ -73,29 +143,54 @@
</el-image> </el-image>
</div> </div>
<div class="big-screen-bottom"> <div class="big-screen-bottom">
<div class="left-bigscreen-title" :title="catalogInfo !== 'system' ? screen.name : screen.title"> <div
class="left-bigscreen-title"
:title="catalogInfo !== 'system' ? screen.name : screen.title"
>
{{ catalogInfo !== 'system' ? screen.name : screen.title }} {{ catalogInfo !== 'system' ? screen.name : screen.title }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="catalogInfo !== 'system'" class="footer-pagination-wrap"> <div
v-if="catalogInfo !== 'system'"
class="footer-pagination-wrap"
>
<!-- <div class="footer-pagination-wrap-text"> <!-- <div class="footer-pagination-wrap-text">
总共 {{ totalCount }} 个项目 总共 {{ totalCount }} 个项目
</div> --> </div> -->
<div class="bs-pagination"> <div class="bs-pagination">
<el-pagination class="bs-el-pagination" popper-class="bs-el-pagination" background <el-pagination
layout="total, prev, pager, next, sizes" :page-size="size" prev-text="上一页" next-text="下一页" :total="totalCount" class="bs-el-pagination"
:page-sizes="[10, 20, 50, 100]" :current-page="current" @current-change="currentChangeHandle" popper-class="bs-el-pagination"
@size-change="sizeChangeHandle" /> background
layout="total, prev, pager, next, sizes"
:page-size="size"
prev-text="上一页"
next-text="下一页"
:total="totalCount"
:page-sizes="[10, 20, 50, 100]"
:current-page="current"
@current-change="currentChangeHandle"
@size-change="sizeChangeHandle"
/>
</div> </div>
</div> </div>
</div> </div>
<!-- 新增或编辑弹窗 --> <!-- 新增或编辑弹窗 -->
<EditForm v-if="catalogInfo !== 'system'" ref="EditForm" :type="catalogInfo" @refreshData="reSearch" /> <EditForm
<CatalogEditForm v-if="catalogInfo !== 'system'" ref="CatalogEditForm" :catalog-type="catalogType" v-if="catalogInfo !== 'system'"
@updateCatalogList="updateCatalogList" /> ref="EditForm"
:type="catalogInfo"
@refreshData="reSearch"
/>
<CatalogEditForm
v-if="catalogInfo !== 'system'"
ref="CatalogEditForm"
:catalog-type="catalogType"
@updateCatalogList="updateCatalogList"
/>
</div> </div>
</template> </template>
<script> <script>
@ -114,7 +209,7 @@ export default {
} }
}, },
components: { EditForm, CatalogEditForm }, components: { EditForm, CatalogEditForm },
data() { data () {
return { return {
name: '', name: '',
catalogVisible: false, catalogVisible: false,
@ -128,41 +223,41 @@ export default {
} }
}, },
computed: { computed: {
catalogType() { catalogType () {
if (this.catalogInfo === 'component') { if (this.catalogInfo === 'component') {
return 'componentCatalog' return 'componentCatalog'
} else { } else {
return 'bizComponentCatalog' return 'bizComponentCatalog'
} }
}, },
code() { code () {
return '' return ''
}, },
gridComputed() { gridComputed () {
return this.list.length > 2 return this.list.length > 2
} }
}, },
watch: { watch: {
catalogInfo() { catalogInfo () {
this.reset() this.reset()
this.init() this.init()
}, },
catalogCode(value) { catalogCode (value) {
this.reSearch() this.reSearch()
} }
}, },
mounted() { mounted () {
this.init() this.init()
}, },
methods: { methods: {
reset() { reset () {
this.searchKey = '' this.searchKey = ''
this.current = 1 this.current = 1
this.size = 10 this.size = 10
this.catalogCode = '' this.catalogCode = ''
this.init() this.init()
}, },
init() { init () {
if (this.catalogInfo !== 'system') { if (this.catalogInfo !== 'system') {
this.getDataList() this.getDataList()
this.getCatalogList() this.getCatalogList()
@ -171,10 +266,10 @@ export default {
this.list = [...innerRemoteComponents, ...getRemoteComponents()] this.list = [...innerRemoteComponents, ...getRemoteComponents()]
} }
}, },
updateCatalogList(list) { updateCatalogList (list) {
this.catalogList = list this.catalogList = list
}, },
reSearch() { reSearch () {
if (this.catalogInfo !== 'system') { if (this.catalogInfo !== 'system') {
this.current = 1 this.current = 1
this.getDataList() this.getDataList()
@ -183,18 +278,18 @@ export default {
this.list = arr?.filter((item) => item.title.indexOf(this.searchKey) !== -1) this.list = arr?.filter((item) => item.title.indexOf(this.searchKey) !== -1)
} }
}, },
catalogManage() { catalogManage () {
this.$refs.CatalogEditForm.formVisible = true this.$refs.CatalogEditForm.formVisible = true
}, },
// //
getCatalogList() { getCatalogList () {
this.$dataRoomAxios.get(`/bigScreen/type/list/${this.catalogType}`) this.$dataRoomAxios.get(`/bigScreen/type/list/${this.catalogType}`)
.then((data) => { .then((data) => {
this.catalogList = data this.catalogList = data
}) })
.catch(() => { }) .catch(() => { })
}, },
getDataList() { getDataList () {
this.loading = true this.loading = true
if (this.catalogInfo === 'component') { if (this.catalogInfo === 'component') {
this.$dataRoomAxios.get('/bigScreen/design/page', { this.$dataRoomAxios.get('/bigScreen/design/page', {
@ -228,7 +323,7 @@ export default {
}) })
} }
}, },
preview(screen) { preview (screen) {
let path = '' let path = ''
let query = { let query = {
code: screen.code code: screen.code
@ -249,7 +344,7 @@ export default {
}) })
window.open(href, '_blank') window.open(href, '_blank')
}, },
design(screen) { design (screen) {
const path = this.catalogInfo === 'component' ? (window.BS_CONFIG?.routers?.designUrl || '/big-screen/design') : (window.BS_CONFIG?.routers?.bizComponentDesignUrl || 'big-screen-biz-component-design') const path = this.catalogInfo === 'component' ? (window.BS_CONFIG?.routers?.designUrl || '/big-screen/design') : (window.BS_CONFIG?.routers?.bizComponentDesignUrl || 'big-screen-biz-component-design')
const { href } = this.$router.resolve({ const { href } = this.$router.resolve({
path, path,
@ -259,17 +354,17 @@ export default {
}) })
window.open(href, '_self') window.open(href, '_self')
}, },
add() { add () {
const page = { const page = {
code: '', code: '',
type: this.catalogInfo === 'component' ? 'bigScreen' : 'bizComponent' type: this.catalogInfo === 'component' ? 'bigScreen' : 'bizComponent'
} }
this.$refs.EditForm.init(page, this.catalogCode) this.$refs.EditForm.init(page, this.catalogCode)
}, },
edit(screen) { edit (screen) {
this.$refs.EditForm.init(screen, this.catalogCode) this.$refs.EditForm.init(screen, this.catalogCode)
}, },
del(screen) { del (screen) {
this.$confirm('确定删除该组件', '提示', { this.$confirm('确定删除该组件', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -278,7 +373,7 @@ export default {
}) })
.then(async () => { .then(async () => {
const url = this.catalogInfo === 'component' ? `/bigScreen/design/delete/${screen.code}` : `/bigScreen/bizComponent/delete/${screen.id}` const url = this.catalogInfo === 'component' ? `/bigScreen/design/delete/${screen.code}` : `/bigScreen/bizComponent/delete/${screen.id}`
post(url) this.$dataRoomAxios.post(url)
.then(() => { .then(() => {
this.$message({ this.$message({
type: 'success', type: 'success',
@ -295,8 +390,8 @@ export default {
}) })
.catch() .catch()
}, },
copy(screen) { copy (screen) {
const url = this.catalogInfo === 'component' ? `/bigScreen/design/copy/${screen.code}` : `/bigScreen/bizComponent/copy/${screen.code}` const url = this.catalogInfo === 'component' ? `/bigScreen/design/copy/${screen.code}` : `/Component/copy/${screen.code}`
this.$confirm('确定复制该组件', '提示', { this.$confirm('确定复制该组件', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -304,7 +399,7 @@ export default {
customClass: 'bs-el-message-box' customClass: 'bs-el-message-box'
}) })
.then(async () => { .then(async () => {
post(url) this.$dataRoomAxios.post(url)
.then(() => { .then(() => {
this.$message({ this.$message({
type: 'success', type: 'success',

Loading…
Cancel
Save