From e39d41ec1a408b2aa4edea30cf67e7f2d2d2057c Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 16 Dec 2021 14:17:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/3.0.0/AppNavConfig/AppNavConfig.vue  |  40 +++
 .../3.0.0/AppNavConfig/components/List.vue    | 284 ++++++++++++++++++
 2 files changed, 324 insertions(+)
 create mode 100644 packages/3.0.0/AppNavConfig/AppNavConfig.vue
 create mode 100644 packages/3.0.0/AppNavConfig/components/List.vue

diff --git a/packages/3.0.0/AppNavConfig/AppNavConfig.vue b/packages/3.0.0/AppNavConfig/AppNavConfig.vue
new file mode 100644
index 00000000..65d9d304
--- /dev/null
+++ b/packages/3.0.0/AppNavConfig/AppNavConfig.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="AppShowProduce">
+    <List
+      slot="content"
+      :instance="instance"
+      :dict="dict"
+      :permissions="permissions">
+    </List>
+  </div>
+</template>
+
+<script>
+  import List from './components/List.vue'
+
+  export default {
+    name: 'AppNavConfig',
+    label: '导航配置',
+
+    components: {
+      List
+    },
+
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
+
+    data () {
+      return {
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AppShowProduce {
+    height: 100%;
+  }
+</style>
diff --git a/packages/3.0.0/AppNavConfig/components/List.vue b/packages/3.0.0/AppNavConfig/components/List.vue
new file mode 100644
index 00000000..547af565
--- /dev/null
+++ b/packages/3.0.0/AppNavConfig/components/List.vue
@@ -0,0 +1,284 @@
+<template>
+  <ai-list class="list">
+    <ai-title slot="title" title="导航配置" isShowBottomBorder></ai-title>
+    <template slot="content">
+      <ai-card title="首页功能">
+        <template #right>
+          <el-button size="small" type="primary" @click="eidt">{{ isEdit ? '退出编辑' : '编辑' }}</el-button>
+          <el-button size="small" @click="save" v-if="isEdit">保存</el-button>
+        </template>
+        <div slot="content" class="item-wrapper">
+          <div class="item" v-for="(item, i) in picked" :key="i">
+            <img :src="item.pictureUrl">
+            <i class="el-icon-remove icon" @click="removeChoose(i)" v-if="isEdit"></i>
+            <h2>{{ item.name }}</h2>
+          </div>
+          <ai-empty style="width: 100%" v-if="!picked.length"></ai-empty>
+        </div>
+      </ai-card>
+      <ai-card title="全部功能">
+        <template #right>
+          <el-button size="small" type="primary" @click="isShowAdd = true">新增应用</el-button>
+          <el-button size="small" type="danger" @click="isRemove = !isRemove">{{ isRemove ? '取消删除' : '删除应用' }}</el-button>
+        </template>
+        <div class="all" slot="content">
+          <div class="item-row" v-for="(group, index) in list" :key="index">
+            <h2>{{ group.name }}</h2>
+            <div class="item-wrapper">
+              <div class="item" v-for="(item, i) in group.list" :key="i">
+                <img :src="item.pictureUrl">
+                <i class="el-icon-error icon" @click="removeApp(item.id)" v-if="isRemove && item.type !== '0' && item.picked !== '1'"></i>
+                <h2>{{ item.name }}</h2>
+              </div>
+            </div>
+          </div>
+        </div>
+      </ai-card>
+      <ai-dialog
+        :visible.sync="isShowAdd"
+        width="680px"
+        height="580px"
+        :title="id ? '添加专题' : '编辑专题'"
+        @close="onClose"
+        @onConfirm="onConfirm">
+        <el-form ref="form" :model="form" label-width="110px" label-position="right">
+          <div class="ai-form" :model="form" label-width="110px" label-position="right">
+            <el-form-item label="应用名称" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入应用名称', trigger: 'blur' }]">
+              <el-input size="small" :maxlength="8" placeholder="请输入应用名称" v-model="form.name"></el-input>
+            </el-form-item>
+            <el-form-item label="应用模块" style="width: 100%;" prop="menuType" :rules="[{ required: true, message: '请选择应用模块', trigger: 'change' }]">
+              <ai-select
+                v-model="form.menuType"
+                :selectList="dict.getDict('homeConfigMenuType')"
+                @change="onChange"
+                laceholder="请选择应用模块">
+              </ai-select>
+            </el-form-item>
+            <el-form-item label="应用类型" style="width: 100%;" prop="type" :rules="[{ required: true, message: '请选择应用类型', trigger: 'change' }]">
+              <ai-select
+                v-model="form.type"
+                :selectList="typeDict"
+                @change="onChange"
+                laceholder="请选择应用类型">
+              </ai-select>
+            </el-form-item>
+            <el-form-item label="小程序appid" prop="appId" style="width: 100%;" v-if="form.type === '1'" :rules="[{ required: true, message: '请输入小程序appid', trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入小程序appid" v-model="form.appId"></el-input>
+            </el-form-item>
+            <el-form-item label="链接" prop="url" style="width: 100%;" v-if="form.type === '2'" :rules="[{ required: true, message: '请输入链接', trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入链接" v-model="form.url"></el-input>
+            </el-form-item>
+            <el-form-item label="图标" prop="pictureUrl" style="width: 100%;" :rules="[{ required: true, message: '请上传图标 ', trigger: 'change' }]">
+              <ai-uploader v-model="form.pictureUrl" :instance="instance" :limit="1"></ai-uploader>
+            </el-form-item>
+          </div>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        picked: [],
+        id: '',
+        isEdit: false,
+        isRemove: false,
+        form: {
+          type: '',
+          pictureUrl: [],
+          url: '',
+          name: '',
+          appId: ''
+        },
+        typeDict: [{
+          dictName: '外链小程序',
+          dictValue: '1'
+        }, {
+          dictName: '外链h5',
+          dictValue: '2'
+        }],
+        isShowAdd: false,
+        list: []
+      }
+    },
+
+    created () {
+      this.dict.load('homeConfigMenuType').then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList () {
+        this.instance.post(`/app/appminihomeconfig/listAll`).then(res => {
+          if (res.code == 0) {
+            this.picked = res.data.picked
+            this.list = Object.keys(res.data.all).map(item => {
+              return {
+                name: this.dict.getLabel('homeConfigMenuType', item),
+                list: res.data.all[item]
+              }
+            })
+          }
+        })
+      },
+
+      eidt () {
+        if (this.isEdit) {
+          this.$confirm('确定退出编辑？').then(() => {
+            this.isEdit = false
+          })
+
+          return false
+        }
+        this.isEdit = !this.isEdit
+      },
+
+      removeChoose (index) {
+        this.picked.splice(index, 1)
+      },
+
+      save () {
+        this.instance.post(`/app/appminihomeconfig/updatePick?ids=${this.picked.map(v => v.id).join(',')}`).then(res => {
+          if (res.code === 0) {
+            this.$message.success('保存成功')
+
+            this.getList()
+          }
+        })
+      },
+
+      onClose () {
+        this.form.type = ''
+        this.form.pictureUrl = []
+        this.form.url = ''
+        this.form.name = ''
+        this.form.appId = ''
+      },
+
+      onChange () {
+        this.form.url = ''
+        this.form.appId = ''
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/appminihomeconfig/addOrUpdate`, {
+              ...this.form,
+              id: this.id || '',
+              pictureUrl: this.form.pictureUrl[0].url
+            }).then(res => {
+              if (res.code === 0) {
+                this.$message.success('添加成功')
+                this.isShowAdd = false
+
+                this.getList()
+              }
+            })
+          }
+        })
+      },
+
+      removeApp (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appminihomeconfig/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.isRemove = false
+              this.getList()
+            }
+          })
+        })
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appapplicationinfo/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .list {
+    ::v-deep .ai-list__content {
+      padding: 0!important;
+
+      .ai-list__content--right-wrapper {
+        background: transparent!important;
+        box-shadow: none!important;
+        margin: 0!important;
+        padding: 12px 0 12px!important;
+      }
+    }
+
+    .all {
+      .item-row {
+        display: flex;
+
+        & > h2 {
+          margin-right: 40px;
+          font-weight: 500;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .item-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      flex: 1;
+      margin-bottom: 20px;
+
+      .icon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 11;
+        font-size: 24px;
+        color: red;
+        transform: translate(50%, -20%);
+
+        &:hover {
+          opacity: 0.6;
+          cursor: pointer;
+        }
+      }
+
+      .item {
+        position: relative;
+        margin: 0 16px 16px 0;
+        text-align: center;
+
+        img {
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+        }
+
+        h2 {
+          font-weight: normal;
+          font-size: 14px;
+          color: #666;
+        }
+      }
+    }
+  }
+</style>