From e8ff0145985f0f6ed8cb8ecfeaaa65c8587230b8 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Thu, 8 Dec 2022 13:36:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E8=80=83=E6=A0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppMicrodiskManage/AppMicrodiskManage.vue |  66 +++
 .../app/AppMicrodiskManage/components/Add.vue | 203 ++++++++
 .../AppMicrodiskManage/components/List.vue    | 464 ++++++++++++++++++
 3 files changed, 733 insertions(+)
 create mode 100644 project/hlj/app/AppMicrodiskManage/AppMicrodiskManage.vue
 create mode 100644 project/hlj/app/AppMicrodiskManage/components/Add.vue
 create mode 100644 project/hlj/app/AppMicrodiskManage/components/List.vue

diff --git a/project/hlj/app/AppMicrodiskManage/AppMicrodiskManage.vue b/project/hlj/app/AppMicrodiskManage/AppMicrodiskManage.vue
new file mode 100644
index 00000000..370a84d1
--- /dev/null
+++ b/project/hlj/app/AppMicrodiskManage/AppMicrodiskManage.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="doc-circulation ailist-wrapper">
+    <keep-alive :include="['List']">
+      <component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+  import List from './components/List'
+  import Add from './components/Add'
+
+  export default {
+    name: 'AppMicrodiskManage',
+    label: '微盘管理',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data () {
+      return {
+        component: 'List',
+        params: {},
+        include: []
+      }
+    },
+
+    components: {
+      Add,
+      List
+    },
+
+    mounted () {
+    },
+
+    methods: {
+      onChange (data) {
+        if (data.type === 'Add') {
+          this.component = 'Add'
+          this.params = data.params
+        }
+
+        if (data.type === 'list') {
+          this.component = 'List'
+          this.params = data.params
+
+          this.$nextTick(() => {
+            if (data.isRefresh) {
+              this.$refs.component.getList()
+            }
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .doc-circulation {
+    height: 100%;
+    background: #F3F6F9;
+    overflow: auto;
+  }
+</style>
diff --git a/project/hlj/app/AppMicrodiskManage/components/Add.vue b/project/hlj/app/AppMicrodiskManage/components/Add.vue
new file mode 100644
index 00000000..542f1cae
--- /dev/null
+++ b/project/hlj/app/AppMicrodiskManage/components/Add.vue
@@ -0,0 +1,203 @@
+<template>
+  <ai-detail>
+    <template slot="title">
+      <ai-title :title="id ? '编辑成员' : '添加成员'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      </ai-title>
+    </template>
+    <template slot="content">  
+      <el-form ref="form" :model="form" label-width="110px" label-position="right">
+      <ai-card title="个人信息">
+        <template #content>
+          <div class="ai-form">
+            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入姓名" show-word-limit v-model="form.name" :maxlength="10"></el-input>
+            </el-form-item>
+            <el-form-item label="账号" prop="id" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
+              <el-input size="small" :disabled="!!id" show-word-limit :maxlength="30" placeholder="成员唯一标识，设定以后不支持修改" v-model="form.id"></el-input>
+            </el-form-item>
+            <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, validator: validatorPhone, trigger: 'blur' }]">
+              <el-input size="small" placeholder="请输入手机号" show-word-limit :maxlength="11" v-model="form.mobile"></el-input>
+            </el-form-item>
+            <el-form-item label="性别" prop="gender">
+              <el-radio-group v-model="form.gender">
+                <el-radio label="1">男</el-radio>
+                <el-radio label="2">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="座机" prop="telephone">
+              <el-input size="small" placeholder="请输入座机" v-model="form.telephone"></el-input>
+            </el-form-item>
+            <el-form-item label="邮箱" prop="email">
+              <el-input size="small" placeholder="请输入邮箱" v-model="form.email"></el-input>
+            </el-form-item>
+            <el-form-item label="地址" style="width: 100%;" prop="address">
+              <el-input size="small" style="width: 100%;" show-word-limit :maxlength="30" placeholder="请输入地址" v-model="form.address"></el-input>
+            </el-form-item>
+          </div>
+        </template>
+      </ai-card>
+      <ai-card title="组织信息">
+        <template #content>
+          <el-form-item label="部门" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
+            <el-input size="small" placeholder="请选择..." disabled v-model="form.departmentName">
+              <ai-wechat-selecter slot="append" isStrictly :instance="instance" @change="onChange" v-model="department" isChooseUnit>
+                <el-button type="info">选择</el-button>
+              </ai-wechat-selecter>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="标签" style="width: 100%;" prop="tags">
+            <el-select size="small" v-model="form.tagIds" multiple placeholder="请选择标签">
+              <el-option
+                v-for="item in tagsList"
+                :key="item.id"
+                :label="item.tagname"
+                :value="item.id">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="职务" prop="position">
+            <el-input size="small" placeholder="请输入职务" v-model="form.position"></el-input>
+          </el-form-item>
+        </template>
+      </ai-card>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="confirm">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  export default {
+    name: 'Add',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      params: Object
+    },
+
+    data () {
+      const validatorPhone = function (rule, value, callback) {
+        if (value === '') {
+          callback(new Error('请输入手机号'))
+        } else if (!/^1\d{10}$/.test(value)) {
+          callback(new Error('手机号格式错误'))
+        } else {
+          callback()
+        }
+      }
+      return {
+        info: {},
+        department: [],
+        validatorPhone: validatorPhone,
+        form: {
+          position: '',
+          name: '',
+          email: '',
+          telephone: '',
+          gender: '',
+          mobile: '',
+          departmentName: '',
+          departmentIds: [],
+          tagIds: [],
+          id: ''
+        },
+        id: '',
+        tagsList: []
+      }
+    },
+
+    created () {
+      this.getTags()
+
+      if (this.params && this.params.departmentId && !this.params.id) {
+        this.department = [{
+          id: String(this.params.departmentId),
+          name: this.params.departmentName
+        }]
+        this.form.departmentIds = [this.params.departmentId]
+        this.form.departmentName = this.params.departmentName
+      }
+
+      if (this.params && this.params.id) {
+        this.id = this.params.id
+        this.getInfo(this.params.id)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.instance.post(`/app/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            const departmentNames = res.data.departmentNames.split(',')
+            this.department = res.data.departmentIdsStr.split(',').map((item, index) => {
+              return {
+                name: departmentNames[index],
+                id: item
+              }
+            })
+            this.form = {
+              ...res.data,
+              departmentName: res.data.departmentNames,
+              tagIds: res.data.tags.map(v => v.id),
+              departmentIds: res.data.departmentIdsStr.split(',')
+            }
+          }
+        })
+      },
+
+      onChange (e) {
+        if (e.length) {
+          this.form.departmentIds = e.map(v => v.id)
+          this.form.departmentName = e.map(v => v.name).join(',')
+        } else {
+          this.form.departmentIds = ''
+          this.form.departmentName = ''
+        }
+      },
+
+      getTags () {
+        this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
+          if (res.code == 0) {
+            this.tagsList = res.data
+          }
+        })
+      },
+
+      onClose () {
+        this.form.explain = ''
+      },
+
+      confirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const api = this.id ? '/app/wxcp/wxuser/update' : '/app/wxcp/wxuser/add'
+            this.instance.post(api, {
+              ...this.form
+            }).then(res => {
+              if (res.code == 0) {
+                this.$message.success('提交成功')
+                setTimeout(() => {
+                  this.cancel(true)
+                }, 600)
+              }
+            })
+          }
+        })
+      },
+
+      cancel (isRefresh) {
+        this.$emit('change', {
+          type: 'list',
+          isRefresh: !!isRefresh
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/project/hlj/app/AppMicrodiskManage/components/List.vue b/project/hlj/app/AppMicrodiskManage/components/List.vue
new file mode 100644
index 00000000..752adc33
--- /dev/null
+++ b/project/hlj/app/AppMicrodiskManage/components/List.vue
@@ -0,0 +1,464 @@
+<template>
+  <ai-list class="addressBook">
+    <template slot="title">
+      <ai-title title="微盘管理" isShowBottomBorder></ai-title>
+    </template>
+    <template #left>
+      <div class="addressBook-left">
+        <div class="addressBook-left__title">
+          <h2 class="tab-active">微盘目录</h2>
+        </div>
+        <div class="addressBook-left__list--title">
+          <el-input
+            size="mini"
+            placeholder="请输入微盘目录名称"
+            v-model="name"
+            clearable
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </div>
+        <div class="addressBook-left__list--wrapper">
+          <div class="addressBook-left__list">
+            <el-tree
+              :filter-node-method="filterNode"
+              ref="tree"
+              :props="defaultProps"
+              lazy
+              node-key="spaceid"
+              :load="loadNode"
+              :data="directoryList"
+              highlight-current
+              @node-contextmenu="nodeContextmenu"
+              :current-node-key="search.departmentId"
+              :default-expanded-keys="defaultExpanded"
+              :default-checked-keys="defaultChecked"
+              @current-change="onTreeChange">
+            </el-tree>
+            <ul
+              v-if="isShowMenu"
+              class="el-dropdown-menu el-popper"
+              :style="{top: menuInfo.y + 'px', left: menuInfo.x + 'px', position: 'fixed', zIndex: 2023}"
+              x-placement="top-end">
+              <li class="el-dropdown-menu__item" @click="handleTreeCommand('add', menuInfo.node)">添加子目录</li>
+              <li class="el-dropdown-menu__item" @click="handleTreeCommand('edit', menuInfo.node)">修改目录名称</li>
+              <li class="el-dropdown-menu__item" @click="handleTreeCommand('remove', menuInfo.node)">删除</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template slot="content">
+      <ai-search-bar class="search-bar">
+        <template #left>
+          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加成员</el-button>
+        </template>
+        <template slot="right">
+          <el-input
+            v-model="search.name"
+            size="small"
+            v-throttle="() => {search.current = 1, getList()}"
+            placeholder="请输入成员姓名、手机号或标签名称"
+            clearable
+            @clear="search.current = 1, search.name = '', getList()"
+            suffix-icon="iconfont iconSearch">
+          </el-input>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        style="margin-top: 6px;"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        @getList="getList">
+        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
+          <template slot-scope="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        width="590px"
+        :title="spaceid ? '修改目录名称' : '添加目录'"
+        @close="onClose"
+        @onConfirm="onConfirm">
+        <el-form ref="form" :model="form" label-width="110px" label-position="right">
+          <el-form-item label="目录名称" prop="folderName" :rules="[{ required: true, message: '请输入目录名称', trigger: 'blur' }]">
+            <el-input size="small" placeholder="请输入目录名称" show-word-limit :maxlength="30" v-model="form.folderName"></el-input>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  export default {
+    name: 'List',
+
+    props: {
+      instance: Function,
+      dict: Object
+    },
+
+    data() {
+      return {
+        isShowMenu: false,
+        menuInfo: {
+          x: '',
+          y: '',
+          node: {}
+        },
+        form: {
+          folderName: ''
+        },
+        spaceid: '',
+        fatherid: '',
+        search: {
+          name: '',
+          spaceid: '',
+          fatherid: ''
+        },
+        name: '',
+        isShow: false,
+        defaultChecked: [],
+        defaultExpanded: [],
+        currIndex: -1,
+        total: 0,
+        colConfigs: [
+          { prop: 'fileName', label: '名称' },
+          { prop: 'ctime', label: '文件创建时间', formart: v => v ? this.$moment(v * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' },
+          { prop: 'departmentNames', label: '创建人' }
+        ],
+        defaultProps: {
+          children: 'children',
+          label: 'fileName'
+        },
+        tableData: [],
+        directoryList: []
+      }
+    },
+
+    watch: {
+      name (val) {
+        this.$refs.tree.filter(val)
+      }
+    },
+
+    mounted () {
+      this.getList()
+      document.querySelector('html').addEventListener('click', this.bindEvent)
+    },
+
+    methods: {
+      loadNode (node, resolve) {
+        this.instance.post(`/app/wxwedrive/queryWedriveDirectory?spaceid=${node.data.spaceid || ''}&fatherid=${node.data.fileId || ''}`).then(res => {
+          if (res.code == 0) {
+            resolve(res.data)
+          }
+        })
+      },
+
+      bindEvent () {
+        this.isShowMenu = false
+      },
+
+      nodeContextmenu (e, node) {
+        this.isShowMenu = true
+        let y = e.y + 6
+        if (y + 202 > document.body.clientHeight) {
+          y = y - 202
+        }
+        this.menuInfo = {
+          x: e.x + 16, y,
+          node
+        }
+      },
+
+      handleTreeCommand (e, item) {
+        this.isShowMenu = false
+        this.spaceid = item.spaceid || ''
+        this.fatherid = item.fileId || ''
+
+        if (e === 'add') {
+          this.isShow = true
+        } else if (e === 'edit') {
+          this.form = {
+            ...item
+          }
+          this.isShow = true
+        } else if (e === 'remove') {
+          this.remove(item.fileId, item.spaceid)
+        }
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.instance.post(`/app/wxwedrive/createWedriveFloder`, null, {
+              params: {
+                ...this.form,
+                spaceid: this.spaceid,
+                fatherid: this.fatherid
+              }
+            }).then(res => {
+              this.search.spaceid = this.spaceid
+              this.search.fatherid = this.fatherid
+              if (res.code == 0) {
+                this.defaultChecked = [this.spaceid]
+                this.getList()
+                this.isShow = false
+                this.$message.success(this.departId ? '编辑成功' : '新增成功')
+              }
+            })
+          }
+        })
+      },
+
+      onClose () {
+        this.spaceid = ''
+        this.fatherid = ''
+        this.form.folderName = ''
+      },
+
+      onTreeChange (e) {
+        this.search.spaceid = e.spaceid || ''
+        this.search.fatherid = e.fileId || ''
+        this.isShowMenu = false
+
+        this.$nextTick(() => {
+          this.getList()
+        })
+      },
+
+      getList() {
+        this.instance.post(`/app/wxwedrive/queryWedriveDirectory`, null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.tableData = res.data
+            this.total = res.data.length
+          }
+        })
+      },
+
+      filterNode(value, data) {
+        if (!value) return true
+        return data.name.indexOf(value) !== -1
+      },
+
+      remove(id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/wxwedrive/fileDelete?id=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
+      toAdd(id) {
+        this.$emit('change', {
+          type: 'Add',
+          params: {
+            id: id || '',
+            departmentId: this.search.departmentId || '',
+            departmentName: this.departmentName || ''
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.addressBook {
+  .addressBook-table__btns {
+    display: flex;
+    align-items: center;
+  }
+
+  .tree-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+
+    .tree-name {
+      padding-right: 30px;
+    }
+
+    i {
+      position: absolute;
+      top: 50%;
+      right: 8px;
+      transform: translateY(-50%);
+      padding-right: 8px;
+      font-weight: normal;
+      color: #fff;
+    }
+  }
+
+  .el-button--mini, .el-button--mini.is-round {
+    height: 28px;
+    line-height: 28px;
+    padding: 0;
+    font-size: 12px;
+
+    :deep( span ){
+      margin-left: 0;
+    }
+  }
+
+  .addressBook-left__list--title {
+    display: flex;
+    align-items: center;
+    margin: 8px 8px 0;
+
+    .addressBook-left__list--search {
+      flex: 1;
+
+      :deep( input ){
+        width: 100%;
+      }
+    }
+
+    .el-button {
+      width: 84px;
+      flex-shrink: 1;
+      margin-right: 8px;
+    }
+  }
+
+  .addressBook-left {
+    width: 100%;
+    height: auto;
+    background: #FAFAFB;
+
+    .addressBook-left__title {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 40px;
+      background: #ffffff;
+
+      h2 {
+        flex: 1;
+        height: 100%;
+        line-height: 40px;
+        color: #222;
+        font-size: 14px;
+        text-align: center;
+        cursor: pointer;
+        border-bottom: 2px solid transparent;
+
+        &.tab-active {
+          color: #2266FF;
+          border-bottom: 2px solid #2266FF;
+        }
+      }
+    }
+
+    // ::-webkit-scrollbar {
+    //   width: 1px;
+    // }
+
+    .addressBook-left__list--wrapper {
+      height: calc(100% - 68px);
+      padding: 8px;
+    }
+
+    .addressBook-left__list {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+
+      :deep( .el-tree ){
+        width: fit-content;
+        min-width: 100%;
+      }
+
+      :deep( .el-scrollbar__wrap ){
+        margin-bottom: 0 !important;
+        overflow-x: hidden;
+
+        .el-scrollbar__view {
+          width: fit-content;
+          min-width: 100%;
+        }
+      }
+
+      span {
+        color: #222222;
+        font-size: 14px;
+      }
+
+      :deep( .el-tree ){
+        background: transparent;
+
+        .el-tree-node__expand-icon.is-leaf {
+          color: transparent !important;
+        }
+
+        .el-tree-node__content > .el-tree-node__expand-icon {
+          padding: 4px;
+        }
+
+        .el-tree-node__content {
+          height: 32px;
+        }
+
+        .el-tree__empty-text {
+          color: #222;
+          font-size: 14px;
+        }
+
+        .el-tree-node__children .el-tree-node__content {
+          height: 32px;
+        }
+
+        .el-tree-node__content:hover {
+          background: #E8EFFF;
+          color: #222222;
+          border-radius: 2px;
+        }
+
+        .is-current > .el-tree-node__content {
+          &:hover {
+            background: #2266FF;
+            color: #fff;
+          }
+
+          background: #2266FF;
+
+          span {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  :deep( .ai-list__content--right ){
+    flex: 1;
+    min-width: 0;
+    margin-left: 1px;
+    box-shadow: none;
+
+    .ai-list__content--right-wrapper {
+      width: 100%;
+    }
+  }
+
+}
+</style>