新增页面

src/components/sysindex.vue

@@ -184,6 +184,9 @@
           <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')">
+            <i class="el-icon-menu"></i><span>diy装修插件</span>
+          </li>
         </ul>
       </div>
     </div>

src/components/system/diyplug.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.PlugName" 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>
+      <button type="button" class="normalBtn" @click="CommonJump('setdiyplug',{})">设置diy插件</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="width: 50px; height: 50px; 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: "", //插件名称
+        },
+        dataList: [],
+        addMsg: {
+          PlugId: 0, //插件编号
+          PlugType: 1, //插件类型 
+          Id: '', //插件id
+          Name: '', //插件名称
+          Icon: "", //图标
+        },
+        PlugTypeList: [{
+            Id: 1,
+            Name: "基础组件"
+          },
+          {
+            Id: 2,
+            Name: "diy组件"
+          },
+          {
+            Id: 3,
+            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 = 1;
+        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

+<style>
+  .setDiyPlugDiv .query-box {
+    width: 100%;
+    padding: 0 0 20px;
+    border-bottom: 1px solid #ccc;
+    position: relative;
+    text-align: right;
+  }
+
+  .setDiyPlugDiv .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="setDiyPlugDiv">
+    <div class="query-box">
+      <button type="button" class="normalBtn" @click="setMiniProgramPage()">保存</button>
+      <button type="button" class="normalBtn" @click="CommonJump('diyplug',{})">插件中心</button>
+    </div>
+    <table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
+      <tr>
+        <th style="width:200px">插件类型</th>
+        <th>插件名称</th>
+      </tr>
+      <tr v-for="(item,index) in dataList" :key="index">
+        <td>
+          <el-checkbox v-model="item.IsChecked" :key="index" @change="ChangeItem(item)">{{item.Name}}
+          </el-checkbox>
+        </td>
+        <td style="text-align:left; padding-left:5px;">
+          <template v-for="(subItem,subIndex) in item.SubList">
+            <el-checkbox v-model="subItem.IsChecked" :key="subIndex">{{subItem.Name}}</el-checkbox>
+          </template>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loading: false,
+        dataList: [],
+        TenantId: 0, //商户Id
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      ChangeItem(item) {
+        if (item.SubList && item.SubList.length > 0) {
+          item.SubList.forEach(subItem => {
+            subItem.IsChecked = item.IsChecked;
+          })
+        }
+      },
+      //获取分页数据
+      getPageList() {
+        this.apipost("/api/MContent/GetTenantPlugList", {}, res => {
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data;
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //添加修改插件
+      setMiniProgramPage() {
+        var setArray = []; //新增修改的数组
+        if (this.dataList && this.dataList.length > 0) {
+          this.dataList.forEach(item => {
+            if (item.SubList && item.SubList.length > 0) {
+              item.SubList.forEach(subItem => {
+                if (subItem.IsChecked) {
+                  setArray.push({
+                    Id: 0,
+                    PlugId: subItem.PlugId,
+                    TenantId: this.TenantId
+                  });
+                }
+              })
+            }
+          })
+        }
+        if (setArray.length == 0) {
+          this.Info("请选择要操作的插件!");
+          return;
+        }
+        this.apipost("/api/MContent/SetTenantPlug", setArray, res => {
+          if (res.data.resultCode == 1) {
+            this.getPageList();
+            this.Success(res.data.message);
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+    },
+    mounted() {
+      this.TenantId = this.getLocalStorage().TenantId;
+      this.getPageList();
+    }
+  };
+
+</script>

src/router/index.js

@@ -70,6 +70,16 @@ export default new Router({
           name: 'setmarketingplug',
           component: resolve => require(['@/components/system/setmarketingplug'], resolve),
         },
+        {
+          path: '/diyplug', //diy装修插件
+          name: 'diyplug',
+          component: resolve => require(['@/components/system/diyplug'], resolve),
+        },
+        {
+          path: '/setdiyplug', //设置diy插件
+          name: 'setdiyplug',
+          component: resolve => require(['@/components/system/setdiyplug'], resolve),
+        },
       ]
     },
     {