upload UI source codeHEADmain

14 files changed, 2619 insertions, 0 deletions

diff --git a/UI source code/dns_mapping_ui-master/src/views/system/dept/index.vue b/UI source code/dns_mapping_ui-master/src/views/system/dept/index.vue
new file mode 100644
index 0000000..d02b846
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/dept/index.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input v-model="query.name" clearable size="small" placeholder="输入部门名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
+          <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+        </el-select>
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission" />
+    </div>
+    <!--表单组件-->
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
+      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="部门名称" prop="name">
+          <el-input v-model="form.name" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="部门排序" prop="deptSort">
+          <el-input-number
+            v-model.number="form.deptSort"
+            :min="0"
+            :max="999"
+            controls-position="right"
+            style="width: 370px;"
+          />
+        </el-form-item>
+        <el-form-item label="顶级部门">
+          <el-radio-group v-model="form.isTop" style="width: 140px">
+            <el-radio label="1">是</el-radio>
+            <el-radio label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="状态" prop="enabled">
+          <el-radio v-for="item in dict.dept_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
+        </el-form-item>
+        <el-form-item v-if="form.isTop === '0'" style="margin-bottom: 0;" label="上级部门" prop="pid">
+          <treeselect
+            v-model="form.pid"
+            :load-options="loadDepts"
+            :options="depts"
+            style="width: 370px;"
+            placeholder="选择上级类目"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      lazy
+      :load="getDeptDatas"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :data="crud.data"
+      row-key="id"
+      @select="crud.selectChange"
+      @select-all="crud.selectAllChange"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column :selectable="checkboxT" type="selection" width="55" />
+      <el-table-column label="名称" prop="name" />
+      <el-table-column label="排序" prop="deptSort" />
+      <el-table-column label="状态" align="center" prop="enabled">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.enabled"
+            :disabled="scope.row.id === 1"
+            active-color="#409EFF"
+            inactive-color="#F56C6C"
+            @change="changeEnabled(scope.row, scope.row.enabled,)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建日期" />
+      <el-table-column v-if="checkPer(['admin','dept:edit','dept:del'])" label="操作" width="130px" align="center" fixed="right">
+        <template slot-scope="scope">
+          <udOperation
+            :data="scope.row"
+            :permission="permission"
+            :disabled-dle="scope.row.id === 1"
+            msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import crudDept from '@/api/system/dept'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import DateRangePicker from '@/components/DateRangePicker'
+
+const defaultForm = { id: null, name: null, isTop: '1', subCount: 0, pid: null, deptSort: 999, enabled: 'true' }
+export default {
+  name: 'Dept',
+  components: { Treeselect, crudOperation, rrOperation, udOperation, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  // 设置数据字典
+  dicts: ['dept_status'],
+  data() {
+    return {
+      depts: [],
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        deptSort: [
+          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
+        ]
+      },
+      permission: {
+        add: ['admin', 'dept:add'],
+        edit: ['admin', 'dept:edit'],
+        del: ['admin', 'dept:del']
+      },
+      enabledTypeOptions: [
+        { key: 'true', display_name: '正常' },
+        { key: 'false', display_name: '禁用' }
+      ]
+    }
+  },
+  methods: {
+    getDeptDatas(tree, treeNode, resolve) {
+      const params = { pid: tree.id }
+      setTimeout(() => {
+        crudDept.getDepts(params).then(res => {
+          resolve(res.content)
+        })
+      }, 100)
+    },
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU](crud, form) {
+      if (form.pid !== null) {
+        form.isTop = '0'
+      } else if (form.id !== null) {
+        form.isTop = '1'
+      }
+      form.enabled = `${form.enabled}`
+      if (form.id != null) {
+        this.getSupDepts(form.id)
+      } else {
+        this.getDepts()
+      }
+    },
+    getSupDepts(id) {
+      crudDept.getDeptSuperior(id).then(res => {
+        const date = res.content
+        this.buildDepts(date)
+        this.depts = date
+      })
+    },
+    buildDepts(depts) {
+      depts.forEach(data => {
+        if (data.children) {
+          this.buildDepts(data.children)
+        }
+        if (data.hasChildren && !data.children) {
+          data.children = null
+        }
+      })
+    },
+    getDepts() {
+      crudDept.getDepts({ enabled: true }).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    // 获取弹窗内部门数据
+    loadDepts({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        crudDept.getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+          parentNode.children = res.content.map(function(obj) {
+            if (obj.hasChildren) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 100)
+        })
+      }
+    },
+    // 提交前的验证
+    [CRUD.HOOK.afterValidateCU]() {
+      if (this.form.pid !== null && this.form.pid === this.form.id) {
+        this.$message({
+          message: '上级部门不能为空',
+          type: 'warning'
+        })
+        return false
+      }
+      if (this.form.isTop === '1') {
+        this.form.pid = null
+      }
+      return true
+    },
+    // 改变状态
+    changeEnabled(data, val) {
+      this.$confirm('此操作将 "' + this.dict.label.dept_status[val] + '" ' + data.name + '部门, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        crudDept.edit(data).then(res => {
+          this.crud.notify(this.dict.label.dept_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        }).catch(err => {
+          data.enabled = !data.enabled
+          console.log(err.response.data.message)
+        })
+      }).catch(() => {
+        data.enabled = !data.enabled
+      })
+    },
+    checkboxT(row, rowIndex) {
+      return row.id !== 1
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+ ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/dict/dictDetail.vue b/UI source code/dns_mapping_ui-master/src/views/system/dict/dictDetail.vue
new file mode 100644
index 0000000..32756da
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/dict/dictDetail.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div v-if="query.dictName === ''">
+      <div class="my-code">点击字典查看详情</div>
+    </div>
+    <div v-else>
+      <!--工具栏-->
+      <div class="head-container">
+        <div v-if="crud.props.searchToggle">
+          <!-- 搜索 -->
+          <el-input v-model="query.label" clearable size="small" placeholder="输入字典标签查询" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+          <rrOperation />
+        </div>
+      </div>
+      <!--表单组件-->
+      <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
+        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+          <el-form-item label="字典标签" prop="label">
+            <el-input v-model="form.label" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="字典值" prop="value">
+            <el-input v-model="form.value" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="排序" prop="dictSort">
+            <el-input-number v-model.number="form.dictSort" :min="0" :max="999" controls-position="right" style="width: 370px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
+      </el-dialog>
+      <!--表格渲染-->
+      <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+        <el-table-column label="所属字典">
+          {{ query.dictName }}
+        </el-table-column>
+        <el-table-column prop="label" label="字典标签" />
+        <el-table-column prop="value" label="字典值" />
+        <el-table-column prop="dictSort" label="排序" />
+        <el-table-column v-if="checkPer(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
+          <template slot-scope="scope">
+            <udOperation
+              :data="scope.row"
+              :permission="permission"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudDictDetail from '@/api/system/dictDetail'
+import CRUD, { presenter, header, form } from '@crud/crud'
+import pagination from '@crud/Pagination'
+import rrOperation from '@crud/RR.operation'
+import udOperation from '@crud/UD.operation'
+
+const defaultForm = { id: null, label: null, value: null, dictSort: 999 }
+
+export default {
+  components: { pagination, rrOperation, udOperation },
+  cruds() {
+    return [
+      CRUD({ title: '字典详情', url: 'api/dictDetail', query: { dictName: '' }, sort: ['dictSort,asc', 'id,desc'],
+        crudMethod: { ...crudDictDetail },
+        optShow: {
+          add: true,
+          edit: true,
+          del: true,
+          reset: false
+        },
+        queryOnPresenterCreated: false
+      })
+    ]
+  },
+  mixins: [
+    presenter(),
+    header(),
+    form(function() {
+      return Object.assign({ dict: { id: this.dictId }}, defaultForm)
+    })],
+  data() {
+    return {
+      dictId: null,
+      rules: {
+        label: [
+          { required: true, message: '请输入字典标签', trigger: 'blur' }
+        ],
+        value: [
+          { required: true, message: '请输入字典值', trigger: 'blur' }
+        ],
+        dictSort: [
+          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
+        ]
+      },
+      permission: {
+        add: ['admin', 'dict:add'],
+        edit: ['admin', 'dict:edit'],
+        del: ['admin', 'dict:del']
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/dict/index.vue b/UI source code/dns_mapping_ui-master/src/views/system/dict/index.vue
new file mode 100644
index 0000000..f102023
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/dict/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="app-container">
+    <!--表单组件-->
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="form.name" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input v-model="form.description" style="width: 370px;" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!-- 字典列表 -->
+    <el-row :gutter="10">
+      <el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px">
+        <el-card class="box-card">
+          <!--工具栏-->
+          <div class="head-container">
+            <div v-if="crud.props.searchToggle">
+              <!-- 搜索 -->
+              <el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+              <rrOperation />
+            </div>
+            <crudOperation :permission="permission" />
+          </div>
+          <!--表格渲染-->
+          <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
+            <el-table-column type="selection" width="55" />
+            <el-table-column :show-overflow-tooltip="true" prop="name" label="名称" />
+            <el-table-column :show-overflow-tooltip="true" prop="description" label="描述" />
+            <el-table-column v-if="checkPer(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
+              <template slot-scope="scope">
+                <udOperation
+                  :data="scope.row"
+                  :permission="permission"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <pagination />
+        </el-card>
+      </el-col>
+      <!-- 字典详情列表 -->
+      <el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>字典详情</span>
+            <el-button
+              v-if="checkPer(['admin','dict:add']) && this.$refs.dictDetail && this.$refs.dictDetail.query.dictName"
+              class="filter-item"
+              size="mini"
+              style="float: right;padding: 4px 10px"
+              type="primary"
+              icon="el-icon-plus"
+              @click="$refs.dictDetail && $refs.dictDetail.crud.toAdd()"
+            >新增</el-button>
+          </div>
+          <dictDetail ref="dictDetail" :permission="permission" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import dictDetail from './dictDetail'
+import crudDict from '@/api/system/dict'
+import CRUD, { presenter, header, form } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import rrOperation from '@crud/RR.operation'
+import udOperation from '@crud/UD.operation'
+
+const defaultForm = { id: null, name: null, description: null, dictDetails: [] }
+
+export default {
+  name: 'Dict',
+  components: { crudOperation, pagination, rrOperation, udOperation, dictDetail },
+  cruds() {
+    return [
+      CRUD({ title: '字典', url: 'api/dict', crudMethod: { ...crudDict }})
+    ]
+  },
+  mixins: [presenter(), header(), form(defaultForm)],
+  data() {
+    return {
+      queryTypeOptions: [
+        { key: 'name', display_name: '字典名称' },
+        { key: 'description', display_name: '描述' }
+      ],
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ]
+      },
+      permission: {
+        add: ['admin', 'dict:add'],
+        edit: ['admin', 'dict:edit'],
+        del: ['admin', 'dict:del']
+      }
+    }
+  },
+  methods: {
+    // 获取数据前设置好接口地址
+    [CRUD.HOOK.beforeRefresh]() {
+      if (this.$refs.dictDetail) {
+        this.$refs.dictDetail.query.dictName = ''
+      }
+      return true
+    },
+    // 选中字典后，设置字典详情数据
+    handleCurrentChange(val) {
+      if (val) {
+        this.$refs.dictDetail.query.dictName = val.name
+        this.$refs.dictDetail.dictId = val.id
+        this.$refs.dictDetail.crud.toQuery()
+      }
+    },
+    // 编辑前将字典明细临时清空，避免日志入库数据过长
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      // 将角色的菜单清空，避免日志入库数据过长
+      form.dictDetails = null
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/job/index.vue b/UI source code/dns_mapping_ui-master/src/views/system/job/index.vue
new file mode 100644
index 0000000..e17ea75
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/job/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <eHeader :dict="dict" :permission="permission" />
+      <crudOperation :permission="permission" />
+    </div>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="jobSort" label="排序">
+        <template slot-scope="scope">
+          {{ scope.row.jobSort }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" align="center">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.enabled"
+            active-color="#409EFF"
+            inactive-color="#F56C6C"
+            @change="changeEnabled(scope.row, scope.row.enabled)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建日期" />
+      <!--   编辑与删除   -->
+      <el-table-column
+        v-if="checkPer(['admin','job:edit','job:del'])"
+        label="操作"
+        width="130px"
+        align="center"
+        fixed="right"
+      >
+        <template slot-scope="scope">
+          <udOperation
+            :data="scope.row"
+            :permission="permission"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <pagination />
+    <!--表单渲染-->
+    <eForm :job-status="dict.job_status" />
+  </div>
+</template>
+
+<script>
+import crudJob from '@/api/system/job'
+import eHeader from './module/header'
+import eForm from './module/form'
+import CRUD, { presenter } from '@crud/crud'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import udOperation from '@crud/UD.operation'
+export default {
+  name: 'Job',
+  components: { eHeader, eForm, crudOperation, pagination, udOperation },
+  cruds() {
+    return CRUD({
+      title: '岗位',
+      url: 'api/job',
+      sort: ['jobSort,asc', 'id,desc'],
+      crudMethod: { ...crudJob }
+    })
+  },
+  mixins: [presenter()],
+  // 数据字典
+  dicts: ['job_status'],
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'job:add'],
+        edit: ['admin', 'job:edit'],
+        del: ['admin', 'job:del']
+      }
+    }
+  },
+  methods: {
+    // 改变状态
+    changeEnabled(data, val) {
+      this.$confirm('此操作将 "' + this.dict.label.job_status[val] + '" ' + data.name + '岗位, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // eslint-disable-next-line no-undef
+        crudJob.edit(data).then(() => {
+          // eslint-disable-next-line no-undef
+          this.crud.notify(this.dict.label.job_status[val] + '成功', 'success')
+        }).catch(err => {
+          data.enabled = !data.enabled
+          console.log(err.data.message)
+        })
+      }).catch(() => {
+        data.enabled = !data.enabled
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/job/module/form.vue b/UI source code/dns_mapping_ui-master/src/views/system/job/module/form.vue
new file mode 100644
index 0000000..aa538fb
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/job/module/form.vue
@@ -0,0 +1,110 @@
+<template>
+  <el-dialog
+    append-to-body
+    :close-on-click-modal="false"
+    :before-close="crud.cancelCU"
+    :visible="crud.status.cu > 0"
+    :title="crud.status.title"
+    width="500px"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      size="small"
+      label-width="80px"
+    >
+      <el-form-item
+        label="名称"
+        prop="name"
+      >
+        <el-input
+          v-model="form.name"
+          style="width: 370px;"
+        />
+      </el-form-item>
+      <el-form-item
+        label="排序"
+        prop="jobSort"
+      >
+        <el-input-number
+          v-model.number="form.jobSort"
+          :min="0"
+          :max="999"
+          controls-position="right"
+          style="width: 370px;"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="form.pid !== 0"
+        label="状态"
+        prop="enabled"
+      >
+        <el-radio
+          v-for="item in jobStatus"
+          :key="item.id"
+          v-model="form.enabled"
+          :label="item.value === 'true'"
+        >
+          {{ item.label }}
+        </el-radio>
+      </el-form-item>
+    </el-form>
+    <div
+      slot="footer"
+      class="dialog-footer"
+    >
+      <el-button
+        type="text"
+        @click="crud.cancelCU"
+      >
+        取消
+      </el-button>
+      <el-button
+        :loading="crud.status.cu === 2"
+        type="primary"
+        @click="crud.submitCU"
+      >
+        确认
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { form } from '@crud/crud'
+
+const defaultForm = {
+  id: null,
+  name: '',
+  jobSort: 999,
+  enabled: true
+}
+export default {
+  mixins: [form(defaultForm)],
+  props: {
+    jobStatus: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        jobSort: [
+          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/job/module/header.vue b/UI source code/dns_mapping_ui-master/src/views/system/job/module/header.vue
new file mode 100644
index 0000000..6503317
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/job/module/header.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    v-if="crud.props.searchToggle"
+  >
+    <el-input v-model="query.name" clearable size="small" placeholder="输入岗位名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+    <date-range-picker v-model="query.createTime" class="date-item" />
+    <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 90px" @change="crud.toQuery">
+      <el-option v-for="item in dict.dict.job_status" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+    <rrOperation />
+  </div>
+</template>
+
+<script>
+import { header } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import DateRangePicker from '@/components/DateRangePicker'
+export default {
+  components: { rrOperation, DateRangePicker },
+  mixins: [header()],
+  props: {
+    dict: {
+      type: Object,
+      required: true
+    },
+    permission: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/menu/index.vue b/UI source code/dns_mapping_ui-master/src/views/system/menu/index.vue
new file mode 100644
index 0000000..e4800e1
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/menu/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input v-model="query.blurry" clearable size="small" placeholder="模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission" />
+    </div>
+    <!--表单渲染-->
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group v-model="form.type" size="mini" style="width: 178px">
+            <el-radio-button label="0">目录</el-radio-button>
+            <el-radio-button label="1">菜单</el-radio-button>
+            <el-radio-button label="2">按钮</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon">
+          <el-popover
+            placement="bottom-start"
+            width="450"
+            trigger="click"
+            @show="$refs['iconSelect'].reset()"
+          >
+            <IconSelect ref="iconSelect" @selected="selected" />
+            <el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
+              <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
+              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+            </el-input>
+          </el-popover>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame">
+          <el-radio-group v-model="form.iFrame" size="mini">
+            <el-radio-button label="true">是</el-radio-button>
+            <el-radio-button label="false">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache">
+          <el-radio-group v-model="form.cache" size="mini">
+            <el-radio-button label="true">是</el-radio-button>
+            <el-radio-button label="false">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden">
+          <el-radio-group v-model="form.hidden" size="mini">
+            <el-radio-button label="false">是</el-radio-button>
+            <el-radio-button label="true">否</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title">
+          <el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" />
+        </el-form-item>
+        <el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title">
+          <el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" />
+        </el-form-item>
+        <el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission">
+          <el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识" style="width: 178px;" />
+        </el-form-item>
+        <el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path">
+          <el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" />
+        </el-form-item>
+        <el-form-item label="菜单排序" prop="menuSort">
+          <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" />
+        </el-form-item>
+        <el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称" prop="componentName">
+          <el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" />
+        </el-form-item>
+        <el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径" prop="component">
+          <el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" />
+        </el-form-item>
+        <el-form-item label="上级类目" prop="pid">
+          <treeselect
+            v-model="form.pid"
+            :options="menus"
+            :load-options="loadMenus"
+            style="width: 450px;"
+            placeholder="选择上级类目"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      lazy
+      :load="getMenus"
+      :data="crud.data"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      row-key="id"
+      @select="crud.selectChange"
+      @select-all="crud.selectAllChange"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="125px" prop="title" />
+      <el-table-column prop="icon" label="图标" align="center" width="60px">
+        <template slot-scope="scope">
+          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="menuSort" align="center" label="排序">
+        <template slot-scope="scope">
+          {{ scope.row.menuSort }}
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
+      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
+      <el-table-column prop="iFrame" label="外链" width="75px">
+        <template slot-scope="scope">
+          <span v-if="scope.row.iFrame">是</span>
+          <span v-else>否</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="cache" label="缓存" width="75px">
+        <template slot-scope="scope">
+          <span v-if="scope.row.cache">是</span>
+          <span v-else>否</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="hidden" label="可见" width="75px">
+        <template slot-scope="scope">
+          <span v-if="scope.row.hidden">否</span>
+          <span v-else>是</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建日期" width="135px" />
+      <el-table-column v-if="checkPer(['admin','menu:edit','menu:del'])" label="操作" width="130px" align="center" fixed="right">
+        <template slot-scope="scope">
+          <udOperation
+            :data="scope.row"
+            :permission="permission"
+            msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import crudMenu from '@/api/system/menu'
+import IconSelect from '@/components/IconSelect'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import DateRangePicker from '@/components/DateRangePicker'
+
+// crud交由presenter持有
+const defaultForm = { id: null, title: null, menuSort: 999, path: null, component: null, componentName: null, iFrame: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null }
+export default {
+  name: 'Menu',
+  components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      menus: [],
+      permission: {
+        add: ['admin', 'menu:add'],
+        edit: ['admin', 'menu:edit'],
+        del: ['admin', 'menu:del']
+      },
+      rules: {
+        title: [
+          { required: true, message: '请输入标题', trigger: 'blur' }
+        ],
+        path: [
+          { required: true, message: '请输入地址', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU](crud, form) {
+      this.menus = []
+      if (form.id != null) {
+        if (form.pid === null) {
+          form.pid = 0
+        }
+        this.getSupDepts(form.id)
+      } else {
+        this.menus.push({ id: 0, label: '顶级类目', children: null })
+      }
+    },
+    getMenus(tree, treeNode, resolve) {
+      const params = { pid: tree.id }
+      setTimeout(() => {
+        crudMenu.getMenus(params).then(res => {
+          resolve(res.content)
+        })
+      }, 100)
+    },
+    getSupDepts(id) {
+      crudMenu.getMenuSuperior(id).then(res => {
+        const children = res.map(function(obj) {
+          if (!obj.leaf && !obj.children) {
+            obj.children = null
+          }
+          return obj
+        })
+        this.menus = [{ id: 0, label: '顶级类目', children: children }]
+      })
+    },
+    loadMenus({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        crudMenu.getMenusTree(parentNode.id).then(res => {
+          parentNode.children = res.map(function(obj) {
+            if (!obj.leaf) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 100)
+        })
+      }
+    },
+    // 选中图标
+    selected(name) {
+      this.form.icon = name
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+ ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/role/index.vue b/UI source code/dns_mapping_ui-master/src/views/system/role/index.vue
new file mode 100644
index 0000000..242ed1a
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/role/index.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input v-model="query.blurry" size="small" clearable placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission" />
+    </div>
+    <!-- 表单渲染 -->
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="520px">
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="form.name" style="width: 380px;" />
+        </el-form-item>
+        <el-form-item label="角色级别" prop="level">
+          <el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" />
+        </el-form-item>
+        <el-form-item label="数据范围" prop="dataScope">
+          <el-select v-model="form.dataScope" style="width: 140px" placeholder="请选择数据范围" @change="changeScope">
+            <el-option
+              v-for="item in dateScopes"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts">
+          <treeselect
+            v-model="deptDatas"
+            :load-options="loadDepts"
+            :options="depts"
+            multiple
+            style="width: 380px"
+            placeholder="请选择"
+          />
+        </el-form-item>
+        <el-form-item label="描述信息" prop="description">
+          <el-input v-model="form.description" style="width: 380px;" rows="5" type="textarea" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <el-row :gutter="15">
+      <!--角色管理-->
+      <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="17" style="margin-bottom: 10px">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <span class="role-span">角色列表</span>
+          </div>
+          <el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" :data="crud.data" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
+            <el-table-column :selectable="checkboxT" type="selection" width="55" />
+            <el-table-column prop="name" label="名称" />
+            <el-table-column prop="dataScope" label="数据权限" />
+            <el-table-column prop="level" label="角色级别" />
+            <el-table-column :show-overflow-tooltip="true" prop="description" label="描述" />
+            <el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期" />
+            <el-table-column v-if="checkPer(['admin','roles:edit','roles:del'])" label="操作" width="130px" align="center" fixed="right">
+              <template slot-scope="scope">
+                <udOperation
+                  v-if="scope.row.level >= level"
+                  :data="scope.row"
+                  :permission="permission"
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+          <!--分页组件-->
+          <pagination />
+        </el-card>
+      </el-col>
+      <!-- 菜单授权 -->
+      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
+        <el-card class="box-card" shadow="never">
+          <div slot="header" class="clearfix">
+            <el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top">
+              <span class="role-span">菜单分配</span>
+            </el-tooltip>
+            <el-button
+              v-permission="['admin','roles:edit']"
+              :disabled="!showButton"
+              :loading="menuLoading"
+              icon="el-icon-check"
+              size="mini"
+              style="float: right; padding: 6px 9px"
+              type="primary"
+              @click="saveMenu"
+            >保存</el-button>
+          </div>
+          <el-tree
+            ref="menu"
+            lazy
+            :data="menus"
+            :default-checked-keys="menuIds"
+            :load="getMenuDatas"
+            :props="defaultProps"
+            check-strictly
+            accordion
+            show-checkbox
+            node-key="id"
+            @check="menuChange"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import crudRoles from '@/api/system/role'
+import { getDepts, getDeptSuperior } from '@/api/system/dept'
+import { getMenusTree, getChild } from '@/api/system/menu'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import pagination from '@crud/Pagination'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+import DateRangePicker from '@/components/DateRangePicker'
+
+const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 }
+export default {
+  name: 'Role',
+  components: { Treeselect, pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
+      dateScopes: ['全部', '本级', '自定义'], level: 3,
+      currentId: 0, menuLoading: false, showButton: false,
+      menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用
+      permission: {
+        add: ['admin', 'roles:add'],
+        edit: ['admin', 'roles:edit'],
+        del: ['admin', 'roles:del']
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入名称', trigger: 'blur' }
+        ],
+        permission: [
+          { required: true, message: '请输入权限', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    crudRoles.getLevel().then(data => {
+      this.level = data.level
+    })
+  },
+  methods: {
+    getMenuDatas(node, resolve) {
+      setTimeout(() => {
+        getMenusTree(node.data.id ? node.data.id : 0).then(res => {
+          resolve(res)
+        })
+      }, 100)
+    },
+    [CRUD.HOOK.afterRefresh]() {
+      this.$refs.menu.setCheckedKeys([])
+    },
+    // 新增前初始化部门信息
+    [CRUD.HOOK.beforeToAdd](crud, form) {
+      this.deptDatas = []
+      form.menus = null
+    },
+    // 编辑前初始化自定义数据权限的部门信息
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      this.deptDatas = []
+      if (form.dataScope === '自定义') {
+        this.getSupDepts(form.depts)
+      }
+      const _this = this
+      form.depts.forEach(function(dept) {
+        _this.deptDatas.push(dept.id)
+      })
+      // 将角色的菜单清空，避免日志入库数据过长
+      form.menus = null
+    },
+    // 提交前做的操作
+    [CRUD.HOOK.afterValidateCU](crud) {
+      if (crud.form.dataScope === '自定义' && this.deptDatas.length === 0) {
+        this.$message({
+          message: '自定义数据权限不能为空',
+          type: 'warning'
+        })
+        return false
+      } else if (crud.form.dataScope === '自定义') {
+        const depts = []
+        this.deptDatas.forEach(function(data) {
+          const dept = { id: data }
+          depts.push(dept)
+        })
+        crud.form.depts = depts
+      } else {
+        crud.form.depts = []
+      }
+      return true
+    },
+    // 触发单选
+    handleCurrentChange(val) {
+      if (val) {
+        const _this = this
+        // 清空菜单的选中
+        this.$refs.menu.setCheckedKeys([])
+        // 保存当前的角色id
+        this.currentId = val.id
+        // 初始化默认选中的key
+        this.menuIds = []
+        val.menus.forEach(function(data) {
+          _this.menuIds.push(data.id)
+        })
+        this.showButton = true
+      }
+    },
+    menuChange(menu) {
+      // 获取该节点的所有子节点，id 包含自身
+      getChild(menu.id).then(childIds => {
+        // 判断是否在 menuIds 中，如果存在则删除，否则添加
+        if (this.menuIds.indexOf(menu.id) !== -1) {
+          for (let i = 0; i < childIds.length; i++) {
+            const index = this.menuIds.indexOf(childIds[i])
+            if (index !== -1) {
+              this.menuIds.splice(index, 1)
+            }
+          }
+        } else {
+          for (let i = 0; i < childIds.length; i++) {
+            const index = this.menuIds.indexOf(childIds[i])
+            if (index === -1) {
+              this.menuIds.push(childIds[i])
+            }
+          }
+        }
+        this.$refs.menu.setCheckedKeys(this.menuIds)
+      })
+    },
+    // 保存菜单
+    saveMenu() {
+      this.menuLoading = true
+      const role = { id: this.currentId, menus: [] }
+      // 得到已选中的 key 值
+      this.menuIds.forEach(function(id) {
+        const menu = { id: id }
+        role.menus.push(menu)
+      })
+      crudRoles.editMenu(role).then(() => {
+        this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        this.menuLoading = false
+        this.update()
+      }).catch(err => {
+        this.menuLoading = false
+        console.log(err.response.data.message)
+      })
+    },
+    // 改变数据
+    update() {
+      // 无刷新更新 表格数据
+      crudRoles.get(this.currentId).then(res => {
+        for (let i = 0; i < this.crud.data.length; i++) {
+          if (res.id === this.crud.data[i].id) {
+            this.crud.data[i] = res
+            break
+          }
+        }
+      })
+    },
+    // 获取部门数据
+    getDepts() {
+      getDepts({ enabled: true }).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    getSupDepts(depts) {
+      const ids = []
+      depts.forEach(dept => {
+        ids.push(dept.id)
+      })
+      getDeptSuperior(ids).then(res => {
+        const date = res.content
+        this.buildDepts(date)
+        this.depts = date
+      })
+    },
+    buildDepts(depts) {
+      depts.forEach(data => {
+        if (data.children) {
+          this.buildDepts(data.children)
+        }
+        if (data.hasChildren && !data.children) {
+          data.children = null
+        }
+      })
+    },
+    // 获取弹窗内部门数据
+    loadDepts({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+          parentNode.children = res.content.map(function(obj) {
+            if (obj.hasChildren) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 200)
+        })
+      }
+    },
+    // 如果数据权限为自定义则获取部门数据
+    changeScope() {
+      if (this.form.dataScope === '自定义') {
+        this.getDepts()
+      }
+    },
+    checkboxT(row) {
+      return row.level >= this.level
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .role-span {
+    font-weight: bold;color: #303133;
+    font-size: 15px;
+  }
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+ ::v-deep .vue-treeselect__multi-value{
+    margin-bottom: 0;
+  }
+ ::v-deep .vue-treeselect__multi-value-item{
+    border: 0;
+    padding: 0;
+  }
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/timing/index.vue b/UI source code/dns_mapping_ui-master/src/views/system/timing/index.vue
new file mode 100644
index 0000000..bb3bf77
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/timing/index.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
+      <crudOperation :permission="permission">
+        <!-- 任务日志 -->
+        <el-button
+          slot="right"
+          class="filter-item"
+          size="mini"
+          type="info"
+          icon="el-icon-tickets"
+          @click="doLog"
+        >日志</el-button>
+      </crudOperation>
+      <Log ref="log" />
+    </div>
+    <!--Form表单-->
+    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" append-to-body width="730px">
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
+        <el-form-item label="任务名称" prop="jobName">
+          <el-input v-model="form.jobName" style="width: 220px;" />
+        </el-form-item>
+        <el-form-item label="任务描述" prop="description">
+          <el-input v-model="form.description" style="width: 220px;" />
+        </el-form-item>
+        <el-form-item label="Bean名称" prop="beanName">
+          <el-input v-model="form.beanName" style="width: 220px;" />
+        </el-form-item>
+        <el-form-item label="执行方法" prop="methodName">
+          <el-input v-model="form.methodName" style="width: 220px;" />
+        </el-form-item>
+        <el-form-item label="Cron表达式" prop="cronExpression">
+          <el-input v-model="form.cronExpression" style="width: 220px;" />
+        </el-form-item>
+        <el-form-item label="子任务ID">
+          <el-input v-model="form.subTask" placeholder="多个用逗号隔开，按顺序执行" style="width: 220px;" />
+        </el-form-item>
+        <el-form-item label="任务负责人" prop="personInCharge">
+          <el-input v-model="form.personInCharge" style="width: 220px;" />
+        </el-form-item>
+        <el-form-item label="告警邮箱" prop="email">
+          <el-input v-model="form.email" placeholder="多个邮箱用逗号隔开" style="width: 220px;" />
+        </el-form-item>
+        <el-form-item label="失败后暂停">
+          <el-radio-group v-model="form.pauseAfterFailure" style="width: 220px">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="任务状态">
+          <el-radio-group v-model="form.isPause" style="width: 220px">
+            <el-radio :label="false">启用</el-radio>
+            <el-radio :label="true">暂停</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="参数内容">
+          <el-input v-model="form.params" style="width: 556px;" rows="4" type="textarea" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+      <el-table-column :selectable="checkboxT" type="selection" width="55" />
+      <el-table-column :show-overflow-tooltip="true" prop="id" label="任务ID" />
+      <el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称" />
+      <el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
+      <el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法" />
+      <el-table-column :show-overflow-tooltip="true" prop="params" label="参数" />
+      <el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
+      <el-table-column :show-overflow-tooltip="true" prop="isPause" width="90px" label="状态">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.isPause ? 'warning' : 'success'">{{ scope.row.isPause ? '已暂停' : '运行中' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="true" prop="description" width="150px" label="描述" />
+      <el-table-column :show-overflow-tooltip="true" prop="createTime" width="136px" label="创建日期" />
+      <el-table-column v-if="checkPer(['admin','timing:edit','timing:del'])" label="操作" width="170px" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-button v-permission="['admin','timing:edit']" size="mini" style="margin-right: 3px;" type="text" @click="crud.toEdit(scope.row)">编辑</el-button>
+          <el-button v-permission="['admin','timing:edit']" style="margin-left: -2px" type="text" size="mini" @click="execute(scope.row.id)">执行</el-button>
+          <el-button v-permission="['admin','timing:edit']" style="margin-left: 3px" type="text" size="mini" @click="updateStatus(scope.row.id,scope.row.isPause ? '恢复' : '暂停')">
+            {{ scope.row.isPause ? '恢复' : '暂停' }}
+          </el-button>
+          <el-popover
+            :ref="scope.row.id"
+            v-permission="['admin','timing:del']"
+            placement="top"
+            width="200"
+          >
+            <p>确定停止并删除该任务吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
+            </div>
+            <el-button slot="reference" type="text" size="mini">删除</el-button>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <pagination />
+  </div>
+</template>
+
+<script>
+import crudJob from '@/api/system/timing'
+import Log from './log'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
+
+const defaultForm = { id: null, jobName: null, subTask: null, beanName: null, methodName: null, params: null, cronExpression: null, pauseAfterFailure: true, isPause: false, personInCharge: null, email: null, description: null }
+export default {
+  name: 'Timing',
+  components: { Log, pagination, crudOperation, rrOperation, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '定时任务', url: 'api/jobs', crudMethod: { ...crudJob }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      delLoading: false,
+      permission: {
+        add: ['admin', 'timing:add'],
+        edit: ['admin', 'timing:edit'],
+        del: ['admin', 'timing:del']
+      },
+      rules: {
+        jobName: [
+          { required: true, message: '请输入任务名称', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入任务描述', trigger: 'blur' }
+        ],
+        beanName: [
+          { required: true, message: '请输入Bean名称', trigger: 'blur' }
+        ],
+        methodName: [
+          { required: true, message: '请输入方法名称', trigger: 'blur' }
+        ],
+        cronExpression: [
+          { required: true, message: '请输入Cron表达式', trigger: 'blur' }
+        ],
+        personInCharge: [
+          { required: true, message: '请输入负责人名称', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 执行
+    execute(id) {
+      crudJob.execution(id).then(res => {
+        this.crud.notify('执行成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+      }).catch(err => {
+        console.log(err.response.data.message)
+      })
+    },
+    // 改变状态
+    updateStatus(id, status) {
+      if (status === '恢复') {
+        this.updateParams(id)
+      }
+      crudJob.updateIsPause(id).then(res => {
+        this.crud.toQuery()
+        this.crud.notify(status + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+      }).catch(err => {
+        console.log(err.response.data.message)
+      })
+    },
+    updateParams(id) {
+      console.log(id)
+    },
+    delMethod(id) {
+      this.delLoading = true
+      crudJob.del([id]).then(() => {
+        this.delLoading = false
+        this.$refs[id].doClose()
+        this.crud.dleChangePage(1)
+        this.crud.delSuccessNotify()
+        this.crud.toQuery()
+      }).catch(() => {
+        this.delLoading = false
+        this.$refs[id].doClose()
+      })
+    },
+    // 显示日志
+    doLog() {
+      this.$refs.log.dialog = true
+      this.$refs.log.doInit()
+    },
+    checkboxT(row, rowIndex) {
+      return row.id !== 1
+    }
+  }
+}
+</script>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/timing/log.vue b/UI source code/dns_mapping_ui-master/src/views/system/timing/log.vue
new file mode 100644
index 0000000..09c32ef
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/timing/log.vue
@@ -0,0 +1,104 @@
+<template>
+  <el-dialog :visible.sync="dialog" append-to-body title="执行日志" width="88%">
+    <!-- 搜索 -->
+    <div class="head-container">
+      <el-input v-model="query.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <date-range-picker v-model="query.createTime" class="date-item" />
+      <el-select v-model="query.isSuccess" placeholder="日志状态" clearable size="small" class="filter-item" style="width: 110px" @change="toQuery">
+        <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
+      </el-select>
+      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
+      <!-- 导出 -->
+      <div style="display: inline-block;">
+        <el-button
+          :loading="downloadLoading"
+          size="mini"
+          class="filter-item"
+          type="warning"
+          icon="el-icon-download"
+          @click="downloadMethod"
+        >导出</el-button>
+      </div>
+    </div>
+    <!--表格渲染-->
+    <el-table v-loading="loading" :data="data" style="width: 100%;margin-top: -10px;">
+      <el-table-column :show-overflow-tooltip="true" prop="jobName" label="任务名称" />
+      <el-table-column :show-overflow-tooltip="true" prop="beanName" label="Bean名称" />
+      <el-table-column :show-overflow-tooltip="true" prop="methodName" label="执行方法" />
+      <el-table-column :show-overflow-tooltip="true" prop="params" width="120px" label="参数" />
+      <el-table-column :show-overflow-tooltip="true" prop="cronExpression" label="cron表达式" />
+      <el-table-column prop="createTime" label="异常详情" width="110px">
+        <template slot-scope="scope">
+          <el-button v-show="scope.row.exceptionDetail" size="mini" type="text" @click="info(scope.row.exceptionDetail)">查看详情</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="true" align="center" prop="time" width="100px" label="耗时(毫秒)" />
+      <el-table-column align="center" prop="isSuccess" width="80px" label="状态">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.isSuccess ? 'success' : 'danger'">{{ scope.row.isSuccess ? '成功' : '失败' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期" />
+    </el-table>
+    <el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
+      <pre v-highlightjs="errorInfo"><code class="java" /></pre>
+    </el-dialog>
+    <!--分页组件-->
+    <el-pagination
+      :total="total"
+      :current-page="page + 1"
+      :page-size="6"
+      style="margin-top:8px;"
+      layout="total, prev, pager, next"
+      @size-change="sizeChange"
+      @current-change="pageChange"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import crud from '@/mixins/crud'
+import DateRangePicker from '@/components/DateRangePicker'
+export default {
+  components: { DateRangePicker },
+  mixins: [crud],
+  data() {
+    return {
+      title: '任务日志',
+      errorInfo: '', errorDialog: false,
+      enabledTypeOptions: [
+        { key: 'true', display_name: '成功' },
+        { key: 'false', display_name: '失败' }
+      ]
+    }
+  },
+  methods: {
+    doInit() {
+      this.$nextTick(() => {
+        this.init()
+      })
+    },
+    // 获取数据前设置好接口地址
+    beforeInit() {
+      this.url = 'api/jobs/logs'
+      this.size = 6
+      return true
+    },
+    // 异常详情
+    info(errorInfo) {
+      this.errorInfo = errorInfo
+      this.errorDialog = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .java.hljs{
+    color: #444;
+    background: #ffffff !important;
+  }
+ ::v-deep .el-dialog__body{
+    padding: 0 20px 10px 20px !important;
+  }
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/user/center.vue b/UI source code/dns_mapping_ui-master/src/views/system/user/center.vue
new file mode 100644
index 0000000..1cc5681
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/user/center.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div style="text-align: center">
+              <div class="el-upload">
+                <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" title="点击上传头像" class="avatar" @click="toggleShow">
+                <myUpload
+                  v-model="show"
+                  :headers="headers"
+                  :url="updateAvatarApi"
+                  @crop-upload-success="cropUploadSuccess"
+                />
+              </div>
+            </div>
+            <ul class="user-info">
+              <li><div style="height: 100%"><svg-icon icon-class="login" /> 登录账号<div class="user-right">{{ user.username }}</div></div></li>
+              <li><svg-icon icon-class="user1" /> 用户昵称 <div class="user-right">{{ user.nickName }}</div></li>
+              <li><svg-icon icon-class="dept" /> 所属部门 <div class="user-right"> {{ user.dept.name }}</div></li>
+              <li><svg-icon icon-class="phone" /> 手机号码 <div class="user-right">{{ user.phone }}</div></li>
+              <li><svg-icon icon-class="email" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li>
+              <li>
+                <svg-icon icon-class="anq" /> 安全设置
+                <div class="user-right">
+                  <a @click="$refs.pass.dialog = true">修改密码</a>
+                  <a @click="$refs.email.dialog = true">修改邮箱</a>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
+        <!--    用户资料    -->
+        <el-card class="box-card">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="用户资料" name="first">
+              <el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="small" label-width="65px">
+                <el-form-item label="昵称" prop="nickName">
+                  <el-input v-model="form.nickName" style="width: 35%" />
+                  <span style="color: #C0C0C0;margin-left: 10px;">用户昵称不作为登录使用</span>
+                </el-form-item>
+                <el-form-item label="手机号" prop="phone">
+                  <el-input v-model="form.phone" style="width: 35%;" />
+                  <span style="color: #C0C0C0;margin-left: 10px;">手机号码不能重复</span>
+                </el-form-item>
+                <el-form-item label="性别">
+                  <el-radio-group v-model="form.gender" style="width: 178px">
+                    <el-radio label="男">男</el-radio>
+                    <el-radio label="女">女</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item label="">
+                  <el-button :loading="saveLoading" size="mini" type="primary" @click="doSubmit">保存配置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <!--    操作日志    -->
+            <el-tab-pane label="操作日志" name="second">
+              <el-table v-loading="loading" :data="data" style="width: 100%;">
+                <el-table-column prop="description" label="行为" />
+                <el-table-column prop="requestIp" label="IP" />
+                <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
+                <el-table-column prop="browser" label="浏览器" />
+                <el-table-column prop="time" label="请求耗时" align="center">
+                  <template slot-scope="scope">
+                    <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
+                    <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
+                    <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  align="right"
+                >
+                  <template slot="header">
+                    <div style="display:inline-block;float: right;cursor: pointer" @click="init">创建日期<i class="el-icon-refresh" style="margin-left: 40px" /></div>
+                  </template>
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.createTime }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <!--分页组件-->
+              <el-pagination
+                :total="total"
+                :current-page="page + 1"
+                style="margin-top: 8px;"
+                layout="total, prev, pager, next, sizes"
+                @size-change="sizeChange"
+                @current-change="pageChange"
+              />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+    <updateEmail ref="email" :email="user.email" />
+    <updatePass ref="pass" />
+  </div>
+</template>
+
+<script>
+import myUpload from 'vue-image-crop-upload'
+import { mapGetters } from 'vuex'
+import updatePass from './center/updatePass'
+import updateEmail from './center/updateEmail'
+import { getToken } from '@/utils/auth'
+import store from '@/store'
+import { isvalidPhone } from '@/utils/validate'
+import crud from '@/mixins/crud'
+import { editUser } from '@/api/system/user'
+import Avatar from '@/assets/images/avatar.png'
+export default {
+  name: 'Center',
+  components: { updatePass, updateEmail, myUpload },
+  mixins: [crud],
+  data() {
+    // 自定义验证
+    const validPhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入电话号码'))
+      } else if (!isvalidPhone(value)) {
+        callback(new Error('请输入正确的11位手机号码'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      show: false,
+      Avatar: Avatar,
+      activeName: 'first',
+      saveLoading: false,
+      headers: {
+        'Authorization': getToken()
+      },
+      form: {},
+      rules: {
+        nickName: [
+          { required: true, message: '请输入用户昵称', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, trigger: 'blur', validator: validPhone }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'user',
+      'updateAvatarApi',
+      'baseApi'
+    ])
+  },
+  created() {
+    this.form = { id: this.user.id, nickName: this.user.nickName, gender: this.user.gender, phone: this.user.phone }
+    store.dispatch('GetInfo').then(() => {})
+  },
+  methods: {
+    toggleShow() {
+      this.show = !this.show
+    },
+    handleClick(tab, event) {
+      if (tab.name === 'second') {
+        this.init()
+      }
+    },
+    beforeInit() {
+      this.url = 'api/logs/user'
+      return true
+    },
+    cropUploadSuccess(jsonData, field) {
+      store.dispatch('GetInfo').then(() => {})
+    },
+    doSubmit() {
+      if (this.$refs['form']) {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.saveLoading = true
+            editUser(this.form).then(() => {
+              this.editSuccessNotify()
+              store.dispatch('GetInfo').then(() => {})
+              this.saveLoading = false
+            }).catch(() => {
+              this.saveLoading = false
+            })
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+  .avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+  }
+  .user-info {
+    padding-left: 0;
+    list-style: none;
+    li{
+      border-bottom: 1px solid #F0F3F4;
+      padding: 11px 0;
+      font-size: 13px;
+    }
+    .user-right {
+      float: right;
+      a{
+        color: #317EF3;
+      }
+    }
+  }
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/user/center/updateEmail.vue b/UI source code/dns_mapping_ui-master/src/views/system/user/center/updateEmail.vue
new file mode 100644
index 0000000..b246684
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/user/center/updateEmail.vue
@@ -0,0 +1,137 @@
+<template>
+  <div style="display: inline-block;">
+    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="title" append-to-body width="475px" @close="cancel">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
+        <el-form-item label="新邮箱" prop="email">
+          <el-input v-model="form.email" auto-complete="on" style="width: 200px;" />
+          <el-button :loading="codeLoading" :disabled="isDisabled" size="small" @click="sendCode">{{ buttonName }}</el-button>
+        </el-form-item>
+        <el-form-item label="验证码" prop="code">
+          <el-input v-model="form.code" style="width: 320px;" />
+        </el-form-item>
+        <el-form-item label="当前密码" prop="pass">
+          <el-input v-model="form.pass" type="password" style="width: 320px;" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { validEmail } from '@/utils/validate'
+import { updateEmail } from '@/api/system/user'
+import { resetEmail } from '@/api/system/code'
+export default {
+  props: {
+    email: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    const validMail = (rule, value, callback) => {
+      if (value === '' || value === null) {
+        callback(new Error('新邮箱不能为空'))
+      } else if (value === this.email) {
+        callback(new Error('新邮箱不能与旧邮箱相同'))
+      } else if (validEmail(value)) {
+        callback()
+      } else {
+        callback(new Error('邮箱格式错误'))
+      }
+    }
+    return {
+      loading: false, dialog: false, title: '修改邮箱', form: { pass: '', email: '', code: '' },
+      user: { email: '', password: '' }, codeLoading: false,
+      buttonName: '获取验证码', isDisabled: false, time: 60,
+      rules: {
+        pass: [
+          { required: true, message: '当前密码不能为空', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, validator: validMail, trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '验证码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    sendCode() {
+      if (this.form.email && this.form.email !== this.email) {
+        this.codeLoading = true
+        this.buttonName = '验证码发送中'
+        const _this = this
+        resetEmail(this.form.email).then(res => {
+          this.$message({
+            showClose: true,
+            message: '发送成功，验证码有效期5分钟',
+            type: 'success'
+          })
+          this.codeLoading = false
+          this.isDisabled = true
+          this.buttonName = this.time-- + '秒后重新发送'
+          this.timer = window.setInterval(function() {
+            _this.buttonName = _this.time + '秒后重新发送'
+            --_this.time
+            if (_this.time < 0) {
+              _this.buttonName = '重新发送'
+              _this.time = 60
+              _this.isDisabled = false
+              window.clearInterval(_this.timer)
+            }
+          }, 1000)
+        }).catch(err => {
+          this.resetForm()
+          this.codeLoading = false
+          console.log(err.response.data.message)
+        })
+      }
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          updateEmail(this.form).then(res => {
+            this.loading = false
+            this.resetForm()
+            this.$notify({
+              title: '邮箱修改成功',
+              type: 'success',
+              duration: 1500
+            })
+            store.dispatch('GetInfo').then(() => {})
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      window.clearInterval(this.timer)
+      this.time = 60
+      this.buttonName = '获取验证码'
+      this.isDisabled = false
+      this.form = { pass: '', email: '', code: '' }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/user/center/updatePass.vue b/UI source code/dns_mapping_ui-master/src/views/system/user/center/updatePass.vue
new file mode 100644
index 0000000..078ed17
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/user/center/updatePass.vue
@@ -0,0 +1,95 @@
+<template>
+  <div style="display: inline-block">
+    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="title" append-to-body width="500px" @close="cancel">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="88px">
+        <el-form-item label="旧密码" prop="oldPass">
+          <el-input v-model="form.oldPass" type="password" auto-complete="on" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPass">
+          <el-input v-model="form.newPass" type="password" auto-complete="on" style="width: 370px;" />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPass">
+          <el-input v-model="form.confirmPass" type="password" auto-complete="on" style="width: 370px;" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="cancel">取消</el-button>
+        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from '@/store'
+import { updatePass } from '@/api/system/user'
+export default {
+  data() {
+    const confirmPass = (rule, value, callback) => {
+      if (value) {
+        if (this.form.newPass !== value) {
+          callback(new Error('两次输入的密码不一致'))
+        } else {
+          callback()
+        }
+      } else {
+        callback(new Error('请再次输入密码'))
+      }
+    }
+    return {
+      loading: false, dialog: false, title: '修改密码', form: { oldPass: '', newPass: '', confirmPass: '' },
+      rules: {
+        oldPass: [
+          { required: true, message: '请输入旧密码', trigger: 'blur' }
+        ],
+        newPass: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
+        ],
+        confirmPass: [
+          { required: true, validator: confirmPass, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    cancel() {
+      this.resetForm()
+    },
+    doSubmit() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.loading = true
+          updatePass(this.form).then(res => {
+            this.resetForm()
+            this.$notify({
+              title: '密码修改成功，请重新登录',
+              type: 'success',
+              duration: 1500
+            })
+            setTimeout(() => {
+              store.dispatch('LogOut').then(() => {
+                location.reload() // 为了重新实例化vue-router对象 避免bug
+              })
+            }, 1500)
+          }).catch(err => {
+            this.loading = false
+            console.log(err.response.data.message)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = { oldPass: '', newPass: '', confirmPass: '' }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/UI source code/dns_mapping_ui-master/src/views/system/user/index.vue b/UI source code/dns_mapping_ui-master/src/views/system/user/index.vue
new file mode 100644
index 0000000..9017069
--- /dev/null
+++ b/UI source code/dns_mapping_ui-master/src/views/system/user/index.vue
@@ -0,0 +1,484 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--侧边部门数据-->
+      <el-col :xs="9" :sm="6" :md="5" :lg="4" :xl="4">
+        <div class="head-container">
+          <el-input
+            v-model="deptName"
+            clearable
+            size="small"
+            placeholder="输入部门名称搜索"
+            prefix-icon="el-icon-search"
+            class="filter-item"
+            @input="getDeptDatas"
+          />
+        </div>
+        <el-tree
+          :data="deptDatas"
+          :load="getDeptDatas"
+          :props="defaultProps"
+          :expand-on-click-node="false"
+          lazy
+          @node-click="handleNodeClick"
+        />
+      </el-col>
+      <!--用户数据-->
+      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
+        <!--工具栏-->
+        <div class="head-container">
+          <div v-if="crud.props.searchToggle">
+            <!-- 搜索 -->
+            <el-input
+              v-model="query.blurry"
+              clearable
+              size="small"
+              placeholder="输入名称或者邮箱搜索"
+              style="width: 200px;"
+              class="filter-item"
+              @keyup.enter.native="crud.toQuery"
+            />
+            <date-range-picker v-model="query.createTime" class="date-item" />
+            <el-select
+              v-model="query.enabled"
+              clearable
+              size="small"
+              placeholder="状态"
+              class="filter-item"
+              style="width: 90px"
+              @change="crud.toQuery"
+            >
+              <el-option
+                v-for="item in enabledTypeOptions"
+                :key="item.key"
+                :label="item.display_name"
+                :value="item.key"
+              />
+            </el-select>
+            <rrOperation />
+          </div>
+          <crudOperation show="" :permission="permission" />
+        </div>
+        <!--表单渲染-->
+        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="570px">
+          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
+            <el-form-item label="用户名" prop="username">
+              <el-input v-model="form.username" @keydown.native="keydown($event)" />
+            </el-form-item>
+            <el-form-item label="电话" prop="phone">
+              <el-input v-model.number="form.phone" />
+            </el-form-item>
+            <el-form-item label="昵称" prop="nickName">
+              <el-input v-model="form.nickName" @keydown.native="keydown($event)" />
+            </el-form-item>
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" />
+            </el-form-item>
+            <el-form-item label="部门" prop="dept.id">
+              <treeselect
+                v-model="form.dept.id"
+                :options="depts"
+                :load-options="loadDepts"
+                style="width: 178px"
+                placeholder="选择部门"
+              />
+            </el-form-item>
+            <el-form-item label="岗位" prop="jobs">
+              <el-select
+                v-model="jobDatas"
+                style="width: 178px"
+                multiple
+                placeholder="请选择"
+                @remove-tag="deleteTag"
+                @change="changeJob"
+              >
+                <el-option
+                  v-for="item in jobs"
+                  :key="item.name"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="性别">
+              <el-radio-group v-model="form.gender" style="width: 178px">
+                <el-radio label="男">男</el-radio>
+                <el-radio label="女">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
+                <el-radio
+                  v-for="item in dict.user_status"
+                  :key="item.id"
+                  :label="item.value"
+                >{{ item.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item style="margin-bottom: 0;" label="角色" prop="roles">
+              <el-select
+                v-model="roleDatas"
+                style="width: 437px"
+                multiple
+                placeholder="请选择"
+                @remove-tag="deleteTag"
+                @change="changeRole"
+              >
+                <el-option
+                  v-for="item in roles"
+                  :key="item.name"
+                  :disabled="level !== 1 && item.level <= level"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div slot="footer" class="dialog-footer">
+            <el-button type="text" @click="crud.cancelCU">取消</el-button>
+            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+          </div>
+        </el-dialog>
+        <!--表格渲染-->
+        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+          <el-table-column :selectable="checkboxT" type="selection" width="55" />
+          <el-table-column :show-overflow-tooltip="true" prop="username" label="用户名" />
+          <el-table-column :show-overflow-tooltip="true" prop="nickName" label="昵称" />
+          <el-table-column prop="gender" label="性别" />
+          <el-table-column :show-overflow-tooltip="true" prop="phone" width="100" label="电话" />
+          <el-table-column :show-overflow-tooltip="true" width="135" prop="email" label="邮箱" />
+          <el-table-column :show-overflow-tooltip="true" prop="dept" label="部门">
+            <template slot-scope="scope">
+              <div>{{ scope.row.dept.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" prop="enabled">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.enabled"
+                :disabled="user.id === scope.row.id"
+                active-color="#409EFF"
+                inactive-color="#F56C6C"
+                @change="changeEnabled(scope.row, scope.row.enabled)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column :show-overflow-tooltip="true" prop="createTime" width="135" label="创建日期" />
+          <el-table-column
+            v-if="checkPer(['admin','user:edit','user:del'])"
+            label="操作"
+            width="115"
+            align="center"
+            fixed="right"
+          >
+            <template slot-scope="scope">
+              <udOperation
+                :data="scope.row"
+                :permission="permission"
+                :disabled-dle="scope.row.id === user.id"
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import crudUser from '@/api/system/user'
+import { isvalidPhone } from '@/utils/validate'
+import { getDepts, getDeptSuperior } from '@/api/system/dept'
+import { getAll, getLevel } from '@/api/system/role'
+import { getAllJob } from '@/api/system/job'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
+import Treeselect from '@riophae/vue-treeselect'
+import { mapGetters } from 'vuex'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
+let userRoles = []
+let userJobs = []
+const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'false', roles: [], jobs: [], dept: { id: null }, phone: null }
+export default {
+  name: 'User',
+  components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker },
+  cruds() {
+    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  // 数据字典
+  dicts: ['user_status'],
+  data() {
+    // 自定义验证
+    const validPhone = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error('请输入电话号码'))
+      } else if (!isvalidPhone(value)) {
+        callback(new Error('请输入正确的11位手机号码'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      height: document.documentElement.clientHeight - 180 + 'px;',
+      deptName: '', depts: [], deptDatas: [], jobs: [], level: 3, roles: [],
+      jobDatas: [], roleDatas: [], // 多选时使用
+      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
+      permission: {
+        add: ['admin', 'user:add'],
+        edit: ['admin', 'user:edit'],
+        del: ['admin', 'user:del']
+      },
+      enabledTypeOptions: [
+        { key: 'true', display_name: '激活' },
+        { key: 'false', display_name: '锁定' }
+      ],
+      rules: {
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+        ],
+        nickName: [
+          { required: true, message: '请输入用户昵称', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, trigger: 'blur', validator: validPhone }
+        ]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
+  created() {
+    this.crud.msg.add = '新增成功，默认密码：123456'
+  },
+  mounted: function() {
+    const that = this
+    window.onresize = function temp() {
+      that.height = document.documentElement.clientHeight - 180 + 'px;'
+    }
+  },
+  methods: {
+    // 禁止输入空格
+    keydown(e) {
+      if (e.keyCode === 32) {
+        e.returnValue = false
+      }
+    },
+    changeRole(value) {
+      userRoles = []
+      value.forEach(function(data, index) {
+        const role = { id: data }
+        userRoles.push(role)
+      })
+    },
+    changeJob(value) {
+      userJobs = []
+      value.forEach(function(data, index) {
+        const job = { id: data }
+        userJobs.push(job)
+      })
+    },
+    deleteTag(value) {
+      userRoles.forEach(function(data, index) {
+        if (data.id === value) {
+          userRoles.splice(index, value)
+        }
+      })
+    },
+    // 新增与编辑前做的操作
+    [CRUD.HOOK.afterToCU](crud, form) {
+      this.getRoles()
+      if (form.id == null) {
+        this.getDepts()
+      } else {
+        this.getSupDepts(form.dept.id)
+      }
+      this.getRoleLevel()
+      this.getJobs()
+      form.enabled = form.enabled.toString()
+    },
+    // 新增前将多选的值设置为空
+    [CRUD.HOOK.beforeToAdd]() {
+      this.jobDatas = []
+      this.roleDatas = []
+    },
+    // 初始化编辑时候的角色与岗位
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      this.getJobs(this.form.dept.id)
+      this.jobDatas = []
+      this.roleDatas = []
+      userRoles = []
+      userJobs = []
+      const _this = this
+      form.roles.forEach(function(role, index) {
+        _this.roleDatas.push(role.id)
+        const rol = { id: role.id }
+        userRoles.push(rol)
+      })
+      form.jobs.forEach(function(job, index) {
+        _this.jobDatas.push(job.id)
+        const data = { id: job.id }
+        userJobs.push(data)
+      })
+    },
+    // 提交前做的操作
+    [CRUD.HOOK.afterValidateCU](crud) {
+      if (!crud.form.dept.id) {
+        this.$message({
+          message: '部门不能为空',
+          type: 'warning'
+        })
+        return false
+      } else if (this.jobDatas.length === 0) {
+        this.$message({
+          message: '岗位不能为空',
+          type: 'warning'
+        })
+        return false
+      } else if (this.roleDatas.length === 0) {
+        this.$message({
+          message: '角色不能为空',
+          type: 'warning'
+        })
+        return false
+      }
+      crud.form.roles = userRoles
+      crud.form.jobs = userJobs
+      return true
+    },
+    // 获取左侧部门数据
+    getDeptDatas(node, resolve) {
+      const sort = 'id,desc'
+      const params = { sort: sort }
+      if (typeof node !== 'object') {
+        if (node) {
+          params['name'] = node
+        }
+      } else if (node.level !== 0) {
+        params['pid'] = node.data.id
+      }
+      setTimeout(() => {
+        getDepts(params).then(res => {
+          if (resolve) {
+            resolve(res.content)
+          } else {
+            this.deptDatas = res.content
+          }
+        })
+      }, 100)
+    },
+    getDepts() {
+      getDepts({ enabled: true }).then(res => {
+        this.depts = res.content.map(function(obj) {
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    getSupDepts(deptId) {
+      getDeptSuperior(deptId).then(res => {
+        const date = res.content
+        this.buildDepts(date)
+        this.depts = date
+      })
+    },
+    buildDepts(depts) {
+      depts.forEach(data => {
+        if (data.children) {
+          this.buildDepts(data.children)
+        }
+        if (data.hasChildren && !data.children) {
+          data.children = null
+        }
+      })
+    },
+    // 获取弹窗内部门数据
+    loadDepts({ action, parentNode, callback }) {
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
+          parentNode.children = res.content.map(function(obj) {
+            if (obj.hasChildren) {
+              obj.children = null
+            }
+            return obj
+          })
+          setTimeout(() => {
+            callback()
+          }, 200)
+        })
+      }
+    },
+    // 切换部门
+    handleNodeClick(data) {
+      if (data.pid === 0) {
+        this.query.deptId = null
+      } else {
+        this.query.deptId = data.id
+      }
+      this.crud.toQuery()
+    },
+    // 改变状态
+    changeEnabled(data, val) {
+      this.$confirm('此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        crudUser.edit(data).then(res => {
+          this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        }).catch(() => {
+          data.enabled = !data.enabled
+        })
+      }).catch(() => {
+        data.enabled = !data.enabled
+      })
+    },
+    // 获取弹窗内角色数据
+    getRoles() {
+      getAll().then(res => {
+        this.roles = res
+      }).catch(() => { })
+    },
+    // 获取弹窗内岗位数据
+    getJobs() {
+      getAllJob().then(res => {
+        this.jobs = res.content
+      }).catch(() => { })
+    },
+    // 获取权限级别
+    getRoleLevel() {
+      getLevel().then(res => {
+        this.level = res.level
+      }).catch(() => { })
+    },
+    checkboxT(row, rowIndex) {
+      return row.id !== this.user.id
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
+</style>