共性需求

src/views/modules/commonDemand/commonDemand.vue

@@ -0,0 +1,289 @@
+<template >
+    <div class="g-main">
+        <div class="m-table">
+  
+  <div class="u-table-btn2">
+
+    <div class="u-table-btn2-left">
+      <el-button style=""
+                 size="small"
+                 class="diy-button--blue"
+                 icon="el-icon-plus"
+                 @click="handleAdd({},'add')">新增分类</el-button>
+
+    </div>
+  </div>
+
+  <div class="m-table-item">
+    <el-table ref="ref_table"
+              :data="tableData"
+              border
+              row-key="id"
+              default-expand-all
+              :height="tableHeight"
+              style="width: 100%"
+              :tree-props="{children: 'childrenList', hasChildren: 'hasChildren'}"
+              >
+              <el-table-column
+                prop="name"
+                label="分类名称"
+               >
+                </el-table-column>
+                <el-table-column
+                prop="sort"
+                label="排序"
+               >
+                </el-table-column>
+                <el-table-column label="操作"
+                         fixed="right"
+                         header-align="center"
+                         align="center"
+                         class="operate">
+          <template slot-scope="scope">
+            <el-button 
+                       v-if="scope.row.pid==0" 
+                       type="text"
+                       class="div-table-button--blue"
+                       size="small"
+                       @click="handleAdd(scope.row,'add0')">添加二级分类</el-button>
+            <el-button 
+                       type="text"
+                       class="div-table-button--blue"
+                       size="small"
+                       @click="handleAdd(scope.row,'edit')">修改</el-button>
+
+            <el-button 
+                       type="text"
+                       class="div-table-button--blue"
+                       size="small"
+                       @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+    </el-table>
+    <div>
+      <el-pagination @size-change="handleSizeChange"
+                     @current-change="handleCurrentChange"
+                     :current-page.sync="pageNo"
+                     :page-sizes="[20, 50, 100, 200]"
+                     :page-size="pageSize"
+                     layout="sizes, prev, pager, next, total"
+                     :total="total">
+      </el-pagination>
+    </div>
+
+  </div>
+
+
+        </div>
+        <el-dialog :visible.sync="formShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="formTitle"
+               width="670px"
+               top="5vh"
+               class="dialog-h"
+               @closed="diaClose">
+             <commonDemand-form ref="ref_form"
+                      @dialogCancle="addFormCancle"
+                      @dialogOk="addFormOk"></commonDemand-form>
+    </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+import commonDemandForm from './commonDemandForm'
+  import { requestPost,requestGet } from "@/js/dai/request";
+  import { mapGetters } from 'vuex'
+  import { Loading } from 'element-ui' // 引入Loading服务
+  import axios from 'axios'
+  let loading // 加载动画
+  export default {
+    data () {
+      return {
+        searchHeight: 0,//搜索栏高度,
+        pageNo:0,
+        pageSize:20,
+        total:0,
+        formTitle:"",
+        formShow:false,
+        tableData: [],
+      }
+    },
+    components: {
+        commonDemandForm
+    },
+    activated () {
+  
+    },
+    async mounted () {
+     this.loadTable()
+    },
+  
+    methods: {
+      
+      async loadTable () {
+        const url =  "/governance/commonServiceType/treeList"
+        let {data,msg,code } = await requestGet(url)
+        if(code == 0){
+            this.tableData = data
+        }else{
+            this.$message.error(msg)
+        }
+        
+      },
+      diaClose () {
+      this.$refs.ref_form.resetData()
+      this.formShow = false
+      },  
+      addFormOk () {
+      this.formShow = false
+      this.loadTable()
+      },
+      addFormCancle () {
+        this.formShow = false
+      },
+      async handleDetail (row) {
+        this.detailShow = true
+        const _data = await this.detail(row)
+        this.$nextTick(() => {
+          this.$refs.ref_form_detail.initForm(_data)
+        })
+      },
+  
+      handleAdd (row,type) {
+        if(type=="add"){
+            console.log(row.id);
+        this.formTitle = '新增分类'
+        this.formShow = true
+        this.$nextTick(() => {
+          this.$refs.ref_form.initForm(type, row)
+        })
+        }else if(type=="add0"){
+        this.formTitle = '新增分类'
+        this.formShow = true
+        this.$nextTick(() => {
+          this.$refs.ref_form.initForm(type, row)
+        })
+        }else if(type == 'edit'){
+        this.formTitle = '修改分类'
+        this.formShow = true
+        this.$nextTick(() => {
+          this.$refs.ref_form.initForm(type, row)
+        })
+        }
+      
+      },
+
+      selectAll (selection) {
+  
+        this.selection = selection
+  
+  
+      },
+      selectionChange (selection) {
+        this.selection = selection
+  
+      },
+  
+      async handleDelete (row) {
+  
+        this.$confirm("确认删除?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.deleteDemand(row)
+          })
+          .catch(err => {
+            if (err == "cancel") {
+              this.$message({
+                type: "info",
+                message: "已取消删除"
+              });
+            }
+  
+          });
+      },
+      async deleteDemand (row) {
+        const url = `/governance/commonServiceType/delete/${row.id}`
+        const { data, code, msg } = await requestPost(url)
+        if (code === 0) {
+          this.$message({
+            type: "success",
+            message: "删除成功"
+          });
+          this.loadTable()
+        } else if (code > 8000) {
+          this.$message({
+            message: msg,
+            duration: 0
+          })
+          this.loadTable()
+        } else {
+          this.$message.error(msg)
+        }
+      },
+      
+    
+      handleDiyClose () {
+        this.diyDialog = false;
+      },
+      handleClose (done) {
+        this.diyDialog = false
+      },
+   
+      handleSizeChange (val) {
+        this.pageSize = val
+        this.pageNo = 1
+        this.loadTable()
+      },
+      handleCurrentChange (val) {
+        this.pageNo = val
+        this.loadTable()
+      },
+  
+      // 开启加载动画
+      startLoading () {
+        loading = Loading.service({
+          lock: true, // 是否锁定
+          text: '正在加载……', // 加载中需要显示的文字
+          background: 'rgba(0,0,0,.7)' // 背景颜色
+        })
+      },
+      // 结束加载动画
+      endLoading () {
+        // clearTimeout(timer);
+        if (loading) {
+          loading.close()
+        }
+      }
+    },
+    computed: {
+      tableHeight () {
+        console.log(this.searchHeight)
+        let height = this.searchHeight + 270
+        return this.$store.state.inIframe ? this.clientHeight - height + this.iframeHeight : this.clientHeight - height
+  
+      },
+  
+      ...mapGetters(['clientHeight', 'iframeHeight'])
+    },
+    watch: {
+    },
+    props: {
+    
+    }
+  }
+  </script>
+  <style lang="scss" scoped >
+  @import "@/assets/scss/modules/management/list-main.scss";
+  </style>
+  
+  <style >
+  .el-message.is-closable .el-message__content {
+    line-height: 20px;
+  }
+  </style>
+  
+  

src/views/modules/commonDemand/commonDemandForm.vue

@@ -0,0 +1,176 @@
+<template>
+    <div>
+      <div class="dialog-h-content scroll-h">
+        <div >
+          <el-form ref="ref_form"
+                   :inline="true"
+                   :model="dataForm"
+                   :rules="dataRule"
+                   label-width="150px"
+                   class="g-edit-form">
+            <el-form-item prop="name" label="名称">
+                <el-input v-model="dataForm.name" placeholder="请输入名称" ></el-input>
+            </el-form-item>
+            <el-form-item prop="sort" :label="$t('dept.sort')">
+                <el-input-number v-model="dataForm.sort" @change="handleChangeSortNum" :min="0" :label="$t('dept.sort')" ></el-input-number>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="m-edit-btn">
+        <el-button size="small"
+                   @click="handleCancle">取 消</el-button>
+        <el-button size="small"
+                   class="diy-button--blue"
+                   @click="handleComfirm">保 存</el-button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { Loading } from 'element-ui' // 引入Loading服务
+  import { requestPost } from '@/js/dai/request'
+import { number } from 'echarts'
+  let loading // 加载动画
+  export default {
+    data () {
+      return {
+        formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
+        searchOptions: [],
+        searchValue: '',
+        resultList: [],
+        loading: false,
+        dataForm: {
+        name:"",
+        sort:0,
+        pid:0,
+        type:""
+        },
+  
+        propertyFormShow: false,
+       
+  
+        keyWords: '',
+      }
+    },
+    components: {},
+    mounted () {
+  
+    },
+  
+    methods: {
+      async initForm (type, row) {
+        this.$refs.ref_form.resetFields();
+        this.type = type
+        this.formType = type
+        if(type == "add0"){
+            this.dataForm.pid =row.id
+        }else if(type =='add'){
+            console.log(row.id);
+            this.dataForm.pid =  0
+        }else if(type =='edit'){
+            this.dataForm = JSON.parse(JSON.stringify(row))
+        }
+      },
+     
+      handleAddProperty () {
+        this.propertyForm.name = ''
+        this.propertyFormShow = true
+      },
+  
+      async handleComfirm () {
+          this.$refs['ref_form'].validate((valid, messageObj) => {
+            if (!valid) {
+              app.util.validateRule(messageObj)
+            } else {
+              this.addComClass()
+            }
+          })
+  
+      },
+      
+      async addComClass(){
+        const url = "/governance/commonServiceType/save"
+        const updateUrl = "/governance/commonServiceType/update"
+        let params = {
+            pid :this.type=='edit'? this.dataForm.id:this.dataForm.pid,
+            name:this.dataForm.name,
+            sort:this.dataForm.sort
+        }
+        let updateParms = {
+            id :this.type=='edit'? this.dataForm.id:this.dataForm.pid,
+            name:this.dataForm.name,
+            sort:this.dataForm.sort
+        }
+        console.log(params);
+        let {data,code,msg} = await requestPost(this.type=='edit'?updateUrl:url,this.type=='edit'?updateParms:params)
+        if(code == 0){
+            this.$emit('dialogOk')
+            this.$message({
+            type: "success",
+            message: '操作成功',
+            duration: 1
+          })
+         
+        }else{
+            this.$message({
+            type: "error",
+            message:msg,
+            duration: 0
+          })
+        }
+      },
+      handleCancle () {
+          this.$emit('dialogCancle')
+      },
+      resetData () {
+        
+      this.propertyFormShow = false
+      },
+      handleChangeSortNum(value) {
+        this.dataForm.sort = value
+    },
+      // 开启加载动画
+      startLoading () {
+        loading = Loading.service({
+          lock: true, // 是否锁定
+          text: '正在加载……', // 加载中需要显示的文字
+          background: 'rgba(0,0,0,.7)' // 背景颜色
+        })
+      },
+      // 结束加载动画
+      endLoading () {
+        // clearTimeout(timer);
+        if (loading) {
+          loading.close()
+        }
+      }
+    },
+    computed: {
+      dataRule () {
+        return {
+          name: [
+            { required: true, message: '分类名称不能为空', trigger: 'blur' },
+            {
+              min: 1,
+              max: 50,
+              message: '分类名称长度在 1 到 50个字符',
+              trigger: 'blur'
+            }
+          ],
+          sort: [
+            { required: true, message: '分类顺序不能为空', trigger: 'blur' },
+          ],
+        }
+      },
+    },
+    props: {}
+  }
+  </script>
+  <style lang="scss" scoped >
+  @import "@/assets/scss/modules/management/edit-main.scss";
+  </style>
+  
+  
+  
+