From c51e1abe7e8b45187f841a7f1eef2f0a31ce0f86 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Tue, 9 Aug 2022 17:24:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 epmet-oper-web/src/mixins/view-module-post.js | 179 +++++++++++++
 .../modules/workPc/baobiao/customer-set.vue   | 239 ++++++++++++++++++
 .../views/modules/workPc/baobiao/index.vue    |  73 ++++++
 3 files changed, 491 insertions(+)
 create mode 100644 epmet-oper-web/src/mixins/view-module-post.js
 create mode 100644 epmet-oper-web/src/views/modules/workPc/baobiao/customer-set.vue
 create mode 100644 epmet-oper-web/src/views/modules/workPc/baobiao/index.vue

diff --git a/epmet-oper-web/src/mixins/view-module-post.js b/epmet-oper-web/src/mixins/view-module-post.js
new file mode 100644
index 0000000..bb036af
--- /dev/null
+++ b/epmet-oper-web/src/mixins/view-module-post.js
@@ -0,0 +1,179 @@
+import Cookies from 'js-cookie'
+import qs from 'qs'
+export default {
+  data() {
+    /* eslint-disable */
+    return {
+      // 设置属性
+      mixinViewModuleOptions: {
+        createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？
+        activatedIsNeed: false, // 此页面是否在激活（进入）时，调用查询数据列表接口？
+        getDataListURL: '', // 数据列表接口，API地址
+        getDataListIsPage: false, // 数据列表接口，是否需要分页？
+        deleteURL: '', // 删除接口，API地址
+        deleteIsBatch: false, // 删除接口，是否需要批量？
+        deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
+        exportURL: '' // 导出接口，API地址
+      },
+      // 默认属性
+      dataForm: {}, // 查询条件
+      dataList: [], // 数据列表
+      order: '', // 排序，asc／desc
+      orderField: '', // 排序，字段
+      page: 1, // 当前页码
+      limit: 10, // 每页数
+      total: 0, // 总条数
+      dataListLoading: false, // 数据列表，loading状态
+      dataListSelections: [], // 数据列表，多选项
+      addOrUpdateVisible: false // 新增／更新，弹窗visible状态
+    }
+    /* eslint-enable */
+  },
+  created() {
+    if (this.mixinViewModuleOptions.createdIsNeed) {
+      this.query()
+    }
+  },
+  activated() {
+    if (this.mixinViewModuleOptions.activatedIsNeed) {
+      this.query()
+    }
+  },
+  methods: {
+    // 获取数据列表
+    query() {
+      this.dataListLoading = true
+      this.$http
+        .post(this.mixinViewModuleOptions.getDataListURL, {
+          order: this.order,
+          orderField: this.orderField,
+          page: this.mixinViewModuleOptions.getDataListIsPage
+            ? this.page
+            : null,
+          limit: this.mixinViewModuleOptions.getDataListIsPage
+            ? this.limit
+            : null,
+          ...this.dataForm
+        })
+        .then(({ data: res }) => {
+          this.dataListLoading = false
+          if (res.code !== 0) {
+            this.dataList = []
+            this.total = 0
+            return this.$message.error(res.msg)
+          }
+          this.dataList = this.mixinViewModuleOptions.getDataListIsPage
+            ? res.data.list
+            : res.data
+          this.total = this.mixinViewModuleOptions.getDataListIsPage
+            ? res.data.total
+            : 0
+        })
+        .catch(() => {
+          this.dataListLoading = false
+        })
+    },
+    // 多选
+    dataListSelectionChangeHandle(val) {
+      this.dataListSelections = val
+    },
+    // 排序
+    dataListSortChangeHandle(data) {
+      if (!data.order || !data.prop) {
+        this.order = ''
+        this.orderField = ''
+        return false
+      }
+      this.order = data.order.replace(/ending$/, '')
+      this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
+      this.query()
+    },
+    // 分页, 每页条数
+    pageSizeChangeHandle(val) {
+      this.page = 1
+      this.limit = val
+      this.query()
+    },
+    // 分页, 当前页
+    pageCurrentChangeHandle(val) {
+      this.page = val
+      this.query()
+    },
+    getDataList: function () {
+      this.page = 1
+      this.query()
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.dataForm.id = id
+        this.$refs.addOrUpdate.init()
+      })
+    },
+    // 删除
+    deleteHandle(id) {
+      if (
+        this.mixinViewModuleOptions.deleteIsBatch &&
+        !id &&
+        this.dataListSelections.length <= 0
+      ) {
+        return this.$message({
+          message: this.$t('prompt.deleteBatch'),
+          type: 'warning',
+          duration: 500
+        })
+      }
+      this.$confirm(
+        this.$t('prompt.info', { handle: this.$t('delete') }),
+        this.$t('prompt.title'),
+        {
+          confirmButtonText: this.$t('confirm'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          this.$http
+            .delete(
+              `${this.mixinViewModuleOptions.deleteURL}${
+                this.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id
+              }`,
+              this.mixinViewModuleOptions.deleteIsBatch
+                ? {
+                    data: id
+                      ? [id]
+                      : this.dataListSelections.map(
+                          (item) =>
+                            item[this.mixinViewModuleOptions.deleteIsBatchKey]
+                        )
+                  }
+                : {}
+            )
+            .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.query()
+                }
+              })
+            })
+            .catch(() => {})
+        })
+        .catch(() => {})
+    },
+    // 导出
+    exportHandle() {
+      var params = qs.stringify({
+        token: Cookies.get('token'),
+        ...this.dataForm
+      })
+      window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportURL}?${params}`
+    }
+  }
+}
diff --git a/epmet-oper-web/src/views/modules/workPc/baobiao/customer-set.vue b/epmet-oper-web/src/views/modules/workPc/baobiao/customer-set.vue
new file mode 100644
index 0000000..7e5fd74
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/workPc/baobiao/customer-set.vue
@@ -0,0 +1,239 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    :title="'选择客户'"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    width="700px"
+    :top="diaTop"
+  >
+    <div class="customerDiv" :style="{ height: diaHeight + 'px' }">
+      <el-checkbox
+        :indeterminate="isIndeterminate"
+        v-model="checkAll"
+        @change="handleCheckAllChange"
+        >全选</el-checkbox
+      >
+
+      <div
+        class="customerItem"
+        :key="item.customerId"
+        v-for="(item, index) in customerList"
+      >
+        <el-checkbox
+          :key="index"
+          class="customerItem"
+          v-model="item.selected"
+          :label="item.customerId"
+          >{{ item.customerName }}</el-checkbox
+        >
+
+        <el-select
+          v-show="item.selected"
+          v-model="item.categoryKeyArr"
+          size="small"
+          multiple
+          collapse-tags
+          placeholder="请选择功能类别"
+        >
+          <el-option
+            v-for="item in categoryOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+
+        <el-button
+          class="item-btn"
+          v-if="item.selected"
+          style="margin-left: 20px"
+          type="text"
+          size="small"
+          @click="copyToAll(item)"
+          >应用到所有客户</el-button
+        >
+      </div>
+    </div>
+
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="save()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost, requestGet } from '@/js/dai/request'
+import { mapGetters } from 'vuex'
+
+let loading // 加载动画
+export default {
+  data() {
+    return {
+      visible: false,
+
+      elseParams: {}, //选中的表单id，从父组件传过来
+
+      categoryOptions: [],
+
+      customerList: [], //客户列表
+
+      isIndeterminate: true,
+      checkAll: false
+    }
+  },
+
+  computed: {
+    diaWidth() {
+      return this.resolution === 'small' ? 60 : 50
+    },
+    diaHeight() {
+      return this.resolution === 'small' ? 350 : 600
+    },
+    diaTop() {
+      return this.resolution === 'small' ? '30px' : '100px'
+    },
+    ...mapGetters(['clientHeight', 'resolution'])
+  },
+
+  mounted() {
+    this.getOptions()
+  },
+
+  methods: {
+    handleCheckAllChange(val) {
+      this.customerList.forEach((item) => {
+        item.selected = val
+      })
+      this.isIndeterminate = false
+    },
+
+    copyToAll(val) {
+      this.customerList.forEach((item) => {
+        item.categoryKeyArr = [...val.categoryKeyArr]
+      })
+    },
+
+    async init(row) {
+      console.log('1111111111', row)
+      const { reportId, customerList } = row
+      this.visible = true
+      this.elseParams = { reportId }
+      this.startLoading()
+
+      this.customerList = []
+
+      await this.getCustomerList()
+
+      customerList.forEach((item) => {
+        let same = this.customerList.find(
+          (item2) => item2.customerId == item.customerId
+        )
+        if (same) {
+          same.selected = true
+          same.categoryKeyArr.push(item.categoryKey)
+        }
+      })
+
+      this.endLoading()
+    },
+
+    //获取所有客户列表
+    async getCustomerList() {
+      const { data, code, msg } = await requestGet(
+        '/oper/crm/customer/getvalidcustomerlist',
+        {}
+      )
+      if (code === 0) {
+        this.customerList = data.map((item) => {
+          item.categoryKeyArr = []
+          item.selected = false
+          return item
+        })
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //获取所有客户列表
+    async getOptions() {
+      const { data, code, msg } = await requestPost('/sys/dict/data/dictlist', {
+        dictType: 'jmreport_category'
+      })
+      if (code === 0) {
+        this.categoryOptions = data
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async save() {
+      this.checkCustomerList = []
+      const url = '/oper/customize/icCustomerReport/edit'
+      const parmas = {
+        ...this.elseParams,
+        type: 'add',
+        customerList: this.customerList
+          .filter((item) => item.selected)
+          .map((item) => ({
+            customerId: item.customerId,
+            categoryKeys: item.categoryKeyArr
+          }))
+      }
+
+      const { data, code, msg } = await requestPost(url, parmas)
+
+      if (code === 0) {
+        this.$message.success('保存成功')
+        this.visible = false
+        this.$emit('refreshDataList')
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    // 开启加载动画
+    startLoading() {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading() {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.customerDiv {
+  margin-left: 100px;
+  overflow-y: scroll;
+}
+.customerItem {
+  margin: 20px;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  .item-btn {
+    visibility: hidden;
+  }
+  &:hover {
+    .item-btn {
+      visibility: visible;
+    }
+  }
+}
+
+.item_span {
+  margin-left: 20px;
+}
+</style>
diff --git a/epmet-oper-web/src/views/modules/workPc/baobiao/index.vue b/epmet-oper-web/src/views/modules/workPc/baobiao/index.vue
new file mode 100644
index 0000000..eb95aa3
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/workPc/baobiao/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__menu">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        row-key="id"
+        border
+        :height="tableHeight"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="reportName"
+          label="模板名称"
+          header-align="center"
+          min-width="150"
+        ></el-table-column>
+        <el-table-column
+          label="客户配置"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              size="small"
+              @click="showCustomerMenu(scope.row)"
+              >{{ '客户配置' }}</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 客户菜单配置 -->
+      <customer-set ref="customerForm" @refreshDataList="getDataList" />
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module-post'
+import { mapGetters } from 'vuex'
+import CustomerSet from './customer-set'
+
+export default {
+  mixins: [mixinViewModule],
+  data() {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/oper/customize/icCustomerReport/list'
+      },
+      customerFormVisible: false,
+      dataForm: {}
+    }
+  },
+  components: {
+    CustomerSet
+  },
+  computed: {
+    tableHeight() {
+      // return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220
+      return this.clientHeight - 210
+    },
+    ...mapGetters(['clientHeight', 'resolution'])
+  },
+  methods: {
+    showCustomerMenu(row) {
+      this.$refs['customerForm'].init(row)
+    }
+  }
+}
+</script>