From 38ace53cbe4cb4af0c853a6aa6ae91c1c7457ea0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E9=B9=8F=E9=A3=9E?= <lipengfei@outlook.com>
Date: Sat, 28 Mar 2020 16:33:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=97=A5=E5=BF=97=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/sys/resource-add-or-update.vue    | 307 ++++++++++++++++++
 src/views/modules/sys/resources-list.vue      | 117 +++++++
 2 files changed, 424 insertions(+)
 create mode 100644 src/views/modules/sys/resource-add-or-update.vue
 create mode 100644 src/views/modules/sys/resources-list.vue

diff --git a/src/views/modules/sys/resource-add-or-update.vue b/src/views/modules/sys/resource-add-or-update.vue
new file mode 100644
index 00000000..8bbde091
--- /dev/null
+++ b/src/views/modules/sys/resource-add-or-update.vue
@@ -0,0 +1,307 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      label-width="120px"
+    >
+      <el-form-item prop="resourceLabel" label="资源标签">
+        <el-input
+          v-model="dataForm.resourceLabel"
+          placeholder="请输入资源标签"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="resourceType" label="资源类型">
+        <el-input
+          v-model="dataForm.resourceType"
+          placeholder="请输入资源类型"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="resourceCode" label="资源编码">
+        <el-input
+                v-model="dataForm.resourceCode"
+                placeholder="请输入资源编码"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item
+        prop="parentName"
+        :label="$t('menu.parentName')"
+        class="menu-list"
+      >
+        <el-popover
+          v-model="resourceListVisible"
+          ref="resourceListPopover"
+          placement="bottom-start"
+          trigger="click"
+        >
+          <el-tree
+            :data="resourceList"
+            :props="{ label: 'resourceLabel', children: 'children' }"
+            node-key="id"
+            ref="resourceListTree"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            accordion
+            @current-change="resourceListTreeCurrentChangeHandle"
+          >
+          </el-tree>
+        </el-popover>
+        <el-input
+          v-model="dataForm.parentName"
+          v-popover:resourceListPopover
+          :readonly="true"
+          placeholder="上级资源"
+        >
+          <i
+            v-if="dataForm.pid !== '0'"
+            slot="suffix"
+            @click.stop="deptListTreeSetDefaultHandle()"
+            class="el-icon-circle-close el-input__icon"
+          ></i>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="sort" label="排序">
+        <el-input-number
+          v-model="dataForm.sort"
+          controls-position="right"
+          :min="0"
+          label="排序"
+        ></el-input-number>
+      </el-form-item>
+
+      <el-form-item prop="totalDescribe" label="统计描述">
+        <el-input v-model="dataForm.totalDescribe" placeholder="统计描述"></el-input>
+        <font color="gray">需要在动词前用{0}进行间隔！例：学校{0}组织春游。</font>
+      </el-form-item>
+      <el-form-item prop="showFlag"
+                    label="是否显示"
+                    size="mini">
+        <el-radio-group v-model="dataForm.showFlag">
+          <el-radio label="0">否</el-radio>
+          <el-radio label="1">是</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{
+        $t('confirm')
+      }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import debounce from 'lodash/debounce'
+import { getIconList } from '@/utils'
+export default {
+  data () {
+    return {
+      visible: false,
+      resourceList: [],
+      resourceListVisible: false,
+      dataForm: {
+        id: '',
+        pid: '0',
+        parentName: '',
+        sort: 0,
+        resourceLabel: '',
+        resourceType: '',
+        resourceCode: '',
+        totalDescribe: '',
+        showFlag: '0'
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        name: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
+        ],
+        parentName: [
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'change'
+          }
+        ]
+      }
+    }
+  },
+  watch: {
+    'dataForm.type' (val) {
+      this.$refs['dataForm'].clearValidate()
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.dataForm.parentName = '一级资源'
+        this.dataForm.resourceList = []
+        this.getResourceList().then(() => {
+          if (this.dataForm.id) {
+            this.getInfo()
+          }
+        })
+      })
+    },
+    // 获取菜单列表
+    getResourceList () {
+      return this.$http
+        .get('/workRecord/resourcesdictionary/list')
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.resourceList = res.data
+        })
+        .catch(() => {})
+    },
+    // 获取信息
+    getInfo () {
+      this.$http
+        .get(`/workRecord/resourcesdictionary/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          console.log('开始执行方法')
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data
+          }
+          if (this.dataForm.pid === '0') {
+            return this.deptListTreeSetDefaultHandle()
+          }
+          this.$refs.resourceListTree.setCurrentKey(this.dataForm.pid)
+        })
+        .catch(() => {})
+    },
+    // 上级菜单树, 设置默认值
+    deptListTreeSetDefaultHandle () {
+      this.dataForm.pid = '0'
+      this.dataForm.parentName = '一级资源'
+    },
+    // 上级菜单树, 选中
+    resourceListTreeCurrentChangeHandle (data) {
+      this.dataForm.pid = data.id
+      this.dataForm.parentName = data.resourceLabel
+      this.resourceListVisible = false
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs['dataForm'].validate(valid => {
+          if (!valid) {
+            return false
+          }
+          this.$http[!this.dataForm.id ? 'post' : 'put'](
+            '/workRecord/resourcesdictionary',
+            this.dataForm
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg)
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+            .catch(() => {})
+        })
+      },
+      1000,
+      { leading: true, trailing: false }
+    )
+  }
+}
+</script>
+
+<style lang="scss">
+.mod-sys__menu {
+  .resource-list {
+    .el-select .el-input__inner {
+      min-width: 110px;
+      text-align: center;
+    }
+  }
+  .menu-list,
+  .icon-list {
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+  &-icon-popover {
+    width: 458px;
+    overflow: hidden;
+  }
+  &-icon-inner {
+    width: 478px;
+    max-height: 258px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  &-icon-list {
+    width: 458px;
+    padding: 0;
+    margin: -8px 0 0 -8px;
+    > .el-button {
+      padding: 8px;
+      margin: 8px 0 0 8px;
+      > span {
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+      }
+    }
+  }
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 378px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 300px;
+    height: 178px;
+    display: block;
+  }
+}
+</style>
diff --git a/src/views/modules/sys/resources-list.vue b/src/views/modules/sys/resources-list.vue
new file mode 100644
index 00000000..2d31af82
--- /dev/null
+++ b/src/views/modules/sys/resources-list.vue
@@ -0,0 +1,117 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__menu">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('workRecord:resource:save')"
+            type="primary"
+            @click="addOrUpdateHandle()"
+            >{{ $t('add') }}</el-button
+          >
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        style="width: 100%;"
+      >
+        <table-tree-column
+          prop="resourceLabel"
+          label="资源名称"
+          header-align="center"
+        ></table-tree-column>
+        <el-table-column
+          prop="resourceCode"
+          label="资源编码"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+                prop="resourceType"
+                label="资源类型"
+                header-align="center"
+                align="center"
+        ></el-table-column>
+        <el-table-column
+                prop="sort"
+                label="排序"
+                header-align="center"
+                align="center"
+        ></el-table-column>
+        <el-table-column
+                prop="showFlag"
+                label="是否显示"
+                header-align="center"
+                align="center"
+                :formatter="showFlagFormatter"
+        ></el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-if="$hasPermission('sys:menu:update')"
+              type="text"
+              size="small"
+              @click="addOrUpdateHandle(scope.row.id)"
+              >{{ $t('update') }}</el-button
+            >
+            <el-button
+              v-if="$hasPermission('sys:menu:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle(scope.row.id)"
+              >{{ $t('delete') }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import TableTreeColumn from '@/components/table-tree-column'
+import AddOrUpdate from './resource-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/workRecord/resourcesdictionary/list',
+        deleteURL: '/workRecord/resourcesdictionary'
+      }
+    }
+  },
+  components: {
+    TableTreeColumn,
+    AddOrUpdate
+  },
+  methods: {
+    showFlagFormatter: function (row, column) {
+      if (row.showFlag === '0') {
+        return '否'
+      } else if (row.showFlag === '1') {
+        return '是'
+      }
+    }
+  }
+}
+</script>