添加规则模板页

long

2021-06-07 133cfa50d6429504b6c18a36c20472a6a872805a

添加规则模板页

 src/components_simple/UploadSingleVideo.vue

@@ -86,7 +86,7 @@
      const formData = new FormData()
      formData.append('file', file)
      this.postFN({
        url: 'admin/image/upload?type=1',
        url: 'admin/image/upload?folderCode=Video',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {

 src/icons/svg/agreement.svg

New file
@@ -0,0 +1 @@
<svg t="1606903520459" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13206" width="40" height="40"><path d="M600.76158 68.191078 245.714238 68.191078c-49.040926 0-88.317465 39.720653-88.317465 88.76158l-0.444115 710.09366c0 49.040926 39.277562 88.76158 88.317465 88.76158l533.014616 0c49.040926 0 88.76158-39.720653 88.76158-88.76158L867.046319 334.476841 600.76158 68.191078zM689.523159 778.284739 334.475817 778.284739l0-88.76158 355.047342 0L689.523159 778.284739zM689.523159 600.76158 334.475817 600.76158l0-88.76158 355.047342 0L689.523159 600.76158zM556.38079 378.857631 556.38079 134.762263 800.475134 378.857631 556.38079 378.857631z" p-id="13207"></path></svg>

 src/mixins/bannerOpts.js

@@ -29,7 +29,7 @@
                label: '体验版（trial）', value: 'trial'
            },{
                label: '正式版（release）', value: 'release'
            }],
      }]
        }
    }
}

 src/pages/agreement/index.vue

New file
@@ -0,0 +1,156 @@
<!-- 文档编辑 -->
<template>
  <div class="app-container">
    <el-form ref="agreementForm" label-position="left" :model="mData" label-width="150px" :rules="rules">
      <el-form-item v-if="haveTitle" label="标题：">
        <!-- <el-input v-model="mData.title" placeholder="请输入标题" class="com-edit-input" /> -->
        <div class="com-edit-input">{{ titleOptions[type-1] }}</div>
      </el-form-item>
      <el-form-item v-if="haveContent" label="文档详情：" prop="content">
        <WangEnduit :catchdata="catchData" :content="mData.content" :rangenum="rangenum" />
      </el-form-item>
    </el-form>
    <div class="com-edit-bottom-btns flex flex-align-center">
      <el-button size="small" @click="jumpBack">取消</el-button>
      <el-button type="primary" size="small" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
import WangEnduit from '@/components/WangEnduit' // 富文本
export default {
  name: 'Agreement',
  components: { WangEnduit },
  mixins: [mixin_upload],
  data() {
    return {
      type: this.$route.meta.type, // 协议类型
      // 富文本
      rangenum: null,

      titleOptions: ['报价公告及违规规则', '竞价平台中标原则及公告', '操作流程说明'],

      mData: {
        title: '', // 标题
        content: '' // 富文本
      },

      // 表单校验
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'change' }
        ],
        content: [
          { required: true, message: '文档详情不能为空' }
        ],
        uploadImgs: [
          { required: true, message: '请选择图片', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    haveTitle() {
      return true
    },
    haveContent() {
      return true
    }
  },
  watch: {
    $route() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getAgreementData()
    },

    // 获取文章详情
    getAgreementData() {
      this.postFN({
        url: 'admin/sysTextExplain/detail',
        params: { type: this.type },
        udData: {},
        mockData: {
          code: 100, msg: '',
          data: {
            id: 'xxx',
            content: '<p>文本</p>'
          }
        }
      }, (inf) => {
        if (inf) this.$set(this.mData, 'content', inf.content || '')
        // 清空富文本
        this.rangenum = null
      })
    },

    // 富文本相关
    // 富文本编辑器的内容赋值
    catchData(content) {
      if (content === '<p><br></p>') content = ''
      try {
        const currentRange = window.getSelection().getRangeAt(0)
        this.rangenum = currentRange
      } catch (e) {
        //
      }
      this.mData.content = content
      this.$refs.agreementForm.validateField('content')
    },
    // 富文本相关

    jumpBack() {
      this.$router.go(-1)
    },

    // 表单验证
    submit() {
      this.$refs['agreementForm'].validate(valid => {
        if (valid) {
          this.submitReq()
        }
      })
    },
    // 提交
    submitReq() {
      var { mData } = this
      var params = {
        type: this.type,
        // title: mData.title,
        content: mData.content
      }

      if (!this.haveContent) {
        params.content = '无'
      }
      // if (!this.haveTitle) {
      //   params.title = '无'
      // }

      this.postFN({
        url: 'admin/sysTextExplain/edit',
        params: params,
        mockData: {
          code: 100,
          msg: '',
          data: {}
        }
      }, () => {
        this.$messageSuc('保存成功')
      })
    }
  }
}
</script>

<style lang="less">

</style>

 src/pages/login/index.vue

@@ -223,7 +223,7 @@
                name: '潘多拉的臭嘴', // 用户名称
                // arr: ['sys_admin_see'], // 权限列表
                arr: ['sys_admin_see', 'sys_admin_add', 'sys_admin_edit', 'sys_admin_del', 'sys_admin_role_see', 'sys_admin_role_add', 'sys_admin_role_edit', 'sys_admin_role_del', 'corp_user_schedule_see', 'corp_user_schedule_add', 'corp_user_schedule_edit', 'corp_user_schedule_del', 'user_mp_banner_see', 'user_mp_banner_add', 'user_mp_banner_edit', 'user_mp_banner_del', 'shop_see', 'shop_add', 'shop_edit', 'shop_del', 'shop_device', 'corp_user_see', 'corp_user_add', 'corp_user_edit', 'corp_user_del', 'change_assistant_see', 'ser_pro_material_see', 'service_project_see', 'service_project_add', 'service_project_edit', 'service_project_del', 'service_topic_see', 'service_topic_add', 'service_topic_edit', 'service_topic_del', 'service_project_order_see', 'service_project_order_edit', 'goods_type_see', 'goods_type_add', 'goods_type_edit', 'goods_type_del', 'goods_see', 'goods_add', 'goods_edit', 'goods_del', 'goods_inventory', 'goods_order_see', 'goods_order_edit', 'goods_index_banner_see', 'goods_index_banner_add', 'goods_index_banner_edit', 'goods_index_banner_del', 'user_see', 'user_edit', 'user_cash_see', 'user_cash_edit', 'distribute_relate', 'distribute_order', 'document_edit', 'operation_see',
                  'coupon_see', 'coupon_add', 'coupon_edit', 'coupon_del', 'activity_see', 'activity_add', 'activity_edit', 'activity_del', 'banner_see', 'banner_add', 'banner_edit', 'banner_del'
                  'coupon_see', 'coupon_add', 'coupon_edit', 'coupon_del', 'activity_see', 'activity_add', 'activity_edit', 'activity_del', 'banner_see', 'banner_add', 'banner_edit', 'banner_del', 'sys_text_explain_edit'
                ]
              }
            }

 src/pages/system/banner.vue

@@ -68,7 +68,7 @@
            <!-- 尺寸 -->
            轮播图：<br><span style="color: #999;font-size: 12px">(xxx*xxx像素)</span>
          </span>
          <!-- 上传图片组件(多图) -->
          <!-- 上传图片组件(单图) -->
          <UploadSingleImg
            ref="refUploadImg"
            v-model="dialogData.uploadImgs"

 src/pages/system/basic.vue

@@ -13,22 +13,11 @@
          分享图片：<br><span>(500*400像素)</span>
        </span>
        <!-- 上传图片组件(单图) -->
        <el-upload
          ref="refUploadShareImg"
          :auto-upload="false"
          list-type="picture-card"
          :class="{disabled:uploadDisabled}"
          action="#"
          :limit="1"
          :file-list="basicData.uploadShareImgs"
          :on-change="addUploadFiles"
          :on-remove="delUploadFiles"
          :http-request="uploadFileHandle"
          :on-preview="uploadPreview"
          :before-upload="beforeUploadImg"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <UploadSingleImg
          ref="refUploadImg"
          v-model="dialogData.uploadShareImgs"
          @change.capture="$refs['basicForm'].clearValidate()"
        />
      </el-form-item>
    </el-form>

@@ -46,9 +35,10 @@

<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
import UploadSingleImg from '@/components_simple/UploadSingleImg'
export default {
  components: {},
  mixins: [mixin_upload],
  mixins: [mixin_upload, UploadSingleImg],
  data() {
    return {
      basicData: {
@@ -65,11 +55,6 @@
          required: true, message: '请选择图片'
        }]
      }
    }
  },
  computed: {
    uploadDisabled() {
      return this.basicData.uploadShareImgs.length > 0
    }
  },
  mounted() {
@@ -103,61 +88,13 @@
      this.$router.go(-1)
    },

    // 上传支付文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
      }
      return isImg
    },
    // 增加文件
    addUploadFiles(file) {
      this.basicData.uploadShareImgs = [file]
    },
    // 删除文件
    delUploadFiles(file, fileList) {
      this.basicData.uploadShareImgs = fileList
    },
    // 执行上传单文件
    runUploadFiles(cb) {
      if (this.checkNeedUpload(this.basicData.uploadShareImgs)) {
        this.$refs.refUploadShareImg.submit()
      } else {
        cb && cb()
      }
    },
    // 上传分享图
    uploadFileHandle(res) {
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      console.log(formData)
      this.postFN({
        url: 'admin/image/upload',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'xxx'
          }
        }
      }, (inf) => {
        this.basicData.shareImg = inf.imgUrl
        // this.$refs.refUploadShareImg.clearFiles();
        this.submitReq()
      })
    },
    // 上传支付文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

    // 提交编辑
    submit() {
      this.$refs['basicForm'].validate(valid => {
        if (valid) {
          this.runUploadFiles(() => {
          // 上传图片
          this.$refs.refUploadImg.runUploadImg((imgUrl) => {
            imgUrl && this.$set(this.dialogData, 'shareImg', imgUrl)
            this.submitReq()
          })
        }

 src/router/agreement_router.js

New file
@@ -0,0 +1,37 @@
// 路由配置文件
import Layout from '@/layout'

export default {
  path: '/agreement',
  component: Layout,
  redirect: 'noRedirect',
  name: 'agreement',
  meta: {
    title: '文档说明',
    icon: 'agreement'
  },
  children: [
    {
      path: 'index0',
      component: () => import('@/pages/agreement/index'), // Parent router-view
      name: 'agreement0',
      meta: { title: '报价公告及违规规则', type: 1 },
      auth: 'sys_text_explain_edit'
    },
    {
      path: 'index1',
      component: () => import('@/pages/agreement/index'), // Parent router-view
      name: 'agreement1',
      meta: { title: '竞价平台中标原则及公告', type: 2 },
      auth: 'sys_text_explain_edit'
    },
    {
      path: 'index2',
      component: () => import('@/pages/agreement/index'), // Parent router-view
      name: 'agreement2',
      meta: { title: '操作流程说明', type: 3 },
      auth: 'sys_text_explain_edit'
    }
  ]
}


 src/router/index.js

@@ -9,6 +9,7 @@
import demo_router from './demo_router'
import system_router from './system_router'
import op_router from './op_router'
import agreement_router from './agreement_router'

/**
 * 注:子菜单只出现在路线子时。长度> = 1
@@ -61,6 +62,7 @@

  system_router,
  demo_router,
  agreement_router,

  {
    path: 'external-link',