新增推广位项目选择

zhaoxiaoqiang

2023-09-07 a857a5abd3525287221f813cea77bb78cd6c7e01

 src/views/qyp-project-management/index.vue

@@ -13,7 +13,6 @@
              <el-input
                v-model.trim="formInline.projName"
                style="width: 240px"
                @keyup.native="keyupEvent($event)"
                type="tel"
                clearable
                placeholder="请输入"
@@ -49,9 +48,8 @@
                  </el-select>
            </el-form-item>
          </div>
          <el-form-item style="text-align: right;">
            <!--  v-if='filterBtnById("150102")' -->
            <el-button type="primary" style="margin-left: 10px;margin-bottom: 8px;" @click="onSearch">查 询</el-button>
          <el-form-item style="text-align: right;" >
            <el-button type="primary" v-if='filterBtnById("420101")'  style="margin-left: 10px;margin-bottom: 8px;" @click="onSearch">查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
@@ -67,12 +65,12 @@
          @getDataList="getDataList"
          :exportUrl="{
            url: '/qyp/project/export',
            powerId: '',
            powerId: '420104',
            name: '项目列表',
          }"
        ></Etable>
      </div>
      <el-dialog top="2vh"  :title="title" :visible.sync="addProd" width="60%">
      <el-dialog top="2vh"  :title="title" :visible.sync="addProd" width="1000px">
          <!-- 新增商品名称 -->
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" label-width="120px" class="demo-ruleForm">
            <el-form-item label="项目名称" prop="projName">
@@ -93,31 +91,29 @@
              </el-radio-group>
            </el-form-item>
            <el-form-item label="项目背景图" v-if="addProd" ref="backFilePath" prop="backFilePath">
               <uploadImg  v-if="addProd" @sendList="imgSet($event,'backFilePath')" :disabled="disabled"  :defaultList="ruleForm.backFilePath"></uploadImg>
               <uploadImg  v-if="addProd" @sendList="imgSet($event,'backFilePath')" :disabled="disabled"  :defaultList="backFilePath"></uploadImg>
            </el-form-item>
            <el-form-item label="项目宣传标语" ref="logoFilePath" prop="logoFilePath">
              <uploadImg v-if="addProd" @sendList="imgSet($event,'logoFilePath')" :disabled="disabled"  :defaultList="ruleForm.logoFilePath"></uploadImg>
              <uploadImg v-if="addProd" @sendList="imgSet($event,'logoFilePath')" :disabled="disabled"  :defaultList="logoFilePath"></uploadImg>
            </el-form-item>
            <el-form-item label="项目优惠券图片" ref="titleFilePath" prop="titleFilePath">
              <uploadImg v-if="addProd"  @sendList="imgSet($event,'titleFilePath')" :disabled="disabled" :defaultList="ruleForm.titleFilePath"></uploadImg>
              <uploadImg v-if="addProd"  @sendList="imgSet($event,'titleFilePath')" :disabled="disabled" :defaultList="titleFilePath"></uploadImg>
            </el-form-item>
            <el-form-item label="会员权益" ref="qyFilePath"  prop="qyFilePath">
              <uploadImg v-if="addProd" @sendList="imgSet($event,'qyFilePath')"     :disabled="disabled" :defaultList="ruleForm.qyFilePath"></uploadImg>
            <el-form-item label="会员权益" ref="qyFilePath">
              <uploadImg v-if="addProd" @sendList="imgSet($event,'qyFilePath')"     :disabled="disabled" :defaultList="qyFilePath"></uploadImg>
            </el-form-item>
            <!-- <el-form-item label="活动规则" ref="ruleFilePath" prop="ruleFilePath">
              <uploadImg v-if="addProd"  @sendList="imgSet($event,'ruleFilePath')" :disabled="disabled" :defaultList="ruleForm.ruleFilePath"></uploadImg>
            </el-form-item> -->
            <el-form-item label="活动规则" prop="ruleContent">
              <el-input type="textarea" v-model="ruleForm.ruleContent" :disabled="disabled"></el-input>
              <!-- <uploadImg v-if="addProd"  @sendList="imgSet($event,'ruleFilePath')" :disabled="disabled" :defaultList="ruleForm.ruleFilePath"></uploadImg> -->
              <div :class="{'tinymce_disable':disabled}">
                <tinymce v-if="addProd" v-model="ruleForm.ruleContent" :disabled="disabled" :height="300" />
              </div>
            </el-form-item>
            <el-form-item style="text-align:right;" v-if="!disabled">
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
              <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
          </el-form>
      
      </el-dialog>
      
    </div>
  </template>
  
@@ -125,9 +121,10 @@
  import Etable from "../../components/table.vue";
  import {projectInit,projectAdd,projectDtl,projectUpdata} from "@/api/credit";
  import uploadImg from "@/components/upload.vue";
  import Tinymce from '@/components/Tinymce'
  export default {
    name: "order",
    components: { Etable,uploadImg },
    components: { Etable,uploadImg,Tinymce },
    data() {
      let backFilePathImage = (rule, value, callback) => { //验证器
        if (!this.ruleForm.backFilePath.length) {     //为true代表图片在  false报错
@@ -184,7 +181,8 @@
            {
              lable: "项目链接",
              prop: "projUrl",
              align: "center"
              align: "center",
              width: "300",
            },
            {
              lable: "创建时间",
@@ -202,6 +200,7 @@
              lable: "项目描述",
              prop: "projDesc",
              align: "center",
              width: "240",
            },
            {
              lable: "",
@@ -220,9 +219,9 @@
                        type:'text'
                      },
                      style: {
                        // display: this.filterBtnById(150101)
                        //   ? "inline-block"
                        //   : "none",
                        display: this.filterBtnById(420102)
                          ? "inline-block"
                          : "none",
                      },
                      on: {
                        click: () => {
@@ -243,9 +242,9 @@
                      },
                      style: {
                        "margin-left": "15px",
                        // display: this.filterBtnById(150104)
                        //   ? "inline-block"
                        //   : "none",
                        display: this.filterBtnById(420103)
                          ? "inline-block"
                          : "none",
                      },
                      on: {
                        click: () => {
@@ -269,8 +268,7 @@
            backFilePath:[],
            logoFilePath:[],
            titleFilePath:[],
            qyFilePath:[],
            ruleFilePath:[]
            qyFilePath:[]
          },
          rules: {
              projName: [
@@ -300,11 +298,19 @@
              qyFilePath: [
                { required: true,  trigger: 'change' ,validator: qyFilePathImage }
              ],
              ruleFilePath: [
                { required: true,  trigger: 'change',validator: ruleFilePathImage  }
              // ruleFilePath: [
              //   { required: true,  trigger: 'change',validator: ruleFilePathImage  }
              // ],
              ruleContent:[
                { required: true, message: '请输入活动规则',  trigger: 'blur', }
              ]
          },
          title:"新增项目"
          title:"新增项目",
          backFilePath:[],
          logoFilePath:[],
          titleFilePath:[],
          qyFilePath:[],
          ruleFilePath:[]
      }
    },
    watch:{
@@ -317,12 +323,16 @@
              projUrl:"",
              projDesc:"",
              status:"",
              ruleContent:'',
              backFilePath:[],
              logoFilePath:[],
              titleFilePath:[],
              qyFilePath:[],
              ruleFilePath:[]
            };
            this.backFilePath = [];
            this.logoFilePath = [];
            this.titleFilePath = [];
            this.qyFilePath = [];
            this.$refs['ruleForm'].resetFields();
          }
        },
@@ -356,6 +366,7 @@
      },
      addProduct(){
        this.title = '新增项目';
        this.ruleForm.ruleContent = '';
        this.addProd = true;
        this.disabled = false;
      },
@@ -369,7 +380,7 @@
        }
        let objForm = JSON.parse(JSON.stringify(this.formInline));
        for (let key in objForm) {
          if (objForm[key] === "all") {
          if (objForm[key] === "all"||objForm[key] === "") {
            delete objForm[key];
          }
        }
@@ -396,13 +407,13 @@
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let {backFilePath,logoFilePath,titleFilePath,qyFilePath,ruleFilePath,projId} = this.ruleForm;
            let {backFilePath,logoFilePath,titleFilePath,qyFilePath,projId} = this.ruleForm;
            let method = {projectUpdata,projectAdd};
            let data  = {};
            if(projId){
              data = {...this.ruleForm,backFilePath:backFilePath[0],logoFilePath:logoFilePath[0],titleFilePath:titleFilePath[0],qyFilePath:qyFilePath[0],ruleFilePath:ruleFilePath[0]}
              data = {...this.ruleForm};
            }else{
              data = {...this.ruleForm,backFilePath:backFilePath[0],logoFilePath:logoFilePath[0],titleFilePath:titleFilePath[0],qyFilePath:qyFilePath[0],ruleFilePath:ruleFilePath[0]}
              data = {...this.ruleForm,backFilePath:backFilePath[0],logoFilePath:logoFilePath[0],titleFilePath:titleFilePath[0],qyFilePath:qyFilePath[0]}
            }
            method[projId?"projectUpdata":"projectAdd"](data).then(res=>{
              this.$message.success("创建成功");
@@ -428,12 +439,11 @@
      },
      getProductDetail(projId,type){
        projectDtl({projId:projId}).then(({body})=>{
          let {backFilePath,logoFilePath,titleFilePath,qyFilePath,ruleFilePath} = body;
          body.backFilePath = this.setDefaultImg(backFilePath,'backFilePath');
          body.logoFilePath = this.setDefaultImg(logoFilePath,'logoFilePath');
          body.titleFilePath = this.setDefaultImg(titleFilePath,"titleFilePath");
          body.qyFilePath = this.setDefaultImg(qyFilePath,"qyFilePath");
          body.ruleFilePath = this.setDefaultImg(ruleFilePath,"ruleFilePath");
          let {backFilePath,logoFilePath,titleFilePath,qyFilePath} = body;
          this.backFilePath = this.setDefaultImg(backFilePath,'backFilePath');
          this.logoFilePath = this.setDefaultImg(logoFilePath,'backFilePath');
          this.titleFilePath = this.setDefaultImg(titleFilePath,'titleFilePath');
          this.qyFilePath = this.setDefaultImg(qyFilePath,'backFilePath');
          this.ruleForm = body;
          this.$nextTick(()=>{ 
            this.addProd = true; 
@@ -441,9 +451,13 @@
        })
      },
      setDefaultImg(url,type){
        let backArr = [url].map((n,index)=>{
          return {url:n,filePath:n,uid:type+index,fileId:type+index,fileName:n,name:n};
        });
        let backArr = [];
        if(url){
          backArr = [url].map((n,index)=>{
            return {url:n,filePath:n,uid:type+index,fileId:type+index,fileName:n,name:n};
          });
        }
      
        return backArr
      }
    }
@@ -478,6 +492,16 @@
    .tips{
      color: #f56c6c;
    }
    .tinymce_disable{
      position:relative;
      left:0;
      top:0;
      opacity:.5;
      width:100%;//根据自己的富文本宽调整
      background-color:#000;
      z-index:998;
      pointer-events: none;
    }
  }
  </style>