From 78fd9a53b246d8419174716c8ae79056f064933d Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Mon, 7 Mar 2022 14:38:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=9A=E5=91=98=E9=A3=8E=E9=87=87=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/workSys/elegantCate.vue | 286 ++++++++++++++++++++++
 src/views/modules/workSys/elegantEdit.vue | 169 +++++++++++++
 2 files changed, 455 insertions(+)
 create mode 100644 src/views/modules/workSys/elegantCate.vue
 create mode 100644 src/views/modules/workSys/elegantEdit.vue

diff --git a/src/views/modules/workSys/elegantCate.vue b/src/views/modules/workSys/elegantCate.vue
new file mode 100644
index 00000000..8dfa0a9b
--- /dev/null
+++ b/src/views/modules/workSys/elegantCate.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="resi-container">
+    <el-card class="resi-card-table">
+      <div class="mod-sys__menu">
+        <div class="resi-row-btn">
+          <el-button class=""
+                    type="success"
+                    @click="addShow()">新增</el-button>
+        </div>
+        <el-table v-loading="dataListLoading"
+                  :data="dataList"
+                  :default-expand-all="false"
+                  row-key="categoryId"
+                  :cell-style="cellStyle"
+                  border
+                  style="width: 100%;" class="resi-table">
+          <el-table-column prop="categoryName"
+                          label="分类名称"
+                          header-align="center"
+                          min-width="150"></el-table-column>
+          <el-table-column prop="stateShow"
+                          label="状态"
+                          header-align="center"
+                          min-width="150"></el-table-column>
+
+          <!-- <el-table-column prop="sort"
+                            :label="$t('menu.sort')"
+                            header-align="center"
+                            align="center"></el-table-column> -->
+
+          <el-table-column label="操作"
+                          fixed="right"
+                          header-align="center"
+                          align="left"
+                          width="350">
+            <template slot-scope="scope">
+
+              <el-button type="text"
+                        size="small"
+                         class="btn-color-look"
+                        @click="disableCategory(scope.row)">{{ scope.row.btnShow}}</el-button>
+              <el-button type="text"
+                        size="small"
+                        class="btn-color-edit"
+                        @click="editShow(scope.row)">修改</el-button>
+              <el-button type="text"
+                        size="small"
+                        class="btn-color-del"
+                        @click="deleteCategory(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+      </div>
+    </el-card>
+    
+
+    <elegant-edit ref="ref_edit"
+                   @editDiaOK="editDiaOK">
+
+    </elegant-edit>
+
+  </div>
+</template>
+
+<script>
+
+import { requestPost } from '@/js/dai/request'
+import elegantEdit from './elegantEdit.vue'
+export default {
+
+  data () {
+    return {
+      customerId: '', // 客户id，父组件传
+      customerName: '', // 客户名称，父组件传
+
+      tableParams: {
+        customerId: ''
+      },
+      search: '',
+      dataList: [],
+
+      dataListLoading: false
+
+    }
+  },
+
+  computed: {
+    tables () {
+      const search = this.search
+      if (search) {
+        console.log('this.dataList', this.dataList)
+        return this.dataList.filter(dataNews => {
+          return Object.keys(dataNews).some(key => {
+            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
+          })
+        })
+      }
+      console.log('this.dataList', this.dataList)
+      return this.dataList
+    }
+  },
+  components: {
+    elegantEdit
+  },
+  created() {
+    const { user } = this.$store.state
+    console.log('user----', user)
+    this.initData(user.customerId, user.customerName)
+  },
+  methods: {
+    cellStyle ({ row, column, rowIndex, columnIndex }) {
+      // 状态列字体颜色
+      if (row.state === 'enable' && columnIndex === 1) {
+        return 'color: #EA1B29'
+      } else if (row.state === 'disable' && columnIndex === 1) {
+        return 'color: #0CB618'
+      } else {
+        return 'color: #1a1a1b'
+      }
+    },
+    initData (customerId, customerName) {
+      this.customerId = customerId
+      this.customerName = customerName
+
+      this.loadData()
+    },
+
+    // 加载列表数据
+    async loadData () {
+      this.dataListLoading = true
+      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/customercategorylist'
+      const url = '/resi/partymember/stylecategorydict/list'
+
+      this.tableParams.customerId = this.customerId
+
+      const { data, code, msg } = await requestPost(url, this.tableParams)
+      this.dataListLoading = false
+      if (code === 0) {
+        this.dataList = data
+        this.dataList.forEach(element => {
+          element.state = element.beDisabled ? 'enable' : 'disable'
+          element.btnShow = element.beDisabled ? '启用' : '禁用'
+          element.stateShow = element.beDisabled ? '禁用' : '启用'
+          element.level = 'l1'
+
+          // if (element.children.length > 0) {
+          //   element.children.forEach(child => {
+          //     child.state = child.isDisable === 'enable' ? 'disable' : 'enable'
+          //     child.btnShow = child.isDisable === 'enable' ? '禁用' : '启用'
+          //     child.stateShow = child.isDisable === 'enable' ? '启用' : '禁用'
+          //     child.level = 'l2'
+          //     child.parentCategoryId = element.categoryId
+          //   })
+          // }
+        })
+      } else {
+        // this.$message.error(msg )
+      }
+    },
+
+    // 开启/启用
+    disableCategory (row) {
+      this.$confirm('确认' + row.btnShow + '当前分类?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const url = '/resi/partymember/stylecategorydict/updatestatus'
+        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/isdisablecategory'
+        const param = {
+          customerId: this.customerId,
+          categoryId: row.categoryId,
+          beDisabled: row.state !== 'enable'
+        }
+        window.app.ajax.post(url, param,
+          (data, rspMsg) => {
+            this.$message.success('操作成功')
+            this.loadData()
+          },
+          (rspMsg, data) => {
+            this.$message.error(rspMsg)
+          })
+      }).catch(() => {
+
+      })
+    },
+    // 删除
+    deleteCategory (row) {
+      this.$confirm('确认删除当前分类?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const url = '/resi/partymember/stylecategorydict/delete'
+        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/issue/issueprojectcategorydict/delcategory'
+        const param = {
+          customerId: this.customerId,
+          categoryId: row.categoryId
+        }
+        window.app.ajax.post(url, param,
+          (data, rspMsg) => {
+            this.$message.success('操作成功')
+            this.loadData()
+          },
+          (rspMsg, data) => {
+            this.$message.error(rspMsg)
+          })
+      }).catch(() => {
+
+      })
+    },
+
+    // 新增  customerId,parentCategoryId,categoryId,type,level,num
+    addShow () {
+      const sort = this.dataList.length + 1
+      this.$refs['ref_edit'].initAdd(this.customerId, '', 'l1', sort)
+    },
+    // 新增二级分类  customerId,parentCategoryId,categoryId,type,level，num
+    showAddLevel2 (row) {
+      const sort = row.children.length + 1
+      this.$refs['ref_edit'].initAdd(this.customerId, row.categoryId, 'l2', sort)
+    },
+    // 编辑 customerId,parentCategoryId,dateform
+    editShow (row) {
+      this.$refs['ref_edit'].initEdit(this.customerId, row.categoryId, row)
+    },
+
+    // 取消
+    diaCancel () {
+      this.$emit('cancleBack')
+    },
+
+    editDiaOK () {
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.resi-container .resi-card-table {
+  ::v-deep .el-table {
+    th  {
+      color: #fff;
+      background-color: rgba(33, 149, 254, 1);
+    }
+    
+    .cell {
+      
+      span:nth-of-type(3) {
+        display: inline-block;
+        width: 90%;
+        word-break: break-all;
+      }
+    }
+  }
+}
+.resi-row-btn {
+  display: flex;
+  margin-bottom: 13px;
+  ::v-deep .el-button {
+    // margin-left: 10px;
+    border: 0;
+  }
+  ::v-deep .el-select {
+    margin-right: 10px;
+  }
+  .el-button--success {
+    background: rgba(34, 193, 195, 1);
+  }
+}
+.resi-table {
+  ::v-deep .el-button--text {
+    text-decoration: underline;
+  }
+  ::v-deep .btn-color-del {
+    margin-left: 10px;
+    color: rgba(213, 16, 16, 1);
+  }
+  ::v-deep .btn-color-edit {
+    color: rgba(0, 167, 169, 1);
+  }
+}
+</style>
diff --git a/src/views/modules/workSys/elegantEdit.vue b/src/views/modules/workSys/elegantEdit.vue
new file mode 100644
index 00000000..356bdee7
--- /dev/null
+++ b/src/views/modules/workSys/elegantEdit.vue
@@ -0,0 +1,169 @@
+<template>
+  <el-dialog :visible.sync="visible"
+             :title="title"
+             :width="diaWidth+'%'"
+             :close-on-click-modal="false"
+             :before-close="handleClose"
+             :close-on-press-escape="false">
+    <el-form :inline="false"
+             :model="dataForm"
+             :rules="dataRule"
+             ref="dataForm"
+             :label-width="'120px'">
+      <div style="margin-top:20px">
+
+        <el-form-item label="分类名称"
+                      prop="categoryName">
+          <el-tooltip class="item"
+                      effect="dark"
+                      content="请输入1-10个字"
+                      placement="bottom-start">
+            <el-input class="item_width_1"
+                      :maxlength="10"
+                      :minlength="1"
+                      v-model="dataForm.categoryName"
+                      placeholder="分类名称"></el-input>
+          </el-tooltip>
+        </el-form-item>
+        <!-- <el-form-item label="排序"
+                      prop="sort">
+          <el-input-number v-model="dataForm.sort"
+                           :min="1"
+                           label="描述文字"></el-input-number>
+        </el-form-item> -->
+      </div>
+
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false;resetData()">{{ $t('cancel') }}</el-button>
+      <el-button type="primary"
+                 @click="saveForm()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { requestPost } from '@/js/dai/request'
+export default {
+  data () {
+    return {
+      visible: false,
+      title: '分类信息',
+
+      customerId: '',
+      parentCategoryId: '', // 父级分类Id
+      categoryId: '', // 当前操作分类Id
+      type: '', // 操作类型(add:新增  edit:编辑)
+
+      dataForm: {
+        categoryName: '', // 分类名称
+        sort: 0,
+        type: '', // 操作类型(add:新增  edit:编辑)
+        level: ''
+      },
+
+      url: ''
+
+    }
+  },
+  created () {
+    // this.queryFunctionList()
+  },
+  computed: {
+
+    dataRule () {
+      return {
+        categoryName: [
+          { required: true, message: '分类名称不能为空', trigger: 'blur' },
+          { min: 2, max: 20, message: '分类名称长度在 2 到 20 个字符', trigger: 'blur' }
+        ]
+      }
+    },
+    diaWidth () {
+      console.log(this.resolution)
+      return this.resolution === 'small' ? 70 : 50
+    },
+
+    ...mapGetters(['clientHeight', 'resolution'])
+  },
+  methods: {
+    // 初始化  customerId,parentCategoryId ,level,排序
+    initAdd (customerId, parentCategoryId, level, sort) {
+      this.visible = true
+      this.customerId = customerId
+      this.parentCategoryId = parentCategoryId
+      this.type = 'add'
+      this.dataForm.level = level
+      this.dataForm.sort = sort
+      this.url = '/resi/partymember/stylecategorydict/addorupdate'
+    },
+
+    // 初始化  customerId,parentCategoryId,dateform,level
+    initEdit (customerId, parentCategoryId, dataForm) {
+      this.visible = true
+      this.customerId = customerId
+      this.parentCategoryId = parentCategoryId
+      this.type = 'edit'
+      this.dataForm = dataForm
+
+      this.url = '/resi/partymember/stylecategorydict/addorupdate'
+    },
+
+    async saveForm () {
+      await this.$refs['dataForm'].validate((valid, messageObj) => {
+        if (!valid) {
+          window.app.util.validateRule(messageObj)
+          return false
+        }
+      })
+
+      let params = {
+        customerId: this.customerId,
+        categoryId: this.dataForm.categoryId,
+        categoryName: this.dataForm.categoryName
+      }
+
+      const { data, code, msg } = await requestPost(this.url, params)
+      if (code === 0) {
+        this.$message({
+          type: 'success',
+          message: '保存成功'
+        })
+        this.resetData()
+        this.visible = false
+        this.$emit('editDiaOK')
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    handleClose () {
+      this.visible = false
+    },
+    resetData () {
+      this.dataForm = {
+        categoryName: '', // 分类名称
+        sort: 0,
+        type: ''// 操作类型(add:新增  edit:编辑)
+      }
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+.item_width_1 {
+  width: 400px;
+}
+.item_width_2 {
+  width: 700px;
+}
+.block {
+  display: block;
+}
+.btn_reset {
+  vertical-align: bottom;
+  margin-left: 10px;
+}
+</style>