功能配置

epmet-oper-web/src/views/modules/customize/functionconfiguration.vue

@@ -0,0 +1,203 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-/oper/customize__homecomponent}">
+      <el-form :inline="true">
+          <el-form-item>
+            <el-input v-model="ruleForm.name" placeholder="请输入客户名称" clearable="true"></el-input>
+          </el-form-item>
+          <el-form-item>
+              <el-button type="primary" @click="submitForm(ruleForm)">查询</el-button>
+          </el-form-item>
+      </el-form>
+
+      <el-table :data="customerList" border style="width: 100%;">
+        <el-table-column label="客户名称" header-align="center" align="center" prop="customerName"></el-table-column>
+        <el-table-column label="logo" header-align="center" align="center" prop="logo">
+            <template slot-scope="scope">
+                <el-image style="width: 50px; height: 50px" :src="scope.row.logo" @click="addSrcList(scope.row.logo)" :preview-src-list="srcList"></el-image>
+            </template>
+        </el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button  type="text" size="small" @click="centerDialogVisible = true,customerize(scope.row.customerId)">功能配置</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+        <el-pagination
+                :current-page="pageNo"
+                :page-sizes="[10, 20, 50, 100]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                @size-change="pageSizeChangeHandle"
+                @current-change="pageCurrentChangeHandle">
+        </el-pagination>
+    </div>
+      <el-dialog :title="diaName" size="small" :visible.sync="centerDialogVisible">
+          <p>默认功能</p>
+              <el-table :data="defaultFunctionList" border style="width: 100%;" ref="defaultFunction" @selection-change="handleSelectionChangeDefault">
+                  <el-table-column type="selection" header-align="center" align="center" checked="true" width="50"></el-table-column>
+                  <el-table-column label="功能名称" header-align="center" align="center" prop="functionName"></el-table-column>
+              </el-table>
+          <p>客户定制化</p>
+              <el-table :data="customizedFunctionList" border style="width: 100%;" ref="customizeFunction" @selection-change="handleSelectionChangeCustomize">
+                  <el-table-column type="selection" header-align="center" align="center"  width="50"></el-table-column>
+                  <el-table-column header-align="center" align="center" prop="functionName"></el-table-column>
+              </el-table>
+                <div style="text-align: center">
+                  <el-button @click="centerDialogVisible = false">关闭</el-button>
+                  <el-button type="primary" @click="saveConfig">保存</el-button>
+                </div>
+      </el-dialog>
+  </el-card>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      diaName: '功能配置',
+      noImg: '暂无图片',
+      customerList: [],
+      input: '',
+      centerDialogVisible: false,
+      defaultFunctionList: [],
+      customizedFunctionList: [],
+      defaultStatus: [],
+      customizeStatus: [],
+      customerId: '',
+      pageNo: 1,
+      pageSize: 10,
+      ruleForm: { name: '' },
+      multiSelectedDefault: [],
+      multiSelectedCustomize: [],
+      defaultForm: [],
+      customizeForm: [],
+      total: '',
+      srcList: []
+    }
+  },
+  components: {
+
+  },
+  created () {
+    this.queryCustomerList()
+  },
+  methods: {
+    queryCustomerList () {
+      let params = {
+        customerName: '',
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      }
+      this.$http.post('/oper/crm/customer/pagequery', params).then(({ data: res }) => {
+        if (res.code === 0) {
+          this.customerList = res.data.list
+          this.total = res.data.total
+        }
+      })
+    },
+    submitForm (formName) {
+      let params = {
+        customerName: formName.name,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      }
+      this.$http.post('/oper/crm/customer/pagequery', params).then(({ data: res }) => {
+        if (res.code === 0) {
+          this.customerList = res.data.list
+        }
+      })
+    },
+    customerize (id) {
+      this.customerId = id
+      let params = {
+        customerId: id
+      }
+      this.$http.post('/oper/customize/customerfunction/customerfunctionlist', params).then(({ data: res }) => {
+        if (res.code === 0) {
+          this.defaultFunctionList = res.data.defaultFunctionList
+          this.$nextTick(() => {
+            this.defaultFunctionList.forEach(fun => {
+              if (fun.flag === true) {
+                this.$refs.defaultFunction.toggleRowSelection(fun)
+              }
+            })
+          })
+          this.customizedFunctionList = res.data.customizedFunctionList
+          this.$nextTick(() => {
+            this.customizedFunctionList.forEach(fun => {
+              if (fun.flag === true) {
+                this.$refs.customizeFunction.toggleRowSelection(fun)
+              }
+            })
+          })
+        }
+      })
+    },
+    saveConfig () {
+      if (this.multiSelectedDefault.length !== 0) {
+        this.multiSelectedDefault.forEach(defaultFun => {
+          this.defaultForm.push(defaultFun.functionId)
+        })
+      }
+      if (this.multiSelectedCustomize.length !== 0) {
+        this.multiSelectedCustomize.forEach(customizeFun => {
+          this.customizeForm.push(customizeFun.functionId)
+        })
+      }
+      if (this.defaultForm.length === 0) {
+        this.$message({
+          type: 'warning',
+          message: '至少保留一个默认功能'
+        })
+        return
+      }
+      let params = {
+        'customerId': this.customerId,
+        'defaultFunctionList': this.defaultForm,
+        'customizedFunctionList': this.customizeForm
+      }
+      this.$http.post('/oper/customize/customerfunction/savecustomerfunction', params).then(({ data: res }) => {
+        if (res.code === 0) {
+          this.$message({
+            type: 'success',
+            message: '保存成功'
+          })
+        } else {
+          this.$message({
+            type: 'warning',
+            message: '保存失败'
+          })
+        }
+        this.centerDialogVisible = false
+      }).catch(() => {
+        this.$message({
+          type: 'error',
+          message: '保存失败'
+        })
+      })
+      this.defaultForm = []
+      this.customizeForm = []
+    },
+    pageCurrentChangeHandle (val) {
+      this.pageNo = val
+      this.queryCustomerList()
+    },
+    pageSizeChangeHandle (val) {
+      this.pageSize = val
+      this.queryCustomerList()
+    },
+    handleSelectionChangeDefault (val) {
+      this.multiSelectedDefault = val
+    },
+    handleSelectionChangeCustomize (customizeVal) {
+      this.multiSelectedCustomize = customizeVal
+    },
+    addSrcList (url) {
+      this.srcList = []
+      this.srcList.push(url)
+    }
+  }
+}
+</script>