新增页面

src/components/sallCenter/templateEdit.vue

@@ -949,7 +949,7 @@ export default {
     },
     //获取左侧菜单
     GetPlugInList() {
-      this.apipost("/api/Tenant/GetPlugInList", {}, (res) => {
+      this.apipost("/api/Tenant/GetPlugInList", {QPlugTypeStr:"1,2,3"}, (res) => {
         if (res.data.resultCode == 1) {
           this.allComponents = res.data.data;
         } else {

src/components/sysindex.vue

@@ -178,15 +178,22 @@
           <li class="menu_item" :class="{'Fchecked':isChecked=='/menu'}" @click="isChecked='/menu',CommonJump('menu')">
             <i class="el-icon-menu"></i><span>商城菜单</span>
           </li>
-          <li class="menu_item" :class="{'Fchecked':isChecked=='/minimenu'}" @click="isChecked='/minimenu',CommonJump('minimenu')">
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/minimenu'}"
+            @click="isChecked='/minimenu',CommonJump('minimenu')">
             <i class="el-icon-menu"></i><span>小程序菜单</span>
           </li>
-          <li class="menu_item" :class="{'Fchecked':isChecked=='/pluglist'}" @click="isChecked='/pluglist',CommonJump('pluglist')">
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/pluglist'}"
+            @click="isChecked='/pluglist',CommonJump('pluglist')">
             <i class="el-icon-menu"></i><span>营销插件</span>
           </li>
-            <li class="menu_item" :class="{'Fchecked':isChecked=='/diyplug'}" @click="isChecked='/diyplug',CommonJump('diyplug')">
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/diyplug'}"
+            @click="isChecked='/diyplug',CommonJump('diyplug')">
             <i class="el-icon-menu"></i><span>diy装修插件</span>
           </li>
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/formplug'}"
+            @click="isChecked='/formplug',CommonJump('formplug')">
+            <i class="el-icon-menu"></i><span>表单组件</span>
+          </li>
         </ul>
       </div>
     </div>
@@ -238,7 +245,7 @@
     },
     created() {
       this.currentUser = this.getLocalStorage();
-      this.isChecked=this.$route.path;
+      this.isChecked = this.$route.path;
     },
     methods: {},
     mounted() {

src/components/system/diyplug.vue

@@ -101,7 +101,8 @@
         msg: {
           pageIndex: 1,
           pageSize: 15,
-          PlugName: "", //插件名称
+          PlugName: "", //插件名称,
+          QPlugTypeStr:"1,2,3",//1-基础组件,2-营销组件,3-其它组件
         },
         dataList: [],
         addMsg: {

src/components/system/formplug.vue

+<style>
+  .DiyPluglistDiv .query-box {
+    width: 100%;
+    padding: 0 0 20px;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+  }
+
+  .DiyPluglistDiv .normalBtn {
+    color: #fff;
+    padding: 0 15px;
+    height: 30px;
+    background: #e95252;
+    border: 1px solid #e95252;
+    cursor: pointer;
+    border-radius: 15px;
+    margin-left: 10px;
+    outline: none;
+  }
+
+</style>
+<template>
+  <div class="DiyPluglistDiv">
+    <div class="query-box">
+      名称： <el-input type="text" style="width:234px;" size="small" v-model="msg.Name" clearable
+        @keyup.enter.native="msg.pageIndex=1,getPageList()" @clear="msg.pageIndex=1,getPageList()"></el-input>
+      <button type="button" class="normalBtn"
+        @click="plugTitle='新增diy插件',marketingPlugDialog=true,resetMsg()">新增</button>
+      
+    </div>
+    <table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
+      <tr>
+        <th>编号</th>
+        <th>类型</th>
+        <th>名称</th>
+        <th>Id</th>
+        <th>图标</th>
+        <th>状态</th>
+        <th>操作</th>
+      </tr>
+      <tr v-for="(item,index) in dataList" :key="index">
+        <td>{{item.PlugId}}</td>
+        <td>{{item.GroupName}}</td>
+        <td>{{item.Name}}</td>
+        <td>{{item.Id}}</td>
+        <td>
+          <img :src="item.Icon" style="height: 30px; display: block; padding-left:5px;">
+        </td>
+        <td>
+          <el-switch v-model="item.Status" active-color="#409EFF" :active-value="0" :inactive-value="1"
+            @change="delDiyPlug(item)">
+          </el-switch>
+        </td>
+        <td>
+          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
+            <el-button type="primary" icon="el-icon-edit" @click="getDiyPlug(item.PlugId)" circle style="padding:6px;">
+            </el-button>
+          </el-tooltip>
+        </td>
+      </tr>
+    </table>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
+      v-if="dataList.length>0" layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
+    </el-pagination>
+
+    <!-- 新增diy插件 -->
+    <el-dialog :title="plugTitle" :visible.sync="marketingPlugDialog" width="500px">
+      <el-form :model="addMsg" ref="addMsg" label-width="150px">
+        <el-form-item label="插件类型">
+          <el-select style="width:234px" size="small" v-model="addMsg.PlugType">
+            <el-option v-for="(item) in PlugTypeList" :label="item.Name" :key="item.Id" :value="item.Id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="插件名称">
+          <el-input type="text" style="width:234px" size="small" maxlength="50" v-model="addMsg.Name"></el-input>
+        </el-form-item>
+        <el-form-item label="Id">
+          <el-input type="text" style="width:234px" size="small" maxlength="50" v-model="addMsg.Id"></el-input>
+        </el-form-item>
+        <el-form-item label="图片地址">
+          <el-input type="textarea" rows="4" style="width:234px" size="small" maxlength="255" v-model="addMsg.Icon">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="marketingPlugDialog = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="submitForm('addMsg')">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        marketingPlugDialog: false,
+        currentPage: 1,
+        total: 0,
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+          PlugName: "", //插件名称
+          QPlugTypeStr: "4", //表单组件
+        },
+        dataList: [],
+        addMsg: {
+          PlugId: 0, //插件编号
+          PlugType: 4, //插件类型 
+          Id: '', //插件id
+          Name: '', //插件名称
+          Icon: "", //图标
+        },
+        PlugTypeList: [{
+            Id: 4,
+            Name: "表单组件"
+          },
+
+        ],
+        plugTitle: "新增diy插件",
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getPageList();
+      },
+      submitForm(addMsg) {
+        //提交创建、修改diy插件
+        this.$refs[addMsg].validate(valid => {
+          if (valid) {
+            this.addDiyPlug();
+          } else {
+            return false;
+          }
+        });
+      },
+      //重置参数
+      resetMsg() {
+        this.addMsg.PlugId = 0;
+        this.addMsg.PlugType = 4;
+        this.addMsg.Id = "";
+        this.addMsg.Name = "";
+        this.addMsg.Icon = "";
+      },
+      //获取分页数据
+      getPageList() {
+        this.apipost("/api/MContent/GetPlugInPage", this.msg, res => {
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data.pageData;
+            this.total = res.data.data.count;
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //添加修改diy插件
+      addDiyPlug() {
+        this.apipost("/api/MContent/SetPlugIn", this.addMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.getPageList();
+            this.marketingPlugDialog = false;
+            this.Success(res.data.message);
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //根据编号获取diy插件
+      getDiyPlug(Id) {
+        this.apipost("/api/MContent/GetPlugIn", {
+          PlugId: Id
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.addMsg = res.data.data;
+            this.marketingPlugDialog = true;
+            this.plugTitle = "修改diy插件";
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //修改diy插件状态
+      delDiyPlug(item) {
+        var that = this;
+        var tipMsg = "";
+        if (item.Status == 0) {
+          tipMsg = "是否启用此插件?";
+        } else {
+          tipMsg = "是否禁用此插件?";
+        }
+        that.Confirm(tipMsg, function () {
+          that.apipost("/api/MContent/SetPlugInStatus", {
+            PlugId: item.PlugId,
+            Status: item.Status
+          }, res => {
+            if (res.data.resultCode == 1) {
+              that.Success(res.data.message);
+              that.getPageList();
+            } else {
+              that.Info(res.data.message);
+            }
+          })
+        });
+      }
+    },
+    mounted() {
+      this.getPageList();
+    }
+  };
+
+</script>

src/components/system/setdiyplug.vue

@@ -67,7 +67,9 @@
       },
       //获取分页数据
       getPageList() {
-        this.apipost("/api/MContent/GetTenantPlugList", {}, res => {
+        this.apipost("/api/MContent/GetTenantPlugList", {
+          QPlugTypeStr: "1,2,3"
+        }, res => {
           if (res.data.resultCode == 1) {
             this.dataList = res.data.data;
           } else {

src/router/index.js

@@ -80,6 +80,11 @@ export default new Router({
       name: 'setdiyplug',
       component: resolve => require(['@/components/system/setdiyplug'], resolve),
     },
+    {
+      path: '/formplug', //表单组件
+      name: 'formplug',
+      component: resolve => require(['@/components/system/formplug'], resolve),
+    },
     ]
   },
   {