提交

src/api/domain.js

@@ -0,0 +1,50 @@
+
+import {urlWrapper, axiosPostFileWrapper, axiosPostWrapper, axiosGetWrapper, axiosDeleteWrapper, axiosPostJsonWrapper, axiosPutJsonWrapper, axiosPutWrapper } from './index';
+
+
+ export const getDomainList = (data, success, error, exception) => {
+   axiosGetWrapper('/domainName/list', data, success, error, exception);
+ };
+ 
+//  export const getMenusList = (data, success, error, exception) => {
+//    axiosGetWrapper('/api/menu/roleTree', data, success, error, exception);
+//  };
+ 
+ export const getCostById = (data, success, error, exception) => {
+   axiosGetWrapper('/cost/one', data, success, error, exception);
+ };
+ 
+//  export const getFunctionsTransferList = (data, success, error, exception) => {
+//    axiosGetWrapper('/api/functions/transfer', data, success, error, exception);
+//  };
+ 
+//  export const editRolesMenus = (data, success, error, exception) => {
+//    axiosPutWrapper('/api/menu/editRolesMenus', data, success, error, exception);
+//  };
+ 
+//  export const editRolesFunctions = (data, success, error, exception) => {
+//    axiosPutWrapper('/api/functions/editRolesFunctions', data, success, error, exception);
+//  };
+ 
+ export const addDomain = (data, success, error, exception) => {
+   axiosPostWrapper('/domainName/add', data, success, error, exception);
+ };
+ 
+ export const editDomain = (data, success, error, exception) => {
+   axiosPutWrapper('/domainName/edit', data, success, error, exception);
+ };
+ 
+ export const domainDeleteByid = (data, success, error, exception) => {
+   axiosDeleteWrapper('/domainName/delete', data, success, error, exception);
+ };
+ 
+ export const getDomainDataById = (data, success, error, exception) => {
+   axiosGetWrapper('/domainName/one', data, success, error, exception);
+ };
+ 
+//  export const editCost11 = (data, success, error, exception) => {
+//    axiosDeleteWrapper('/cost/edit', data, success, error, exception);
+//  };
+ export const editCost = (data, success, error, exception) => {
+  axiosPutWrapper('/cost/edit', data, success, error, exception);
+};

src/components/domain/add-role.vue

@@ -0,0 +1,402 @@
+<template>
+  <el-row class="content-body" v-loading="loading" element-loading-text="拼命加载中">
+    <el-form :model="item" :rules="rules" ref="domainForm" label-width="80px">
+      <el-form-item label="域名" prop="name">
+        <s-textfield v-model="item.name" placeholder="请填写长度为50字以内的域名名称(必填)"></s-textfield>
+      </el-form-item>
+      <el-form-item label="域名卷号" prop="domainNameVolumeNumber">
+        <s-textfield v-model="item.domainNameVolumeNumber" placeholder="域名卷号(必填)"></s-textfield>
+      </el-form-item>
+      <el-form-item label="所有人" prop="owner">
+        <s-textfield v-model="item.owner" placeholder="长度为50字以内(必填)"></s-textfield>
+      </el-form-item>
+  
+      <el-form-item label="审核状态" prop="status">
+       <el-input 
+          placeholder="请输入内容(必填)"
+          v-model="item.status"
+          :disabled="true">
+        </el-input>
+      </el-form-item>
+      <el-form-item label="域名申请日期" prop="beginDate">
+        <div class="block">
+          <!-- <span class="demonstration">域名申请日期</span> -->
+          <el-date-picker
+            v-model="item.beginDate"
+            align="right"
+            type="date"
+            placeholder="选择日期(必填)"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+        </div>
+      </el-form-item>
+      <el-form-item label="代理机构" prop="agency">
+        <el-select v-model="item.agency" clearable placeholder="请选择代理机构">
+          <el-option
+            v-for="item in domainList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="扩展日期" prop="extensionDate">
+        <div class="block">
+          <!-- <span class="demonstration">域名申请日期</span> -->
+          <el-date-picker
+            v-model="item.extensionDate"
+            align="right"
+            type="date"
+            placeholder="选择日期(必填)"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+        </div>
+      </el-form-item>
+      <el-form-item label="续费时间" prop="renewalTime">
+        <div class="block">
+          <!-- <span class="demonstration">域名申请日期</span> -->
+          <el-date-picker
+            v-model="item.renewalTime"
+            align="right"
+            type="date"
+            placeholder="选择日期(必填)"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+        </div>
+      </el-form-item>
+      <el-form-item label="续费金额" prop="renewalAmount">
+        <s-textfield v-model="item.renewalAmount" placeholder="数字金额"></s-textfield>
+      </el-form-item>
+      <el-form-item label="业务模式" prop="businessModel">
+        <s-textfield v-model="item.businessModel" placeholder="请输入业务模式"></s-textfield>
+      </el-form-item>
+      <el-form-item label="使用部门" prop="department">
+        <s-textfield v-model="item.department" placeholder="请输入使用部门"></s-textfield>
+      </el-form-item>
+
+      <el-row>
+        <el-button type="primary" plain @click="dialogVisible = true">新增费用信息</el-button>
+      </el-row>
+<!-- 费用表单 -->
+      <el-form-item label="费用类型" prop="costType">
+        <el-select v-model="item.costType" clearable placeholder="请选择费用类型">
+          <el-option
+            v-for="item in costList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="金额" prop="money">
+        <s-textfield v-model="item.money" placeholder="金额"></s-textfield>
+      </el-form-item>
+      <el-form-item label="部门属性" prop="departmentAttribute">
+        <el-select v-model="item.departmentAttribute" clearable placeholder="请选择部门属性">
+          <el-option
+            v-for="item in departmentList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="预算部门" prop="budgetDepartment">
+        <s-textfield v-model="item.budgetDepartment" placeholder="请输入预算"></s-textfield>
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <s-textfield v-model="item.remarks" placeholder="备注"></s-textfield>
+      </el-form-item>
+
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="30%"
+        :before-close="handleClose">
+        <span>弹不出表单，只能写下面了</span>
+        <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+      </el-dialog>
+     
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('domainForm')">确认</el-button>
+        <el-button @click="formReset('domainForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </el-row>
+
+</template>
+<script>
+  import {addRole,getDataById,getMenusList,editRole,getFunctionsList,getFunctionsTransferList} from  "@/api/role";
+  import {addDomain} from  "@/api/domain";
+  export default {
+    name:'addRoleDialog',
+    components: {},
+    data() {
+      return {
+        item: {
+          name:"",
+          domainNameVolumeNumber:'',
+          owner:'',
+          status: '1',
+          beginDate: "",
+          agency:'',
+          extensionDate:"",
+          renewalTime: "",
+          renewalAmount:'',
+          businessModel:'',
+          department:'',
+          registrant:'老板',
+          registrationTime:new Date(),
+
+          costType:'',
+          money:'',
+          departmentAttribute:'',
+          budgetDepartment:'',
+          remarks:''
+        },
+        
+        departmentList: [
+          {
+            value: 1,
+            label: "1号部门"
+          },
+          {
+            value: 2,
+            label: "2号部门"
+          }
+        ],
+        costList: [
+          {
+            value: "官费",
+            label: "官费"
+          },
+          {
+            value: "代理费",
+            label: "代理费"
+          }
+        ],
+        domainList: [
+          {
+            value: 1,
+            label: "石湾"
+          },
+          {
+            value: 2,
+            label: "季华"
+          },
+          {
+            value: 3,
+            label: "公园前"
+          }
+        ],
+        functions:{data:[]},
+        loading: false,
+        rules: {
+          name: [{ required: true, message: '请输入域名', trigger: 'blur' }],
+          domainNameVolumeNumber: [{ required: true, message: '请输入域名卷号', trigger: 'blur'}],
+          owner: [{ required: true, message: '请输入所有人', trigger: 'blur' }],
+          beginDate: [{ required: true, message: '请输入域名申请时间', trigger: 'blur' }],
+        },
+       
+        menusTree: {data:[],existChecked:[]},
+        
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: '今天',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: '昨天',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: '一周前',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        },
+        value1: '',
+        dialogVisible: false
+      }
+    },
+    mounted() {
+      this.fetchMenusTreeData();
+//      this.fetchFunctionsData();
+      //this.loadFunctionData();
+    },
+    
+    methods: {
+      onSubmit(formName) {
+        this.addAgreement();
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      },
+      async addAgreement(){
+        let me=this;
+        if (me.item.name == "") {
+          alert("域名不能为空");
+          return;
+        }
+        if (me.item.domainNameVolumeNumber == "") {
+          alert("域名券号不能为空");
+          return;
+        }
+        if (me.item.owner == "") {
+          alert("所有人不能为空");
+          return;
+        }
+        if (me.item.beginDate == "") {
+          alert("域名申请日期不能为空");
+          return;
+        }
+        if (me.item.extensionDate == "") {
+          alert("扩展日期不能为空");
+          return;
+        }
+        if (me.item.renewalTime == "") {
+          alert("缴费时间不能为空");
+          return;
+        }
+        await addDomain(
+          me.item,
+          (response) => {
+            me.$emit('close');
+            this.$message({ type: 'success', message: '操作成功', duration: 2000,
+              onClose: () => {
+                this.$refs['domainForm'].resetFields();
+                this.menusTree.existChecked=[];
+                this.item.functionIds=[];
+              },
+            });
+
+
+          },
+          (error) => {
+            console.warn(error);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          },
+          (exception) => {
+            console.warn(exception);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          }
+        );
+      },
+      handleRenderCheckChange(e, data, node){
+        let checked = e.target.checked, val = parseInt(e.target.value);
+
+        if(checked){
+          this.item.rolePrivilegeIds.push(val);
+          this.$refs.roleColumn.setChecked(data.id, true);
+        } else {
+          let index = $.inArray(val, this.item.rolePrivilegeIds);
+          if(index != -1){
+            this.item.rolePrivilegeIds.splice(index, 1);
+          }
+        }
+      },
+      inObjArray(array, prop, val){
+        let result = -1;
+        array.forEach((obj, index) => {
+          if(obj[prop] === val) {
+            result = index;
+          }
+        })
+        return result;
+      },
+      async fetchFunctionsData(){
+        let me=this;
+        await getFunctionsList(
+          {roleCode:me.item.id},
+          (response) => {
+            me.functions = response;
+          },
+          (error) => {
+            console.warn(error);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          },
+          (exception) => {
+            console.warn(exception);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          }
+        );
+      },
+//       async fetchMenusTreeData(){
+//         let me=this;
+//         await getMenusList(
+//           {roleCode:me.item.id},
+//           (response) => {
+// //                todo
+//             me.menusTree.data = response.data;
+//             var ary=response.defaultCheckNodes;
+//             for (var i = ary.length - 1; i >= 0; i--) {
+//               for(var j=0;j<me.menusTree.data.length;j++) {
+//                 if (ary[i] === me.menusTree.data[j].code) {
+//                   ary.splice(i, 1);
+//                 }
+//               }
+//             }
+//             me.menusTree.existChecked=ary;
+//           },
+//           (error) => {
+//             console.warn(error);
+//             // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+//           },
+//           (exception) => {
+//             console.warn(exception);
+//             // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+//           }
+//         );
+//       },
+      // async loadFunctionData(){
+      //   let me=this;
+      //   await getFunctionsTransferList(
+      //     {roleCode:me.rCode}, (response) => {
+      //       me.functions.data=response.data;
+      //       me.item.functionIds=response.value;
+      //     },
+      //     (error) => {
+      //       console.warn(error);
+      //       // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+      //     },
+      //     (exception) => {
+      //       console.warn(exception);
+      //       // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+      //     }
+      //   );
+      // },
+    },
+    watch: {
+      $route (to, form){
+//          todo
+      }
+    },
+  }
+</script>
+<style lang="less" scoped>
+  /** 滚动条 **/
+  ::-webkit-scrollbar{width: 10px; height: 10px;}
+  ::-webkit-scrollbar-button:vertical{display: none;}
+  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
+  ::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
+  ::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
+  ::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}
+</style>

src/components/domain/distribution-funs.vue

@@ -0,0 +1,108 @@
+<template>
+
+  <el-row type="flex" class="row-bg" justify="space-between">
+    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
+    <el-col :span="18">
+        <el-form :model="form" :rules="formRules" v-loading="loading">
+          <!--filterable-->
+          <!--:filter-method="filterMethod"-->
+          <!--filter-placeholder="请输入城市拼音"-->
+          <el-form-item label="">
+            <el-transfer
+              v-model="form.funCodes"
+              :props="{key:'code', label:'name'}"
+              :titles="['未拥有', '已拥有']"
+              :button-texts="['到左边', '到右边']"
+              filterable
+              :format="{noChecked: '${total}', hasChecked: '${checked}/${total}'}"
+              :data="functions.data">
+            </el-transfer>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" :loading="loading" @click="onSubmit()">提交</el-button>
+            <el-button @click="close">取消</el-button>
+          </el-form-item>
+
+        </el-form>
+    </el-col>
+    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
+  </el-row>
+
+</template>
+
+<script>
+  import {getFunctionsTransferList,editRolesFunctions} from  "@/api/role";
+  export default {
+      name:'',
+      props:{
+          rCode:String,
+      },
+      mounted() {
+          this.loadData();
+      },
+      data(){
+        return{
+          form:{funCodes:[],rCode:''},
+          formRules:{},
+          loading:false,
+          functions:{data:[]}
+        }
+      },
+      methods:{
+        onSubmit(){
+            debugger
+          let me=this;
+          me.form.rCode=me.rCode;
+          me.editRolesFunctions();
+        },
+        async editRolesFunctions(){
+          let me=this;
+          await editRolesFunctions(
+            me.form,
+            (response) => {
+              me.close();
+              me.$message({ type: 'success', message: '修改权限成功', duration: 2000});
+            },
+            (error) => {
+              console.warn(error);
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            },
+            (exception) => {
+              console.warn(exception);
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            }
+          );
+        },
+        async loadData(){
+          let me=this;
+          await getFunctionsTransferList(
+            {roleCode:me.rCode}, (response) => {
+              me.functions.data=response.data;
+              me.form.funCodes=response.value;
+            },
+            (error) => {
+              console.warn(error);
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            },
+            (exception) => {
+              console.warn(exception);
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            }
+          );
+        },
+        close(){
+          this.$emit('close');
+        }
+      },
+      watch:{
+        rCode(){ //改变后需再次获取数据
+          this.loadData();
+        }
+      }
+    };
+</script>
+
+<style lang="less">
+
+</style>

src/components/domain/domain-manager.vue

@@ -0,0 +1,402 @@
+<template>
+    <div>
+      <div class="page-agreement">
+        <bread-crumb></bread-crumb>
+        <section class="content-section">
+          <div style="margin: 15px ;"></div>
+          <el-card class="box-card">
+            <!--前面的搜索框-->
+            <div slot="header" class="clearfix">
+              <span style="line-height: 36px;"><i class="el-icon-date" style="margin-right: 5px;"></i>筛选查询</span>
+              <el-button style="float: right;" size="small" @click="resetSearchButtonClicked()">重置</el-button>
+              <el-button style="float: right; margin-right: 10px;" size="small" type="primary" @click="searchButtonClicked()">搜索</el-button>
+            </div>
+            <div>
+              <el-form label-position="right" label-width="120px">
+                <!--搜索的条件-->
+                <el-row>
+                  <el-col :span="6">
+                   <el-form-item label="域名:" style="margin-bottom: 10px;" prop="name"> 
+                      <el-input placeholder="请输入查找的域名" v-model="searchForm.name" @keyup.enter.native="searchButtonClicked" clearable></el-input>
+                     </el-form-item> 
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="域名卷号:" style="margin-bottom: 10px;" prop="domainNameVolumeNumber">
+                      <el-input placeholder="请输入需要查找的域名卷号" v-model="searchForm.domainNameVolumeNumber" @keyup.enter.native="searchButtonClicked" clearable></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="所有人:" style="margin-bottom: 10px;"  prop="owner">
+                      <el-input placeholder="请输入内容" v-model="searchForm.owner" @keyup.enter.native="searchButtonClicked" clearable></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                  <el-form-item label="审核状态" prop="status">
+                    <el-select v-model="searchForm.status" placeholder="请选择">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                </el-row>
+              </el-form>
+            </div>
+          </el-card>
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span style="line-height: 36px;"><i class="el-icon-date" style="margin-right: 5px;"></i>域名列表</span>
+              <!-- <el-button style="float: right;margin-right: 20px;margin-left: 0;" size="small" type="primary" @click="distributionMenusDialogToggle">分配菜单</el-button>
+              <el-button style="float: right;margin-right: 20px;margin-left: 0;" size="small" type="primary" @click="distributionFunctions">分配操作</el-button> -->
+              <el-button style="float: right;margin-right: 20px;margin-left: 0;" size="small" type="primary" @click="addRoleDialogVisible=!addRoleDialogVisible">创建域名</el-button>
+            </div>
+            <el-table ref="domainTable" :data="tableData" @row-dblclick="checkRow" v-loading.body="tableLoading" stripe border class="table-font" max-height="450" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="55"></el-table-column>
+              <el-table-column prop="id" label="序号" align="center" width="80"></el-table-column>
+              <el-table-column prop="name" label="域名"  align="center"></el-table-column>
+              <el-table-column prop="domainNameVolumeNumber" label="域名卷号"  align="center"></el-table-column>
+              <el-table-column prop="owner" label="所有人" align="center"></el-table-column>
+              <el-table-column prop="status" label="审核状态" align="center">
+                <template slot-scope="scope">
+                  <el-tag type="danger" effect="dark" v-if="scope.row.status==0">草稿</el-tag>
+                  <el-tag type="success" effect="dark" v-if="scope.row.status==1">待审核</el-tag>
+                  <el-tag type="warning" effect="dark" v-if="scope.row.status==2">已发布</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="beginDate" label="域名申请日期" align="center"></el-table-column>
+              <el-table-column width="200" fixed="right" label="操作">
+                <!--操作-->
+                <template slot-scope="scope">
+                  <!-- <el-button
+                    @click.native.prevent="handleViewRoleUsers(scope.$index)"
+                    type="text"
+                    size="small">
+                    管理用户
+                  </el-button> -->
+                  <el-button type="text" @click="handleModify(scope.$index, tableData)">查看/编辑</el-button>
+                  <el-button type="text" @click="handleDelete(scope.$index, tableData)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <!-- 分页功能 -->
+            <div style="margin-top: 10px; margin-left: -5px;">
+              <el-pagination @current-change="handleCurrentChange" :page-count="pagination.pages" :current-page.sync="pagination.current" layout="prev, pager, next, jumper"></el-pagination>
+            </div>
+          </el-card>
+          <!-- 可能是商标 -->
+          <div style="font-size: 12px; text-align: center; padding: 10px; color: gray;">CopyRight @ 碧桂园物业 {{new Date().getFullYear()}}</div>
+        </section>
+      </div>
+
+      <!-- 角色分配操作 -->
+      <el-dialog title="分配操作" :visible.sync="distributionFunctionsDialogVisible" width="60%" @close="initTable">
+        <distribution-func :rCode="distributionMenusDialogForm.rCode" @close="initTable(true)"></distribution-func>
+      </el-dialog>
+      <!-- 新增角色模态框 -->
+      <el-dialog title="创建域名" :visible.sync="addRoleDialogVisible" width="60%" @close="initTable">
+          <add-role-dialog :rCode="distributionMenusDialogForm.rCode" @close="initTable(true)"></add-role-dialog>
+      </el-dialog>
+      <!-- 修改角色模态框 -->
+      <el-dialog title="修改域名" :visible.sync="editRoleDialogVisible" width="60%" @close="initTable">
+        <edit-role-dialog :id="ctlId" @close="initTable(true)"></edit-role-dialog>
+      </el-dialog>
+      <!-- 分配菜单模态框 -->
+      <el-dialog title="分配菜单" :visible.sync="distributionMenusDialogVisible" @close="initTable">
+        <el-form :model="distributionMenusDialogForm" :rules="distributionMenusDialogFormRules"
+                 v-loading="requestLoading"
+                 ref="addWeeklyReportDialogForm">
+
+          <el-tree
+            ref="menusTree"
+            :data="menusTreeData"
+            :props="{children: 'subMenus',label: 'name'}"
+            :default-checked-keys="existCheckedMenuCodes"
+            node-key="code"
+            show-checkbox>
+          </el-tree>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" :loading="requestLoading"
+                     @click="distributionMenus">提交</el-button>
+          <el-button type="default" @click="distributionMenusDialogVisible = !distributionMenusDialogVisible">取消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+    import breadCrumb from "../breadCrumb.vue";
+    import ElRow from "element-ui/packages/row/src/row";
+
+    import {getRolesList,getMenusList,editRolesMenus,deleteByid} from  "@/api/role";
+    import {getDomainList,domainDeleteByid,editDomain,getCostById} from  "@/api/domain";
+    import addRoleDialog from './add-role';
+    import editRoleDialog from './edit-role';
+    import distributionFunc from './distribution-funs.vue';
+    export default {
+      components: {
+        editRoleDialog,
+        ElRow, breadCrumb ,addRoleDialog,distributionFunc},
+      mounted() {
+          this.resetSearchButtonClicked();
+      },
+      data(){
+          return{
+//          分配操作
+            distributionFunctionsDialogVisible:false,
+//          新增角色
+            addRoleDialogVisible:false,
+//          分配菜单
+            distributionMenusDialogVisible:false,
+            distributionMenusDialogForm:{mCodes:'',rCode:''},
+            distributionMenusDialogFormRules:{},
+            menusTreeLoad:false,
+            menusTreeData:[],
+            existCheckedMenuCodes:[],
+            requestLoading:false,
+//          编辑角色id
+            ctlId:'',
+            editRoleDialogVisible:false,
+
+            tableData: [],
+            tableLoading: false,
+            commList: [],
+            organCode:'',
+            organList: [],
+            //搜索条件
+            searchForm:{
+              name:'',
+              domainNameVolumeNumber:'',
+              owner:'',
+              status:''
+            },
+            multipleSelection:[],
+            casefield_modify_casefieldname: false,
+            casefield_modify_header: false,
+            pagination: { current: 1, limit: 10, total: 0, pages: 0, max: 1, next: 1 },
+            options: [{
+                value: 0,
+                label: '草稿'
+                }, {
+                value: 1,
+                label: '待审核'
+                }, {
+                value: 2,
+                label: '已发布'
+                }],
+          }
+      },
+      methods:{
+        initTable(refreshFlag){
+            let me=this;
+            me.editRoleDialogVisible=false;
+            me.addRoleDialogVisible=false;
+            //me.distributionFunctionsDialogVisible=false;
+            me.ctlId='';
+            if(refreshFlag)me.resetSearchButtonClicked();
+        },
+        handleDelete(index, rows) {
+          this.$confirm('是否删除该记录' , "提示",{ confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => {
+            domainDeleteByid(
+              {
+                id:rows[index].id
+              },
+              (response) => {
+                this.fetchData();
+                this.$message({ type: "success", message: "删除成功", duration: 3000, onClose: () => {} });
+              },
+              (error) => {
+                console.error(error);
+                this.$message({ type: "error", message: error, duration: 3000, onClose: () => {} });
+              },
+              (exception) => {
+                console.error(exception);
+              },
+            );
+          });
+        },
+        handleModify(index, rows) {
+          let me=this;
+          me.ctlId=rows[index].id+'';
+          //alert(me.ctlId);
+          me.editRoleDialogVisible=true;
+        },
+//         distributionMenus(){//分配菜单
+//           let me=this;
+//           let checkedNodes = me.$refs.menusTree.getCheckedNodes();
+
+//           if(!checkedNodes||checkedNodes.length<=0){
+//             me.$message({ type: 'error', message: '请勾选菜单', duration: 2000 });
+//             return;
+//           }
+//           var parentIds = new Set();
+//           var menuIds="";
+//           checkedNodes.forEach(node=>{
+//               if(node.hasOwnProperty('parentCode')){
+//                 menuIds+=node.code+',';
+//                 parentIds.add(node.parentCode);
+//               }else{
+//                 parentIds.add(node.code);
+//               }
+//           });
+//       // 父节点处理
+//           for (let item of parentIds.keys()) {
+//             menuIds+=item+',';
+//           }
+//           me.distributionMenusDialogForm.mCodes=menuIds;
+//           me.editdistributionMenus();
+//         },
+//         distributionMenusDialogToggle(){
+//           let me=this;
+// //        弹窗显示树形菜单进行勾选
+//           if(!me.multipleSelection||me.multipleSelection.length!=1){
+//             me.$message({ type: 'error', message: '请勾选一个角色', duration: 2000 });
+//             return;
+//           }
+//           me.distributionMenusDialogForm.rCode=me.multipleSelection[0].code;
+//           me.fetchMenusTreeData();
+//           me.distributionMenusDialogVisible=true;
+//         },
+//         distributionFunctions(){
+//           let me=this;
+// //        弹窗显示树形菜单进行勾选
+//           if(!me.multipleSelection||me.multipleSelection.length!=1){
+//             me.$message({ type: 'error', message: '请勾选一个角色', duration: 2000 });
+//             return;
+//           }
+//           me.distributionMenusDialogForm.rCode=me.multipleSelection[0].code;
+//           me.distributionFunctionsDialogVisible=true;
+//         },
+        searchButtonClicked() {
+          this.fetchData();
+        },
+        resetSearchButtonClicked() { //重置查询
+          this.searchForm.name='';
+          this.searchForm.domainNameVolumeNumber='';
+          this.searchForm.owner='';
+          this.searchForm.status='';
+          this.fetchData();
+        },
+        //分配菜单请求
+        async editdistributionMenus(){
+          let me=this;
+          await editRolesMenus(
+            me.distributionMenusDialogForm,
+            (response) => {
+              me.menusTreeLoad = false;
+              me.distributionMenusDialogVisible=false;
+              this.$message({ type: "success", message: "授权菜单成功！", duration: 2000, onClose: () => {} });
+            },
+            (error) => {
+              console.warn(error);
+              this.menusTreeLoad = false;
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            },
+            (exception) => {
+              console.warn(exception);
+              this.menusTreeLoad = false;
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            }
+          );
+        },
+//      当前分页改变
+        async handleCurrentChange(val) {
+          this.setPaginationNextPage(val);
+          this.fetchData();
+        },
+//
+        async fetchMenusTreeData(){
+          let me=this;
+          me.menusTreeLoad=true;
+          await getMenusList(
+            {roleCode:me.distributionMenusDialogForm.rCode},
+            (response) => {
+              me.menusTreeData = response.data;
+              var ary=response.defaultCheckNodes;
+              for (var i = ary.length - 1; i >= 0; i--) {
+                for(var j=0;j<me.menusTreeData.length;j++) {
+                    if (ary[i] === me.menusTreeData[j].code) {
+                        if(me.menusTreeData[j].subMenus.length>0) ary.splice(i, 1);
+                    }
+                  }
+              }
+              me.existCheckedMenuCodes=ary;
+              me.menusTreeLoad = false;
+            },
+            (error) => {
+              console.warn(error);
+              this.menusTreeLoad = false;
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            },
+            (exception) => {
+              console.warn(exception);
+              this.menusTreeLoad = false;
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            }
+          );
+        },
+        async fetchData() {
+          let me=this;
+          me.tableLoading = true;
+          me.searchForm.size=this.pagination.limit;
+          me.searchForm.page=this.getPaginationSkip()
+          await getDomainList(
+            me.searchForm,
+            (response) => {
+              this.setPaginationTotal(response.pages);
+              debugger
+              this.tableData = response.data;
+              this.tableLoading = false;
+            },
+            (error) => {
+              console.warn(error);
+              this.tableLoading = false;
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            },
+            (exception) => {
+              console.warn(exception);
+              this.tableLoading = false;
+              // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+            }
+          );
+        },
+        handleSelectionChange(val) {
+          this.multipleSelection = val;
+
+        },
+        parseState(row, column, cellValue, index){
+            return row.enable?'可用':'禁用';
+        },
+        setPaginationNextPage(next) {
+          this.pagination.next = next;
+        },
+        //获取分页跳转数
+        getPaginationSkip() {
+          return Math.max(1, this.pagination.next);
+        },
+        //设置分页总数
+        setPaginationTotal(row) {
+          this.pagination.total = row;
+          this.pagination.pages = row;
+        },
+        checkRow(row, event){
+              this.$refs.domianTable.toggleRowSelection(row);
+        },
+        handleViewRoleUsers(index){
+          const item = this.tableData[index];
+          this.$router.push({path:"/roleusers",query:{roleCode:item.code,roleName:item.name}});
+        },
+      },
+      deactived(){
+        this.$destroy();
+      },
+    };
+</script>
+
+<style lang="less" scope>
+
+</style>

src/components/domain/domain-manageree.vue

@@ -0,0 +1,34 @@
+<template>
+    <div id="domian">
+        <el-table :data="tableData" border style="width: 100%">
+            <el-table-column prop="name" label="域名" align="center"></el-table-column>
+            <el-table-column prop="domainNameVolumeNumber" label="域名卷号" align="center"></el-table-column>
+            <el-table-column prop="owner" label="所有人" align="center"></el-table-column>
+            <el-table-column fixed="right" label="操作" width="100">
+                <template slot-scope="scope">
+                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
+                    <el-button type="text" size="small">编辑</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+
+</template>
+<script>
+export default {
+    components: {
+    },
+    mounted() {
+    },
+    data() {
+        return {
+            tableData: []
+        }
+    },
+    methods: {
+        handleClick(res) {
+            debugger
+        }
+    }
+}
+</script>

src/components/domain/edit-role.vue

@@ -0,0 +1,377 @@
+<template>
+  <el-row class="content-body" v-loading="loading" element-loading-text="拼命加载中">
+    <el-form :model="item" :rules="rules" ref="roleForm" label-width="80px">
+      <el-form-item label="域名" prop="name">
+        <s-textfield v-model="item.name" placeholder="请填写长度为50字以内的域名名称(必填)"></s-textfield>
+      </el-form-item>
+      <el-form-item label="域名卷号" prop="domainNameVolumeNumber">
+        <s-textfield v-model="item.domainNameVolumeNumber" placeholder="域名卷号(必填)"></s-textfield>
+      </el-form-item>
+      <el-form-item label="所有人" prop="owner">
+        <s-textfield v-model="item.owner" placeholder="长度为50字以内(必填)"></s-textfield>
+      </el-form-item>
+  
+      <el-form-item label="审核状态" prop="status">
+       <el-input 
+          placeholder="请输入内容(必填)"
+          v-model="item.status"
+          :disabled="true">
+        </el-input>
+      </el-form-item>
+      <el-form-item label="域名申请日期" prop="beginDate">
+        <div class="block">
+          <!-- <span class="demonstration">域名申请日期</span> -->
+          <el-date-picker
+            v-model="item.beginDate"
+            align="right"
+            type="date"
+            placeholder="选择日期(必填)"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+        </div>
+      </el-form-item>
+      <el-form-item label="代理机构" prop="agency">
+        <el-select v-model="item.agency" clearable placeholder="请选择代理机构">
+          <el-option
+            v-for="item in domainList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="下次续展日期" prop="extensionDate">
+        <div class="block">
+          <!-- <span class="demonstration">域名申请日期</span> -->
+          <el-date-picker
+            v-model="item.extensionDate"
+            align="right"
+            type="date"
+            placeholder="选择日期(必填)"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+        </div>
+      </el-form-item>
+      <el-form-item label="续费时间" prop="renewalTime">
+        <div class="block">
+          <!-- <span class="demonstration">域名申请日期</span> -->
+          <el-date-picker
+            v-model="item.renewalTime"
+            align="right"
+            type="date"
+            placeholder="选择日期(必填)"
+            :picker-options="pickerOptions">
+          </el-date-picker>
+        </div>
+      </el-form-item>
+      <el-form-item label="续费金额" prop="renewalAmount">
+        <s-textfield v-model="item.renewalAmount" placeholder="数字金额"></s-textfield>
+      </el-form-item>
+      <el-form-item label="业务模式" prop="businessModel">
+        <s-textfield v-model="item.businessModel" placeholder="请输入业务模式"></s-textfield>
+      </el-form-item>
+      <el-form-item label="使用部门" prop="department">
+        <s-textfield v-model="item.department" placeholder="请输入使用部门"></s-textfield>
+      </el-form-item>
+      <el-alert
+        title="费用表单"
+        type="success">
+      </el-alert>
+      <!-- 费用表单 -->
+      <el-form-item label="费用类型" prop="costType">
+        <el-select v-model="costdata.costType" clearable placeholder="请选择费用类型">
+          <el-option
+            v-for="item in costList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="金额" prop="money">
+        <s-textfield v-model="costdata.money" placeholder="金额"></s-textfield>
+      </el-form-item>
+      <el-form-item label="部门属性" prop="departmentAttribute">
+        <el-select v-model="costdata.departmentAttribute" clearable placeholder="请选择部门属性">
+          <el-option
+            v-for="item in departmentList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="预算部门" prop="budgetDepartment">
+        <s-textfield v-model="costdata.budgetDepartment" placeholder="请输入预算"></s-textfield>
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <s-textfield v-model="costdata.remarks" placeholder="备注"></s-textfield>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('roleForm')">确认</el-button>
+        <el-button @click="formReset('roleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </el-row>
+</template>
+<script>
+  import {addRole,getDataById,getMenusList,editRole,getFunctionsList,getFunctionsTransferList} from  "@/api/role";
+  import {addDomain,getDomainDataById,editDomain,getCostById,editCost} from  "@/api/domain";
+  export default {
+    name:'editRoleDialog',
+    components: {},
+    props:{
+      id:String,
+    },
+    data() {
+      return {
+        functions2:{data:[]},
+        loading: false,
+        rules: {
+          name: [{ required: true, message: '请输入域名', trigger: 'blur' }],
+          domainNameVolumeNumber: [{ required: true, message: '请输入域名卷号', trigger: 'blur'}],
+          owner: [{ required: true, message: '请输入所有人', trigger: 'blur' }],
+          beginDate: [{ required: true, message: '请输入域名申请时间', trigger: 'blur' }],
+        },
+        item: {
+          name:"",
+          domainNameVolumeNumber:'',
+          owner:'',
+          status: '1',
+          beginDate: '',
+          agency:'',
+          extensionDate:'',
+          renewalTime:'',
+          renewalAmount:'',
+          businessModel:'',
+          department:'',
+          registrant:'老板',
+          registrationTime:new Date()
+        },
+        costdata:{
+          costType:'',
+          money:'',
+          departmentAttribute:'',
+          budgetDepartment:'',
+          remarks:''
+        },
+        departmentList: [
+          {
+            value: 1,
+            label: "1号部门"
+          },
+          {
+            value: 2,
+            label: "2号部门"
+          }
+        ],
+        costList: [
+          {
+            value: "官费",
+            label: "官费"
+          },
+          {
+            value: "代理费",
+            label: "代理费"
+          }
+        ],
+        domainList: [
+          {
+            value: 1,
+            label: "石湾"
+          },
+          {
+            value: 2,
+            label: "季华"
+          },
+          {
+            value: 3,
+            label: "公园前"
+          }
+        ],
+        menusTree: {data:[]}
+      }
+    },
+    mounted() {
+      this.getDomainDataById();
+      //this.getCostOneById();
+    },
+    methods: {
+      funcChange(val,direction,changeAry){
+//      修改数据通知组件-强行界面刷新
+        this.functions2.data.push('1');
+        this.functions2.data.pop()
+      },
+      onSubmit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+              //alert("1");
+              this.editCostOne();
+              this.editAgreement();
+             
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      async editCostOne(){
+        let me=this;
+        //alert("进入了costedit方法"),
+        await editCost(
+          me.costdata,
+          (response) => {
+          },
+          (error) => {
+            console.warn(error);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          },
+          (exception) => {
+            console.warn(exception);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          }
+        );
+      },
+      async editAgreement(){
+        // this.editCostOne();
+        let me=this;
+        //alert("editDomain"),
+        await editDomain(
+          me.item,
+          (response) => {
+            me.$emit('close');
+            me.menusTree.data=[];
+            me.item.menusIds=[];
+            me.functions2.data=[];
+            me.$message({ type: 'success', message: '操作成功', duration: 2000,
+              onClose: () => {
+                me.$refs['roleForm'].resetFields();
+              },
+            });
+          },
+          (error) => {
+            console.warn(error);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          },
+          (exception) => {
+            console.warn(exception);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          }
+        ); 
+        
+      },
+      handleCheckChange(data, checked, indeterminate){
+//        if(data.hasOwnProperty('privileges')) {
+//          if(!checked) {//没被选中的或半选状态的
+//            data.privileges.forEach((node) => {
+//              let index = $.inArray(node.id, this.item.rolePrivilegeIds);//用于在数组（this.item.rolePrivilegeIds）中搜索指定的值（node.id）,并返回其索引值。如果数组中不存在该值,则返回-1;
+//              if(index != -1){
+//                this.item.rolePrivilegeIds.splice(index, 1);//删除数组中索引index对应的元素
+//              }
+//            })
+//          }
+//        }
+      },
+      handleRenderCheckChange(e, data, node){
+        let checked = e.target.checked, val = parseInt(e.target.value);
+
+        if(checked){
+          this.item.rolePrivilegeIds.push(val);
+          this.$refs.roleColumn.setChecked(data.id, true);
+        } else {
+          let index = $.inArray(val, this.item.rolePrivilegeIds);
+          if(index != -1){
+            this.item.rolePrivilegeIds.splice(index, 1);
+          }
+        }
+      },
+      inObjArray(array, prop, val){
+        let result = -1;
+        array.forEach((obj, index) => {
+          if(obj[prop] === val) {
+            result = index;
+          }
+        })
+        return result;
+      },
+      async fetchMenusTreeData(){
+        let me=this;
+        await getMenusList(
+          {roleCode:me.item.code},
+          (response) => {
+//                todo
+            me.menusTree.data = response.data;
+            var ary=response.defaultCheckNodes;
+            for (var i = ary.length - 1; i >= 0; i--) {
+              for(var j=0;j<me.menusTree.data.length;j++) {
+                if (ary[i] === me.menusTree.data[j].code) {
+                  if(me.menusTree.data[j].subMenus.length>0) ary.splice(i, 1);
+                }
+              }
+            }
+            me.item.menusIds=ary;
+          },
+          (error) => {
+            console.warn(error);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          },
+          (exception) => {
+            console.warn(exception);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          }
+        );
+      },
+      async getCostOneById(){
+        let me=this;
+        await getCostById(
+          {id:me.id}, 
+          (response) => {
+            //this.item=response;
+            this.costdata=response;
+            //alert(this.costdata.money);
+            //alert(this.item.remarks);
+          },
+          (error) => {
+            console.warn(error);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          },
+          (exception) => {
+            console.warn(exception);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          }
+        );
+      },
+      async getDomainDataById(){
+        let me=this;
+        await getDomainDataById(
+          {id:me.id},
+          (response) => {
+            this.item=response;
+           // alert(this.item);
+            //this.fetchMenusTreeData();
+//            this.fetchFunctionsData();
+           
+          },
+          (error) => {
+            console.warn(error);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          },
+          (exception) => {
+            console.warn(exception);
+            // this.$message({ type: "error", message: "查询协议列表失败,请重新查询", duration: 2000, onClose: () => {} });
+          }
+        );
+        this.getCostOneById();
+      },
+    },
+    watch: {
+      id(){
+          if(this.id&&this.id.length>0){
+            this.getDomainDataById();
+          }
+      }
+    },
+  }
+</script>
+<style lang="less" scoped>
+</style>

src/router/index.js

@@ -192,6 +192,7 @@ import myTest from '@/views/pages/personnel/myTest';
 
 
 //系统管理
+import DomainManager from '@/components/domain/domain-manager';
 import RoleManager from '@/components/roleManager/role-manager';
 import Functions from '@/components/functions/functions';
 import Menu from '@/components/menu/menu';
@@ -945,6 +946,12 @@ export default new Router({
       name: '操作管理',
       component: Functions,
     },
+    {
+      hash: '',
+      path: '/domainManager',
+      name: '域名管理',
+      component: DomainManager,
+    },
     // {
     //   hash: '',
     //   path: '/column',