订单管理管理员订单管理

zhaoxiaoqiang

2023-08-31 1e49e17d482e3a3e67108bdffa4ae5f374e26cb8

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

@@ -50,12 +50,15 @@
            </el-form-item>
          </div>
          <el-form-item style="text-align: right;">
            <el-button type="primary" style="margin-left: 10px;margin-bottom: 8px;" v-if='filterBtnById("150102")' @click="addProduct">新 增</el-button>
            <!--  v-if='filterBtnById("150102")' -->
            <el-button type="primary" style="margin-left: 10px;margin-bottom: 8px;" @click="onSearch">查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_box">
        <div  style="margin-left: 10px;text-align: right;">
          <el-button type="primary" size="small" @click="addProduct">新增项目</el-button>
        </div>
        <Etable
          hasIndex
          httpUrl="projectList"
@@ -64,14 +67,51 @@
          @getDataList="getDataList"
          :exportUrl="{
            url: '/qyp/project/export',
            powerId: '150103',
            powerId: '',
            name: '项目列表',
          }"
        ></Etable>
      </div>
      <el-dialog top="8vh"  title="新增商品" :visible.sync="addProd" width="60%">
        <!-- 新增商品名称 -->
       
      <el-dialog top="2vh"  :title="title" :visible.sync="addProd" width="60%">
          <!-- 新增商品名称 -->
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" label-width="100px" class="demo-ruleForm">
            <el-form-item label="项目名称" prop="projName">
              <el-input v-model="ruleForm.projName" :disabled="disabled" :maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="项目价格" prop="projPrice">
              <el-input v-model="ruleForm.projPrice" :disabled="disabled" :maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="项目链接" prop="projUrl">
              <el-input v-model="ruleForm.projUrl" :disabled="disabled" :maxlength="150"></el-input>
            </el-form-item>
            <el-form-item label="项目描述" prop="projDesc">
              <el-input type="textarea" v-model="ruleForm.projDesc" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="项目状态" prop="status">
              <el-radio-group v-model="ruleForm.status" :disabled="disabled">
                <el-radio v-for="item in relustObj.statusList" :key="item.code" :label="item.code">{{ item.name }}</el-radio>
              </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>
            </el-form-item>
            <el-form-item label="项目logo" ref="logoFilePath" prop="logoFilePath">
              <uploadImg v-if="addProd" @sendList="imgSet($event,'logoFilePath')" :disabled="disabled"  :defaultList="ruleForm.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>
            </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>
            <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 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>
@@ -80,55 +120,49 @@
  <script>
  import Etable from "../../components/table.vue";
  import {projectInit,projectAdd,projectDtl,projectUpdata} from "@/api/credit";
  //   import orderDetail from "./orderDetail.vue";
  import uploadImg from "@/components/upload.vue";
  import MultipleSelect from "../../components/secect.vue";
  import moment from 'moment';
  export default {
    name: "order",
    components: { Etable, MultipleSelect, uploadImg },
    components: { Etable,uploadImg },
    data() {
      let validateImage = (rule, value, callback) => { //验证器
        if (!this.payForm.prodListImages.length) {     //为true代表图片在  false报错
          callback(new Error('请上传商品展示图片'));
      let backFilePathImage = (rule, value, callback) => { //验证器
        if (!this.ruleForm.backFilePath.length) {     //为true代表图片在  false报错
          callback(new Error('请上传项目背景图'));
        } else {
          callback();
        }
      };
      let validateImage1 = (rule, value, callback) => { //验证器
        if (!this.payForm.prodImages.length) {     //为true代表图片在  false报错
          callback(new Error('请上传商品轮播图'));
      let logoFilePathImage = (rule, value, callback) => { //验证器
        if (!this.ruleForm.logoFilePath.length) {     //为true代表图片在  false报错
          callback(new Error('请上传项目logo图'));
        } else {
          callback();
        }
      };
      let validateImage2 = (rule, value, callback) => { //验证器
        if (!this.payForm.prodDescImages.length) {     //为true代表图片在  false报错
          callback(new Error('请上传商品详情图片'));
      let titleFilePathImage = (rule, value, callback) => { //验证器
        if (!this.ruleForm.titleFilePath.length) {     //为true代表图片在  false报错
          callback(new Error('请上传平台头图'));
        } else {
          callback();
        }
      };
      let qyFilePathImage = (rule, value, callback) => { //验证器
        if (!this.ruleForm.qyFilePath.length) {     //为true代表图片在  false报错
          callback(new Error('请上传会员权益图'));
        } else {
          callback();
        }
      };
      let ruleFilePathImage = (rule, value, callback) => { //验证器
        if (!this.ruleForm.ruleFilePath.length) {     //为true代表图片在  false报错
          callback(new Error('请上传会员权益图'));
        } else {
          callback();
        }
      };
      return {
          disabled: true,
          payForm: {
            prodImages: [],
            prodListImages:[],
            prodDescImages:"",
          },
          licensePaths: [],
          prodListImages:[],
          prodDescImages:[],
          payFormRule: {
            prodListImage:[{ required: true,  trigger: "change",validator: validateImage}],
            prodImages:[{ required: true,  trigger: "change",validator: validateImage1}],
            prodDescImages:[{ required: true,  trigger: "change",validator: validateImage2}],
            desc: [{ required: true, message: "请输入商品简介", trigger: "blur" }],
            status:[{ required: true, message: "请选择上架状态", trigger: "change" }]
          },
          formInline: {
            status:"all",
          },
          disabled: false,
          formInline: {status:"all"},
          searchData: {},
          columns: [
            {
@@ -146,8 +180,7 @@
            {
              lable: "项目链接",
              prop: "projUrl",
              align: "center",
              width: "200",
              align: "center"
            },
            {
              lable: "创建时间",
@@ -172,54 +205,124 @@
            {
              lable: "操作",
              align: "center",
              width: "180",
              width: "200",
              fixed: "right",
              render: (h, scope) => {
                return h("div", [
                  h(
                    "span",
                    "el-button",
                    {
                      props:{
                        type:'text'
                      },
                      style: {
                        cursor: "pointer",
                        color: "#3C8EFE",
                        display: this.filterBtnById(150101)
                          ? "inline-block"
                          : "none",
                        // display: this.filterBtnById(150101)
                        //   ? "inline-block"
                        //   : "none",
                      },
                      on: {
                        click: () => {
                         
                          this.title = '项目详情'; 
                          this.disabled = true;
                          let {projId} = scope.row;
                          this.getProductDetail(projId);
                        },
                      },
                    },
                    "查看详情"
                  ),
                  h(
                    "span",
                    "el-button",
                    {
                      props:{
                        type:'text'
                      },
                      style: {
                        cursor: "pointer",
                        "margin-left": "8px",
                        color: "#3C8EFE",
                        display: this.filterBtnById(150104)
                          ? "inline-block"
                          : "none",
                        "margin-left": "15px",
                        // display: this.filterBtnById(150104)
                        //   ? "inline-block"
                        //   : "none",
                      },
                      on: {
                        click: () => {
                          
                          this.title = '编辑项目'; 
                          this.disabled = false;
                          let {projId} = scope.row;
                          this.getProductDetail(projId);
                        },
                      },
                    },
                    "编辑"
                  ),
                  )
                ]);
              },
            },
          ],
          relustObj: {},
          addProd:false,
          createdTime:[]
          createdTime:[],
          ruleForm:{
            backFilePath:[],
            logoFilePath:[],
            titleFilePath:[],
            qyFilePath:[],
            ruleFilePath:[]
          },
          rules: {
              projName: [
                { required: true, message: '请输入项目名称', trigger: 'blur' }
              ],
              projPrice: [
                { required: true, message: '请输入项目价格', trigger: 'blur' }
              ],
              projUrl: [
                { required: true, message: '请输入项目链接', trigger: 'blur' }
              ],
              projDesc: [
                { required: true, message: '请输入项目描述', trigger: 'blur' }
              ],
              status: [
                { required: true, message: '请选择项目状态', trigger: 'change' }
              ],
              backFilePath: [
                { required: true,trigger: 'change',validator: backFilePathImage }
              ],
              logoFilePath: [
                { required: true,  trigger: 'change',validator: logoFilePathImage }
              ],
              titleFilePath: [
                { required: true, trigger: 'change',validator: titleFilePathImage  }
              ],
              qyFilePath: [
                { required: true,  trigger: 'change' ,validator: qyFilePathImage }
              ],
              ruleFilePath: [
                { required: true,  trigger: 'change',validator: ruleFilePathImage  }
              ]
          },
          title:"新增项目"
      }
    },
    watch:{
      addProd:{
        handler: function(val) {
          if(!val){
            this.ruleForm = {
              projName:"",
              projPrice:"",
              projUrl:"",
              projDesc:"",
              status:"",
              backFilePath:[],
              logoFilePath:[],
              titleFilePath:[],
              qyFilePath:[],
              ruleFilePath:[]
            };
            this.$refs['ruleForm'].resetFields();
          }
        },
        deep: true
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
@@ -248,7 +351,9 @@
        this.addProd = false;
      },
      addProduct(){
       this.disabled = false;
        this.title = '新增项目';
        this.addProd = true;
        this.disabled = false;
      },
      onSearch() {
        if (this.createdTime && this.createdTime.length) {
@@ -284,19 +389,59 @@
      },
      getDataList(e) {
      },
      // prodDescSend(e){
      //    //文件上传
      //   this.payForm.prodDescImages = e.map((res) => {
      //     return res.filePath;
      //   });
      //   this.$refs.prodDescImagesIplaod.clearValidate();
      // },
      // productShowUSend(e){
      //   this.payForm.prodListImages = e.map((res) => {
      //     return res.filePath;
      //   });
      //   this.$refs.productShowUpload.clearValidate();
      // },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let {backFilePath,logoFilePath,titleFilePath,qyFilePath,ruleFilePath,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]}
            }else{
              data = {...this.ruleForm,backFilePath:backFilePath[0],logoFilePath:logoFilePath[0],titleFilePath:titleFilePath[0],qyFilePath:qyFilePath[0],ruleFilePath:ruleFilePath[0]}
            }
            method[projId?"projectUpdata":"projectAdd"](data).then(res=>{
              this.$message.success("创建成功");
              this.addProd = false;
              this.onSearch();
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      imgSet(e,id){
        let fileRef = id + "";
         //文件上传
        this.ruleForm[id] = e.map((res) => {
          return res.filePath;
        });
        this.$refs[fileRef].clearValidate();
      },
      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");
          this.ruleForm = body;
          this.$nextTick(()=>{ 
            this.addProd = true; 
          });
        })
      },
      setDefaultImg(url,type){
        let backArr = [url].map((n,index)=>{
          return {url:n,filePath:n,uid:type+index,fileId:type+index,fileName:n,name:n};
        });
        return backArr
      }
    }
  };
  </script>