|
|
@@ -0,0 +1,942 @@
|
|
|
+<template>
|
|
|
+ <!-- 仿===tabbarDetail -->
|
|
|
+ <div>
|
|
|
+ <!--表格内容 start------------------------------------------------------------>
|
|
|
+ <div class="layerBox">
|
|
|
+ <tableTitle :name="tableDivTitle" />
|
|
|
+
|
|
|
+ {{ table_head[11] }}
|
|
|
+ <div class="">------------</div>
|
|
|
+ <div class="">------------</div>
|
|
|
+ <div class="">------------</div>
|
|
|
+ <div class="">------------</div>
|
|
|
+ {{table_body[11]}}
|
|
|
+ <el-row>
|
|
|
+ <template>
|
|
|
+ <el-table class="my-table" :data="table_body" style="width: 100%">
|
|
|
+ <!-- 动态表头 -->
|
|
|
+ <el-table-column
|
|
|
+ v-for="(head, index) in table_head"
|
|
|
+ :key="index"
|
|
|
+ :prop="head.field"
|
|
|
+ :label="head.title"
|
|
|
+ :width="head.width || ''">
|
|
|
+ <!-- 动态内容 -->
|
|
|
+ <template slot-scope="scope">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <template v-if="table_head[index].field_type !== '7'">
|
|
|
+
|
|
|
+ {{table_per_fun(table_head[index],Object.values(scope.row)[index])}}
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template v-if="table_head[index].field_type == '7'" >
|
|
|
+ <button @click="file_fun(table_per_fun(table_head[index],Object.values(scope.row)[index]))">
|
|
|
+ 预览
|
|
|
+ </button>
|
|
|
+
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="table_head[index].field_type == '8'">
|
|
|
+ <img class="img"
|
|
|
+ style="width:55px;height:55px;"
|
|
|
+ :src=" Object.values(scope.row).join(',').split(',')[index] "
|
|
|
+ title="" alt=""
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 保留操作列 -->
|
|
|
+ <el-table-column fixed="right" label="操作" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="listBtnBox">
|
|
|
+ <div class="listEditBtn" @click="go_up(scope.row.id,scope.row,scope.$index )">
|
|
|
+ <i class="el-icon-edit-outline"></i>
|
|
|
+ 编辑
|
|
|
+ </div>
|
|
|
+ <div class="listDeleteBtn" @click="go_cancel(scope.row.id )">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ 删除
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!--分页 start------------------------------------------------------------>
|
|
|
+ <div class="alignBox">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="page"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <!--分页 end------------------------------------------------------------>
|
|
|
+ <!--表格内容 end------------------------------------------------------------>
|
|
|
+ <!-- 弹出框 编辑 start----------------------------------------------------------->
|
|
|
+ <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
|
|
+ <div class="dialogText">
|
|
|
+ <el-form-item
|
|
|
+ v-for="(head, index) in table_head"
|
|
|
+ :key="index"
|
|
|
+ :label="head.title + ':'+head.field_type+ ':'+dialog_inp_arr[index]+ '+'+head.is_check+ '+'+head.regular"
|
|
|
+ :prop="head.field"
|
|
|
+
|
|
|
+ :rules="[{
|
|
|
+ required:true,
|
|
|
+ message: head.title + '不能为空',
|
|
|
+ trigger: 'blur',
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+
|
|
|
+ if (!value || value.trim() === '') {
|
|
|
+
|
|
|
+ this.$message.error(`${head.title}:不能为空`);
|
|
|
+ callback(new Error(head.title + '不能为空'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }]">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 文本文字1 -->
|
|
|
+ <el-input
|
|
|
+ v-if="head.field_type==1"
|
|
|
+ v-model="dialog_inp_arr[index]"
|
|
|
+ :disabled="head.title === '编号' ? true : false"
|
|
|
+ @blur="handleBlurValidation(head.title, dialog_inp_arr[index])">
|
|
|
+ </el-input>
|
|
|
+
|
|
|
+ <!-- 多行textarea 2-->
|
|
|
+ <el-input
|
|
|
+ v-if="head.field_type==2"
|
|
|
+ v-model="dialog_inp_arr[index]"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 2, maxRows: 4 }"
|
|
|
+ @blur="handleBlurValidation(head.title, dialog_inp_arr[index])"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+
|
|
|
+ <!-- 单选按钮 3 -->
|
|
|
+ <el-radio-group
|
|
|
+
|
|
|
+ v-if="head.field_type==3"
|
|
|
+ v-model="dialog_inp_arr[index]"
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-radio
|
|
|
+ v-for="(per_obj,per_index) in radio_arr_fun(head.option)" :key="per_index"
|
|
|
+
|
|
|
+ :label="+per_obj[1]">
|
|
|
+ {{ per_obj[0] }}
|
|
|
+
|
|
|
+ </el-radio>
|
|
|
+
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <!-- 下拉选择 4 -->
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-if="head.field_type==4"
|
|
|
+ placeholder="请选择"
|
|
|
+ v-model="dialog_inp_arr[index]"
|
|
|
+
|
|
|
+ style="width: 100%">
|
|
|
+ <el-option
|
|
|
+ v-for="(per_obj, per_index) in select_arr_fun(head.option)"
|
|
|
+ :key="per_index"
|
|
|
+ :label="per_obj.label"
|
|
|
+ :value="per_obj.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-checkbox-group
|
|
|
+ v-if="head.field_type==5"
|
|
|
+ v-model="dialog_inp_arr[index]">
|
|
|
+ <el-checkbox
|
|
|
+ v-for="(per_obj, per_index) in head.option_value"
|
|
|
+ :key="per_index"
|
|
|
+ :label="per_index">
|
|
|
+ {{ per_obj }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+
|
|
|
+ <!-- 日期选择器 6 -->
|
|
|
+ <el-date-picker
|
|
|
+ v-if="head.field_type==6"
|
|
|
+ v-model="dialog_inp_arr[index]"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期"
|
|
|
+ style="width: 100%">
|
|
|
+ </el-date-picker>
|
|
|
+
|
|
|
+ <!-- 上传单文件 7-->
|
|
|
+
|
|
|
+ <template v-if="head.field_type==7" v-model="dialog_inp_arr[index]">
|
|
|
+ {{ dialog_inp_arr[index] }}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 上传img 8-->
|
|
|
+
|
|
|
+ <div class="uploaderBox" v-if="head.field_type==8" @mouseenter="hovering = true" @mouseleave="hovering = false">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="#"
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="(file) => beforeAvatarUpload(file, index)">
|
|
|
+
|
|
|
+ <img v-if="dialog_inp_arr[index]" :src="dialog_inp_arr[index]" class="avatar">
|
|
|
+
|
|
|
+ <div v-else class="chooseImgDiv">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/public/upload/noImage.png">
|
|
|
+
|
|
|
+ <div>选择图片</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="hidden" v-model="dialog_inp_arr[index]">
|
|
|
+ <span class="photo_tips">推荐图片长宽比例为 16:9，大小不能超过 500 K。</span>
|
|
|
+ <div v-if="hovering && dialog_inp_arr[index]"
|
|
|
+ class="delete-button"
|
|
|
+ @click="handleDelete(index)">
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="dialogBtn">
|
|
|
+ <el-button type="info" @click="cancelForm">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 弹出框 编辑 end----------------------------------------------------------->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+//表格标题
|
|
|
+import tableTitle from './components/tableTitle.vue';
|
|
|
+//引入公用样式
|
|
|
+import '@/styles/global.less';
|
|
|
+import { load_img_api,getFooterContent,up_table_api,look_table_api,cancel_table_api } from '@/api/globalFormApi'
|
|
|
+//引入富文本编辑器
|
|
|
+import myEditor from '../../components/edit/myEditor.vue';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ tableTitle,//表格标题
|
|
|
+ myEditor,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const validateEmpty = (rule, value, callback) => {
|
|
|
+ if (value.length == 0) {
|
|
|
+ callback(new Error('该项不能为空！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+
|
|
|
+ checkbox_active_arr:[],//复选选中
|
|
|
+ checkbox_selected_arr:[],//复选框选中
|
|
|
+ hovering: false,
|
|
|
+ imgUrl:"",
|
|
|
+ arr_1:[1,23,12,3],
|
|
|
+ up_edit_obj:{},//编辑后提交的数据
|
|
|
+ dialog_inp_arr:[ ],
|
|
|
+ activeIndex: 0, // 新增当前操作行索引
|
|
|
+ table_head:[],//列表头
|
|
|
+ table_body:[],//列表内容
|
|
|
+ tableDivTitle: "查看内容", //列表标题
|
|
|
+ dialogTableVisible: false, //编辑弹框
|
|
|
+ dialogName: '编辑', //编辑弹窗名称
|
|
|
+ tableData: [],//表格数据
|
|
|
+ tabbarId: '',//底部导航传递的id
|
|
|
+ tabbarType: 1,//底部导航传递的类型
|
|
|
+ //活动id
|
|
|
+ activeid: "",
|
|
|
+ // 分页相关
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ // 搜索框相关
|
|
|
+ listTitle: '', //网站名称id
|
|
|
+ contentTitle: '', //广告位名称
|
|
|
+ //弹框相关
|
|
|
+ ruleForm: {
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ listTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ contentTitle: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ contentDetail: [{ required: true, trigger: 'blur', validator: validateEmpty }],
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ fun_rg(){
|
|
|
+ console.log("----------------")
|
|
|
+ },
|
|
|
+
|
|
|
+ convertStringArray(strArray) {
|
|
|
+ try {
|
|
|
+ return strArray.map(item => {
|
|
|
+ if (typeof item === 'string' && /^\[.*\]$/.test(item)) {
|
|
|
+ return JSON.parse(item.replace(/'/g, '"'));
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.error('数组转换失败:', e);
|
|
|
+ return strArray;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //1.列表和分页相关 start ------------------------------------------------------------>
|
|
|
+ //1.1 开始请求列表信息方法
|
|
|
+ getData() {
|
|
|
+ // 查看内容-列表
|
|
|
+ look_table_api({//
|
|
|
+ page: this.page,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ id: this.$route.query.id,
|
|
|
+ }).then(data => {
|
|
|
+ this.tableData = data.data.tableFields
|
|
|
+ this.total = data.data.total
|
|
|
+ this.table_head = data.data.tableFields//列表头
|
|
|
+ this.table_body = data.data.list//列表内容
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //1.3 列表内容分页
|
|
|
+ //直接跳转
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pageSize = val;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ //1.4 点击分页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page = val;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ // 1.5 搜索按钮
|
|
|
+ goSearch() {
|
|
|
+ getFooterContent({
|
|
|
+ fcat_id: this.tabbarId,
|
|
|
+ page: this.page,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ list_title:this.listTitle,
|
|
|
+ con_title:this.contentTitle,
|
|
|
+ }).then(data => {
|
|
|
+ // console.log(data);
|
|
|
+ this.tableData = data.data.rows
|
|
|
+ this.total = data.data.count
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //1.6 重置按钮
|
|
|
+ goReset() {
|
|
|
+ this.listTitle = ""
|
|
|
+ this.contentTitle = ""
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ //列表和分页相关 end ------------------------------------------------------------>
|
|
|
+ //1.7 编辑
|
|
|
+ go_up(id, val,the_index) {
|
|
|
+
|
|
|
+
|
|
|
+ this.up_edit_obj = this.table_body[the_index]
|
|
|
+
|
|
|
+
|
|
|
+ this.dialog_inp_arr = Object.values(this.table_body[the_index]).map(value => {
|
|
|
+ // 将数字字符串转为数值类型（针对radio的label类型）
|
|
|
+ return typeof value === 'string' && !isNaN(value) ? Number(value) : value
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ this.dialogName = '全局表单-编辑内容'
|
|
|
+ this.activeid = id
|
|
|
+ this.dialogTableVisible = true
|
|
|
+ // console.log(id, val);
|
|
|
+ this.activeIndex = the_index//点击的是第几个
|
|
|
+ // 添加字段映射（保持原有数组结构）
|
|
|
+ this.table_head.forEach((head, index) => {
|
|
|
+ this.$set(this.ruleForm, head.field, this.dialog_inp_arr[index])
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //1.8 删除
|
|
|
+ go_cancel(id) {
|
|
|
+ this.$confirm('确定要删除该记录吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ dangerouslyUseHTMLString: true
|
|
|
+ }).then(() => {
|
|
|
+ cancel_table_api({
|
|
|
+ id:id,
|
|
|
+ table_id:this.$route.query.id,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.getData() // 刷新数据
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || '删除失败')
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.error('删除失败:', err)
|
|
|
+ this.$message.error('删除失败')
|
|
|
+ })
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+
|
|
|
+ // 单选按钮的str转obj
|
|
|
+ radio_arr_fun(the_str){
|
|
|
+
|
|
|
+ let new_arr =[]
|
|
|
+ let the_arr = the_str.split('\n')
|
|
|
+ the_arr.forEach(( per_son_obj, index ) => {
|
|
|
+ new_arr[index] = per_son_obj.split('|')
|
|
|
+ })
|
|
|
+
|
|
|
+ return new_arr
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下拉选择str转obj
|
|
|
+ select_arr_fun(the_str){
|
|
|
+
|
|
|
+ let new_arr =[]
|
|
|
+ let the_arr = the_str.split('\n')
|
|
|
+
|
|
|
+ the_arr.forEach(( per_son_obj, index ) => {
|
|
|
+ // new_arr[index] = per_son_obj.split('|')
|
|
|
+ let the_in_arr = per_son_obj.split('|')
|
|
|
+ let the_in_obj = {}
|
|
|
+ the_in_obj.label = the_in_arr[0]
|
|
|
+ the_in_obj.value = +the_in_arr[1]
|
|
|
+ new_arr.push(the_in_obj)
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ return new_arr
|
|
|
+ },
|
|
|
+
|
|
|
+ // form 里复选框选项处理（与radio_arr_fun类似）
|
|
|
+ checkbox_arr_fun(the_index, the_str,active_num_arr,all_obj) {
|
|
|
+
|
|
|
+ let checkbox_strValue = String(active_num_arr || "").replace(/[\[\]]/g, '');
|
|
|
+ active_num_arr = checkbox_strValue.split(',').filter(Boolean).map(Number);
|
|
|
+ let act_label_arr = []//选中的label-arr
|
|
|
+ active_num_arr.forEach(( per_obj ) => {
|
|
|
+ act_label_arr.push(all_obj[per_obj])
|
|
|
+ })
|
|
|
+ const new_all_arr = Object.values(all_obj || {});
|
|
|
+
|
|
|
+
|
|
|
+ this.dialog_inp_arr[the_index]=act_label_arr
|
|
|
+
|
|
|
+
|
|
|
+ return new_all_arr
|
|
|
+ },
|
|
|
+
|
|
|
+ table_per_fun(the_head,the_obj){//判断table是否是图片
|
|
|
+
|
|
|
+
|
|
|
+ if(the_head.field_type == '1'){//文字
|
|
|
+ return the_obj
|
|
|
+ }
|
|
|
+ if(the_head.field_type == '2'){//多行文本
|
|
|
+ return the_obj
|
|
|
+ }
|
|
|
+
|
|
|
+ if(the_head.field_type == '3'){//单选框
|
|
|
+ return the_head.option_value[the_obj]
|
|
|
+ }
|
|
|
+
|
|
|
+ if(the_head.field_type == '4'){//下拉选择
|
|
|
+ return the_head.option_value[+the_obj]
|
|
|
+ }
|
|
|
+ if(the_head.field_type == '5'){//复选框
|
|
|
+ let strValue = String(the_obj || "").replace(/[\[\]]/g, '')
|
|
|
+ let arr_in = strValue.split(',').filter(Boolean).map(Number)
|
|
|
+ let the_new_arr = []
|
|
|
+ arr_in.forEach(( per_obj ) => {
|
|
|
+ the_new_arr.push(the_head.option_value[per_obj])
|
|
|
+ })
|
|
|
+
|
|
|
+ return the_new_arr.join('-')
|
|
|
+ }
|
|
|
+
|
|
|
+ if(the_head.field_type == '6'){//日期
|
|
|
+ return the_obj
|
|
|
+ }
|
|
|
+
|
|
|
+ if(the_head.field_type == '7'){//单文件
|
|
|
+ return the_obj
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ file_fun(fileUrl) {
|
|
|
+ if (!fileUrl) {
|
|
|
+ this.$message.error('文件路径无效');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 直接在新标签页打开文件链接
|
|
|
+ window.open(fileUrl, '_blank');
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //上传img
|
|
|
+ beforeAvatarUpload(file,index) {
|
|
|
+
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG && !isPNG) {
|
|
|
+ this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传缩略图大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ load_img_api(formData).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success('上传成功');
|
|
|
+ this.$set(this.dialog_inp_arr, index, res.data.imgUrl); // 使用index更新对应位置
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || '上传失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除图片
|
|
|
+ handleDelete(index) {
|
|
|
+ this.$set(this.dialog_inp_arr, index, '');
|
|
|
+
|
|
|
+ },
|
|
|
+ // 弹出层相关方法
|
|
|
+ // 1.9 提交表单
|
|
|
+ submitForm(formName) {
|
|
|
+ // 新增正则验证逻辑
|
|
|
+ const regexValidations = this.table_head
|
|
|
+ .map((head, index) => ({
|
|
|
+ head,
|
|
|
+ value: this.dialog_inp_arr[index],
|
|
|
+ index
|
|
|
+ }))
|
|
|
+ .filter(item => item.head.is_check == 1 && item.head.regular);
|
|
|
+
|
|
|
+ for (const { head, value, index } of regexValidations) {
|
|
|
+ // console.log("head===----------",head.regular)
|
|
|
+ // head.title==
|
|
|
+
|
|
|
+ try {
|
|
|
+ const reg = new RegExp(head.regular);
|
|
|
+ if (!reg.test(value)) {
|
|
|
+ this.$message.error(head.regular_error || `${head.title}格式不正确`);
|
|
|
+ this.$refs[formName].validate(() => {}); // 触发错误提示
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } catch(e) {
|
|
|
+ // console.error('正则表达式错误:', e);
|
|
|
+ this.$message.error('校验规则配置错误');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 转换复选框数据（数组转字符串）
|
|
|
+ const convertedData = this.dialog_inp_arr.map((value, index) => {
|
|
|
+ if (this.table_head[index]?.field_type === 5) {
|
|
|
+ return Array.isArray(value) && value.length === 1
|
|
|
+ ? value[0]
|
|
|
+ : value.join(',');
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 使用转换后的数据提交
|
|
|
+ const the_obj = this.table_body[0];
|
|
|
+ Object.keys(the_obj).forEach((key, index) => {
|
|
|
+ the_obj[key] = convertedData[index];
|
|
|
+ });
|
|
|
+ the_obj.table_id = +this.$route.query.id;
|
|
|
+ const emptyFields = this.dialog_inp_arr
|
|
|
+ .map((value, index) => ({
|
|
|
+ index,
|
|
|
+ field: this.table_head[index]?.title,
|
|
|
+ value
|
|
|
+ }))
|
|
|
+ .filter(item => !item.value || item.value.toString().trim() === '');
|
|
|
+ if (emptyFields.length > 0) {
|
|
|
+ emptyFields.forEach(item => {
|
|
|
+ this.$message.error(`${item.field}:不能为空`);
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // return
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // 验证通过后的提交逻辑
|
|
|
+
|
|
|
+
|
|
|
+ up_table_api({
|
|
|
+ ...the_obj //展开
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success('提交成功');
|
|
|
+ this.dialogTableVisible = false;
|
|
|
+ this.getData();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || '提交失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error('请填写所有必填项');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ //取消
|
|
|
+ cancelForm() {
|
|
|
+ this.dialogTableVisible = false
|
|
|
+ },
|
|
|
+ handleBlurValidation(fieldName, value) {
|
|
|
+ if (!value || value.trim() === '') {
|
|
|
+ this.$message.error(`${fieldName}:不能为空`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ // console.log(this.$route.query.id);
|
|
|
+ this.tabbarId = this.$route.query.id
|
|
|
+ this.tabbarType = this.$route.query.type
|
|
|
+ this.getData() //获取数据
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+input[aria-hidden=true] {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+// 提示信息
|
|
|
+.tips {
|
|
|
+ margin: 30px;
|
|
|
+ background-color: #e9ecf9;
|
|
|
+ border-radius: 11px;
|
|
|
+ .tipsIcon {
|
|
|
+ margin: 10px 15px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: url("../../assets/advertise/Info Circle.png") no-repeat;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .tipsText {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 头部
|
|
|
+.title {
|
|
|
+ margin: 30px 30px 20px 30px;
|
|
|
+ padding: 30px 30px 40px 30px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20px 20px 20px 20px;
|
|
|
+ border: 1px solid #E9EDF7;
|
|
|
+ .left {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .searchBox {
|
|
|
+ ::v-deep .el-input {
|
|
|
+ position: relative;
|
|
|
+ font-size: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ .searchTitle {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ .el-select {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btnList {
|
|
|
+ float: right;
|
|
|
+ padding-top: 28px;
|
|
|
+ button {
|
|
|
+ height: 38px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 0 30px;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ background-color: #5570f1;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .reset {
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ background: #F5F7FB;
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ border: 1px solid rgba(85, 112, 241, 0.11);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.layerBox {
|
|
|
+ padding: 30px 20px;
|
|
|
+ position: relative;
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ right: 20px;
|
|
|
+ height: 38px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #5570f1;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 28px 9px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .listBtnBox {
|
|
|
+ justify-content: left;
|
|
|
+ }
|
|
|
+ .listLookBtn {
|
|
|
+ width:auto!important;
|
|
|
+ margin-left: 0px;
|
|
|
+ padding:0px 6px;word-break: keep-all; white-space: nowrap;
|
|
|
+ margin-right: 20px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ .listLookBtn {
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #55b5f1;
|
|
|
+ background-color: rgba(85, 181, 241, 0.16);
|
|
|
+ >i {
|
|
|
+ padding-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .el-form-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ ::v-deep .el-select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ ::v-deep .el-input--medium,
|
|
|
+ ::v-deep .el-form-item__label {
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 弹出层内容
|
|
|
+.dialogText {
|
|
|
+ margin: 0 7px 0 3px;
|
|
|
+ padding-bottom: 1px;
|
|
|
+ padding: 30px 60px 1px 20px;
|
|
|
+ background-color: #f5f7fb;
|
|
|
+ .el-form-item{
|
|
|
+ margin-bottom: 20px!important;
|
|
|
+ }
|
|
|
+ .adImage {
|
|
|
+ width: 140px;
|
|
|
+ height: 140px;
|
|
|
+ line-height: 210px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid rgba(85, 112, 241, 0.11);
|
|
|
+ img {
|
|
|
+ width: 140px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .avatar {
|
|
|
+ width: 140px;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ ::v-deep .el-input {
|
|
|
+ width: 29%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .example {
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ color: #5570F1;
|
|
|
+ }
|
|
|
+ .el_btnList {
|
|
|
+ margin-right: 15px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ //日期时间选择器的宽
|
|
|
+ ::v-deep .el-date-editor.el-input {
|
|
|
+ width: 48%;
|
|
|
+ }
|
|
|
+ ::v-deep .el-button+.el-button {
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+ ::v-deep .el-select {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ ::v-deep .el-form-item {
|
|
|
+ margin-bottom: 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 弹出层按钮
|
|
|
+.dialogBtn {
|
|
|
+ text-align: center;
|
|
|
+ margin: 50px auto 20px;
|
|
|
+ button {
|
|
|
+ width: 184px;
|
|
|
+ padding: 16px;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 12px 12px 12px 12px;
|
|
|
+ }
|
|
|
+ // 取消
|
|
|
+ .cancel {
|
|
|
+ color: #333333;
|
|
|
+ background-color: #f5f7fb;
|
|
|
+ border: 2px solid rgba(85, 112, 241, 0.11);
|
|
|
+ }
|
|
|
+ // 提交
|
|
|
+ .submit {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #5570F1;
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+//审核弹出框
|
|
|
+.radioGroup {
|
|
|
+ ::v-deep .el-form-item {
|
|
|
+ margin-top: 40px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.graph {
|
|
|
+ background-color: #f5f7fb;
|
|
|
+ padding: 60px 100px;
|
|
|
+ overflow: hidden;
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ >li:first-child {
|
|
|
+ margin-right: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dialog-footer {
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.uploaderBox {
|
|
|
+ position: relative;
|
|
|
+ .avatar-uploader {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chooseImgDiv {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ color: #8c939d;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-button {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo_tips {
|
|
|
+ display: block;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
CaoGQ123