|
|
@@ -0,0 +1,220 @@
|
|
|
+<template>
|
|
|
+ <!-- 对话框表单 -->
|
|
|
+ <el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
|
|
|
+ :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm">
|
|
|
+ <template #header>
|
|
|
+ <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
|
|
|
+ {{ baTable.form.operate ? baTable.form.operate == 'edit' ? '编辑' : '添加' : '无标题' }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
|
|
|
+ <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
|
|
|
+ :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
|
|
|
+ <el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
|
|
|
+ label-position="right" :label-width="baTable.form.labelWidth + 'px'" :rules="rules"
|
|
|
+ v-if="!baTable.form.loading">
|
|
|
+ <el-form-item prop="adTitle" label="广告标题">
|
|
|
+ <el-input v-model="baTable.form.items!.adTitle"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="sceneType" label="场景">
|
|
|
+ <el-select v-model="baTable.form.items!.sceneType" placeholder="请选择场景" style="width: 100%"
|
|
|
+ clearable>
|
|
|
+ <el-option label="开机" :value="0"/>
|
|
|
+ <el-option label="轮播" :value="1"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="adType" label="类型">
|
|
|
+ <el-select v-model="baTable.form.items!.adType" placeholder="请选择类型" style="width: 100%"
|
|
|
+ clearable
|
|
|
+ @change="onChange">
|
|
|
+ <el-option label="展示" :value="0"/>
|
|
|
+ <el-option label="推广" :value="1"/>
|
|
|
+ <el-option label="好物" :value="2"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="documentId" label="关联" v-if="baTable.form.items.adType>0">
|
|
|
+ <el-select v-model="baTable.form.items!.documentId" placeholder="请选择关联" style="width: 100%"
|
|
|
+ clearable
|
|
|
+ filterable>
|
|
|
+ <el-option v-for="(item,index) in datas.selectList" :label="item.label" :value="item.value"
|
|
|
+ :key="index"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="adStatus" label="状态">
|
|
|
+ <el-select v-model="baTable.form.items!.adStatus" placeholder="请选择状态" style="width: 100%"
|
|
|
+ clearable>
|
|
|
+ <el-option label="下架" :value="1"/>
|
|
|
+ <el-option label="上架" :value="0"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="screenDisplayHorizontalUrl" label="大屏横屏展示"
|
|
|
+ v-if="baTable.form.items!.sceneType==0">
|
|
|
+ <pictureUpload v-model:fileUrl="baTable.form.items!.screenDisplayHorizontalUrl"></pictureUpload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="screenDisplayVerticalUrl" label="大屏竖屏展示"
|
|
|
+ v-if="baTable.form.items!.sceneType==0">
|
|
|
+ <pictureUpload v-model:fileUrl="baTable.form.items!.screenDisplayVerticalUrl"></pictureUpload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="screenDisplayHorizontalUrl" label="大屏轮播展示"
|
|
|
+ v-if="baTable.form.items!.sceneType==1">
|
|
|
+ <pictureUpload v-model:fileUrl="baTable.form.items!.screenDisplayHorizontalUrl"></pictureUpload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="appDisplayUrl" label="移动APP展示">
|
|
|
+ <pictureUpload v-model:fileUrl="baTable.form.items!.appDisplayUrl"></pictureUpload>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="font-size: 10px;color: #92969a;margin-left: 150px">
|
|
|
+ 仅限jpg/png格式文件，大小不超过1MB
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ <template #footer>
|
|
|
+ <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
|
|
|
+ <el-button @click="baTable.toggleForm('')">取消</el-button>
|
|
|
+ <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)"
|
|
|
+ type="primary">
|
|
|
+ {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? '保存并编辑下一项' : '保存' }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import {ref, reactive, inject, onMounted, watch} from 'vue'
|
|
|
+
|
|
|
+import type baTableClass from '/@/utils/baTable'
|
|
|
+import {regularPassword, validatorAccount, validatorMobile} from '/@/utils/validate'
|
|
|
+import type {ElForm, FormItemRule} from 'element-plus'
|
|
|
+import FormItem from '/@/components/formItem/index.vue'
|
|
|
+import {getOrgTree, getEmployees} from '/@/api/backend/auth/account'
|
|
|
+import {authGroup, sysConfig} from '/@/api/controllerUrls'
|
|
|
+import editor from '/@/components/editor/index.vue'
|
|
|
+import request from '/@/api/request'
|
|
|
+import {ElNotification} from 'element-plus/es'
|
|
|
+import {document} from '/@/api/controllerUrls'
|
|
|
+import pictureUpload from '/@/components/pictureUpload/index.vue'
|
|
|
+import {getRecommendList} from '/@/api/backend/enterprise/advertisement'
|
|
|
+
|
|
|
+const formRef = ref<InstanceType<typeof ElForm>>()
|
|
|
+const baTable = inject('baTable') as baTableClass
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getDocList()
|
|
|
+})
|
|
|
+
|
|
|
+let datas = reactive({
|
|
|
+ selectList: [],
|
|
|
+})
|
|
|
+
|
|
|
+function getDocList() {
|
|
|
+ request.index(document, undefined, 'list').then((res) => {
|
|
|
+ datas.selectList = []
|
|
|
+ baTable.form.items!.documentId = ''
|
|
|
+ res.data.map((item: any) => {
|
|
|
+ let selectItem = {
|
|
|
+ label: item.documentTitle,
|
|
|
+ value: item.id,
|
|
|
+ }
|
|
|
+ datas.selectList.push(selectItem)
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onChange = (val: any) => {
|
|
|
+ if (val === 1) {
|
|
|
+ getDocList()
|
|
|
+ }
|
|
|
+
|
|
|
+ if (val === 2) {
|
|
|
+ getRecommendList().then((res) => {
|
|
|
+ datas.selectList = []
|
|
|
+ baTable.form.items!.documentId = ''
|
|
|
+ res.data.map((item: any) => {
|
|
|
+ let selectItem = {
|
|
|
+ label: item.recommendTitle,
|
|
|
+ value: item.id,
|
|
|
+ }
|
|
|
+
|
|
|
+ datas.selectList.push(selectItem)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const rules: Partial<Record<string, FormItemRule[]>> = reactive({
|
|
|
+ adTitle: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入标题',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sceneType: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择场景',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ adType: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择类型',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ documentId: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择关联',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ adStatus: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择状态',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.avatar-uploader {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ border-radius: var(--el-border-radius-small);
|
|
|
+ box-shadow: var(--el-box-shadow-light);
|
|
|
+ border: 1px dashed var(--color-sub-1);
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar-uploader:hover {
|
|
|
+ border-color: var(--color-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.image-slot {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+function getRecommendList() {
|
|
|
+throw new Error('Function not implemented.')
|
|
|
+}
|
