域名管理功能

src/api/domain.js

@@ -0,0 +1,32 @@
+import {urlWrapper, axiosPostFileWrapper, axiosPostWrapper, axiosGetWrapper, axiosDeleteWrapper, axiosPostJsonWrapper, axiosPutJsonWrapper, axiosPutWrapper } from './index';
+
+export const selectDomainList = (data, success, error, exception) => {
+    axiosGetWrapper('/api/domainManager/selectDomainList', data, success, error, exception);
+};
+
+export const delDomain = (data, success, error, exception) => {
+    axiosGetWrapper('/api/domainManager/delDomain', data, success, error, exception);
+};
+  
+export const addOrEditDomain = (data, success, error, exception) => {
+    axiosPostJsonWrapper('/api/domainManager/addOrEditDomain', data, success, error, exception);
+};
+
+export const delCostData = (data, success, error, exception) => {
+    axiosGetWrapper('/api/domainManager/delCostData', data, success, error, exception);
+}; 
+
+export const selectDetailDomain = (data, success, error, exception) => {
+    axiosGetWrapper('/api/domainManager/selectDetailDomain', data, success, error, exception);
+}; 
+
+export const editAuditStatus = (data, success, error, exception) => {
+    axiosGetWrapper('/api/domainManager/editAuditStatus', data, success, error, exception);
+}; 
+
+// export const exportDomainExcel = (data, success, error, exception) => {
+//     axiosGetWrapper('/api/domainManager/exportDomainExcel', data, success, error, exception);
+// }; 
+export const exportDomainExcel = (data) => {
+    return urlWrapper('/api/domainManager/exportDomainExcel', data);
+}; 

src/components/domainManager/add-domain.vue

@@ -0,0 +1,746 @@
+<template>
+  <div>
+    <div>
+      <el-row
+        class="content-body"
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+      >
+        <el-form
+          :inline="true"
+          :model="item"
+          :rules="rules"
+          ref="domainForm"
+          label-width="130px"
+          label-position="right"
+        >
+          <div>
+            <div>
+              <span style="line-height: 36px"
+                ><i style="font-size: 30px; border-radius: 5px"></i
+                >基本信息（必填）</span
+              >
+            </div>
+            <el-card class="box-card">
+              <div>
+                <el-col :span="12">
+                  <el-form-item label="域名：" prop="domainName">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.domainName"
+                      :disabled="operateType == 2"
+                      placeholder="请填写长度为1-50的文字"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="域名劵号：" prop="domainCoupon">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.domainCoupon"
+                      :disabled="true"
+                      placeholder="系统自动生成"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+              <div>
+                <el-col :span="12">
+                  <el-form-item label="所有人：" prop="owner">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.owner"
+                      :disabled="operateType == 2"
+                      placeholder="请填写长度为1-50的文字"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="审核状态：" prop="auditStatus">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.auditStatus"
+                      :disabled="true"
+                      placeholder="系统自动生成"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+              <div>
+                <el-col :span="12">
+                  <el-form-item label="域名申请日期：" prop="applyDate">
+                    <el-date-picker
+                      style="width: 240px"
+                      v-model="item.applyDate"
+                      type="date"
+                      :disabled="operateType == 2"
+                      placeholder="选择日期"
+                      format="yyyy 年 MM 月 dd 日"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="代理机构：" prop="agency">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.agency"
+                      :disabled="operateType == 2"
+                      placeholder="关联服务机构"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+              <div>
+                <el-col :span="12">
+                  <el-form-item label="下次续展日期：" prop="nextRenewalDate">
+                    <el-date-picker
+                      style="width: 240px"
+                      v-model="item.nextRenewalDate"
+                      type="date"
+                      :disabled="operateType == 2"
+                      placeholder="选择日期"
+                      format="yyyy 年 MM 月 dd 日"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="续费时间：" prop="nextRenewTime">
+                    <el-date-picker
+                      style="width: 240px"
+                      v-model="item.nextRenewTime"
+                      type="datetime"
+                      :disabled="operateType == 2"
+                      placeholder="选择日期时间"
+                      default-time="12:00:00"
+                      value-format="yyyy-MM-dd HH:mm:ss"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+              </div>
+              <div>
+                <el-col :span="24">
+                  <el-form-item label="续费金额：" prop="renewMoney">
+                    <el-input
+                      style="width: 240px"
+                      :disabled="operateType == 2"
+                      v-model="item.renewMoney"
+                      placeholder="数字，保留两位小数"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+              <div>
+                <el-col :span="12">
+                  <el-form-item label="业务模式：" prop="businessModel">
+                    <el-input
+                      style="width: 240px"
+                      :disabled="operateType == 2"
+                      v-model="item.businessModel"
+                      placeholder="请填写长度为1-50的文字"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="使用部门：" prop="useDepartment">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.useDepartment"
+                      :disabled="operateType == 2"
+                      placeholder="请填写长度为1-50的文字"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+              <div>
+                <el-col :span="12">
+                  <el-form-item label="登记人：" prop="registerUser">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.registerUser"
+                      :disabled="true"
+                      placeholder="系统自动生成"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="登记时间：" prop="registerTime">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.registerTime"
+                      :disabled="true"
+                      placeholder="系统自动生成"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+            </el-card>
+          </div>
+          <div>
+            <div>
+              <span
+                style="line-height: 36px"
+                v-if="
+                  operateType != 2 ||
+                  (operateType == 2 && item.domainCostData != null)
+                "
+                ><i class="el-icon-date" style="margin-right: 5px"></i
+                >费用信息</span
+              >
+              <el-button
+                style="float: right; margin-right: 20px; margin-left: 0"
+                size="small"
+                type="primary"
+                v-if="operateType != 2"
+                @click="deleteCostData"
+                >删除</el-button
+              >
+              <el-button
+                style="float: right; margin-right: 20px; margin-left: 0"
+                size="small"
+                type="primary"
+                v-if="operateType != 2"
+                @click="createCostData"
+                >添加</el-button
+              >
+            </div>
+            <el-card
+              class="box-card"
+              v-if="costVisible && item.domainCostDataDTO != null"
+            >
+              <div>
+                <el-col :span="12">
+                  <el-form-item
+                    label="费用类型："
+                    prop="domainCostDataDTO.costType"
+                  >
+                    <el-select
+                      v-model="costTypeValue"
+                      multiple
+                      collapse-tags
+                      style="width: 240px"
+                      :disabled="operateType == 2"
+                      placeholder="请选择"
+                    >
+                      <el-option
+                        v-for="item in costTypeArray"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="金额：" prop="domainCostDataDTO.money">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.domainCostDataDTO.money"
+                      :disabled="operateType == 2"
+                      placeholder="数字，保留两位小数"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+              <div>
+                <el-col :span="12">
+                  <el-form-item
+                    label="部门属性："
+                    prop="domainCostDataDTO.departmentAttribute"
+                  >
+                    <el-select
+                      v-model="departmentAttributeValue"
+                      collapse-tags
+                      :disabled="operateType == 2"
+                      style="width: 240px"
+                      placeholder="请选择"
+                    >
+                      <el-option
+                        v-for="item in departmentAttributeArray"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item
+                    label="预算部门："
+                    prop="domainCostDataDTO.budgetDepartment"
+                  >
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.domainCostDataDTO.budgetDepartment"
+                      :disabled="operateType == 2"
+                      placeholder="请填写长度为1-50的文字"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+              <div>
+                <el-col :span="12">
+                  <el-form-item label="备注：" prop="domainCostDataDTO.remarks">
+                    <el-input
+                      style="width: 240px"
+                      v-model="item.domainCostDataDTO.remarks"
+                      :disabled="operateType == 2"
+                      placeholder="输入"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </div>
+            </el-card>
+          </div>
+          <div style="text-align: center; margin-top: 16px">
+            <el-form-item>
+              <el-button
+                v-if="operateType != 2"
+                type="primary"
+                @click="onSubmit('domainForm')"
+                >保存</el-button
+              >
+              <el-button
+                v-if="operateType == 0"
+                @click="formReset('domainForm')"
+                >重置</el-button
+              >
+              <el-button
+                v-if="operateType == 1"
+                type="primary"
+                @click="handlePublish()"
+                >发布</el-button
+              >
+              <el-button
+                v-if="operateType == 2"
+                type="primary"
+                @click="returnDomainManager()"
+                >关闭</el-button
+              >
+            </el-form-item>
+          </div>
+          <div></div>
+        </el-form>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  selectDomainList,
+  delDomain,
+  delCostData,
+  addOrEditDomain,
+  selectDetailDomain,
+  editAuditStatus,
+  exportDomainExcel,
+} from "@/api/domain";
+export default {
+  name: "addRoleDialog",
+  components: {},
+  props: {
+    domainId: 0,
+    addDomainDialogVisible: Boolean,
+    operateType: Number,
+  },
+  watch: {
+    addDomainDialogVisible() {
+      this.init();
+      this.cleanCostData();
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  data() {
+    return {
+      rules: {
+        domainName: [
+          { required: true, message: "请输入域名", trigger: "blur" },
+          {
+            min: 1,
+            max: 50,
+            message: "长度在 1 到 50 个字符",
+            trigger: "blur",
+          },
+        ],
+        domainCoupon: [{ required: true, trigger: "change" }],
+        owner: [
+          { required: true, message: "请输入所有人", trigger: "blur" },
+          {
+            min: 1,
+            max: 50,
+            message: "长度在 1 到 50 个字符",
+            trigger: "blur",
+          },
+        ],
+        auditStatus: [{ required: true, trigger: "change" }],
+        applyDate: [
+          { required: true, message: "请输入域名申请日期", trigger: "blur" },
+        ],
+      },
+      item: {
+        domainId: "",
+        domainName: "",
+        domainCoupon: "系统自动生成",
+        owner: "",
+        auditStatus: "系统自动生成",
+        applyDate: "",
+        agency: "",
+        nextRenewalDate: "",
+        nextRenewTime: "",
+        renewMoney: "",
+        businessModel: "",
+        useDepartment: "",
+        registerUser: "系统自动生成",
+        registerTime: "系统自动生成",
+        domainCostDataDTO: {
+          costId: "",
+          costType: "",
+          money: "",
+          departmentAttribute: "",
+          budgetDepartment: "",
+          remarks: "",
+        },
+      },
+      loading: false,
+      costVisible: false,
+      costTypeArray: [
+        {
+          value: "官费",
+          label: "官费",
+        },
+        {
+          value: "代理费",
+          label: "代理费",
+        },
+      ],
+      costTypeValue: [],
+      departmentAttributeValue: "",
+      departmentAttributeArray: [
+        {
+          value: "国家机关",
+          label: "国家机关",
+        },
+        {
+          value: "有限责任公司",
+          label: "有限责任公司",
+        },
+        {
+          value: "办事处",
+          label: "办事处",
+        },
+        {
+          value: "社会团体",
+          label: "社会团体",
+        },
+      ],
+    };
+  },
+  methods: {
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.addDomain();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    async addDomain() {
+      let _this = this;
+      if (_this.operateType == 0) {
+        _this.$delete(_this.item, "domainId");
+      }
+      console.log("提交的数据:", _this.item);
+      if (!_this.costVisible) {
+        // _this.$delete(_this.item, "domainCostDataDTO");
+      }
+      this.initCostData();
+      await addOrEditDomain(
+        _this.item,
+        (response) => {
+          console.log("添加或编辑域名信息", response);
+          let addType = "success";
+          let addMessage = response;
+          if (response == "权限不足") {
+            addType = "info";
+            addMessage = "权限不足或非草稿状态";
+          }
+          _this.$emit("close");
+          this.$message({
+            type: addType,
+            message: addMessage,
+            duration: 2000,
+            onClose: () => {
+              _this.returnDomainManager();
+            },
+          });
+        },
+        (error) => {
+          console.warn("error:", error);
+          this.$message({
+            type: "info",
+            message: "您的权限不足，无法添加或修改域名信息",
+            duration: 2000,
+            onClose: () => {
+              if (this.operateType != 1) {
+                _this.returnDomainManager();
+              }
+            },
+          });
+        },
+        (exception) => {
+          console.warn("exception:", exception);
+        }
+      );
+    },
+    init() {
+      let _this = this;
+      if (_this.addDomainDialogVisible) {
+        this.$refs["domainForm"].resetFields();
+        this.costTypeValue = [];
+        this.departmentAttributeValue = "";
+        setTimeout(() => {
+          if (
+            _this.operateType != 0 &&
+            _this.domainId != null &&
+            _this.domainId != 0
+          ) {
+            _this.getData(_this.domainId);
+          }
+        }, 100);
+      }
+    },
+    async getData(domainId) {
+      let _this = this;
+      _this.loading = true;
+      await selectDetailDomain(
+        { domainId: domainId },
+        (response) => {
+          console.log("获取详情域名信息：", response);
+          _this.loading = false;
+          if (response != "权限不足") {
+            _this.item = response;
+            if (response.domainCostData != null) {
+              if (
+                response.domainCostData.costId != null &&
+                response.domainCostData.costId != ""
+              ) {
+                _this.item.domainCostDataDTO = response.domainCostData;
+                if (
+                  response.domainCostData.costType != null &&
+                  response.domainCostData.costType != ""
+                ) {
+                  _this.costTypeValue = JSON.parse(
+                    response.domainCostData.costType
+                  );
+                }
+                _this.departmentAttributeValue =
+                  response.domainCostData.departmentAttribute;
+                _this.costVisible = true;
+              } else {
+                _this.costVisible = false;
+              }
+            }
+            const auditStatus = _this.item.auditStatus;
+            if (auditStatus == "0") {
+              _this.item.auditStatus = "未发布";
+            }
+            if (auditStatus == "1") {
+              _this.item.auditStatus = "待审核";
+            }
+            if (auditStatus == "2") {
+              _this.item.auditStatus = "审核通过";
+            }
+            if (auditStatus == "3") {
+              _this.item.auditStatus = "无效";
+            }
+          } else {
+            this.$message({
+              type: "info",
+              message: "您的权限不足或非本人发布",
+              duration: 2000,
+            });
+            _this.returnDomainManager();
+          }
+        },
+        (error) => {
+          _this.loading = false;
+          console.log("error:", error);
+        },
+        (exception) => {
+          _this.loading = false;
+          console.log("exception:", exception);
+        }
+      );
+    },
+    returnDomainManager() {
+      let _this = this;
+      _this.$refs["domainForm"].resetFields();
+      _this.cleanCostData();
+      _this.$emit("close");
+    },
+    async handlePublish() {
+      let _this = this;
+      console.log("item", _this.item);
+      if (_this.item.auditStatus == "未发布") {
+        _this
+          .$confirm(
+            "是否发布域名【 " + _this.item.domainName + " 】？",
+            "提示",
+            {
+              confirmButtonText: "发布",
+              cancelButtonText: "不发布",
+              type: "warning",
+              distinguishCancelAndClose: true,
+            }
+          )
+          .then(() => {
+            editAuditStatus(
+              { domainId: _this.item.domainId, status: "1" },
+              (response) => {
+                console.log("response:", response);
+                if (response != "权限不足") {
+                  this.$message({
+                    type: "success",
+                    message: "域名【 " + _this.item.domainName + " 】已发布！",
+                    onClose: () => {
+                      this.returnDomainManager();
+                    },
+                  });
+                } else {
+                  this.$message({
+                    type: "info",
+                    message: "权限不足",
+                  });
+                }
+              },
+              (error) => {
+                console.log(error);
+              },
+              (exception) => {
+                console.log(exception);
+              }
+            );
+          })
+          .catch((e) => {
+            console.log("e:", e);
+            if (e === "close") {
+              //do something
+            } else if (e === "cancel") {
+              //do something
+              editAuditStatus(
+                { domainId: _this.item.domainId, status: "0" },
+                (response) => {
+                  this.$message({
+                    type: "info",
+                    message: "未发布域名【" + _this.item.domainName + " 】",
+                  });
+                },
+                (error) => {
+                  console.log(error);
+                },
+                (exception) => {
+                  console.log(exception);
+                }
+              );
+            } else {
+              console.log(e);
+            }
+          });
+      } else {
+        this.$message({
+          type: "info",
+          message: "该域名非草稿状态",
+        });
+      }
+    },
+    createCostData() {
+      let _this = this;
+      this.costVisible = true;
+      (this.item.domainCostDataDTO = {
+        costId: "",
+        costType: "",
+        money: "",
+        departmentAttribute: "",
+        budgetDepartment: "",
+        remarks: "",
+      }),
+        console.log("新建费用信息");
+    },
+    async deleteCostData() {
+      let _this = this;
+      console.log("删除费用信息:", _this.item);
+      if (_this.operateType == 1 && _this.item.domainCostDataDTO != null) {
+        if (
+          _this.item.domainCostDataDTO.costId != null &&
+          _this.item.domainCostDataDTO.costId != ""
+        ) {
+          await delCostData(
+            { costId: _this.item.domainCostDataDTO.costId },
+            (response) => {
+              console.log("删除费用信息：", response);
+              this.$message({
+                type: "success",
+                message: "删除成功",
+                duration: 3000,
+              });
+            },
+            (error) => {
+              console.error("error:", error);
+            },
+            (exception) => {
+              console.error(exception);
+            }
+          );
+        }
+      } else {
+        this.$message({
+          type: "info",
+          message: "没有可用的费用信息",
+          duration: 3000,
+        });
+      }
+      _this.$delete(_this.item, "domainCostDataDTO");
+      _this.cleanCostData();
+    },
+    cleanCostData() {
+      let _this = this;
+      _this.costTypeValue = [];
+      _this.departmentAttributeValue = "";
+      if (_this.item.domainCostDataDTO != null) {
+        _this.item.domainCostDataDTO.costId = "";
+        _this.item.domainCostDataDTO.costType = "";
+        _this.item.domainCostDataDTO.money = "";
+        _this.item.domainCostDataDTO.departmentAttribute = "";
+        _this.item.domainCostDataDTO.budgetDepartment = "";
+        _this.item.domainCostDataDTO.remarks = "";
+      }
+      _this.costVisible = false;
+    },
+    initCostData() {
+      let _this = this;
+      if (_this.item.domainCostDataDTO != null) {
+        if (_this.costTypeValue.length > 0) {
+          _this.item.domainCostDataDTO.costType = JSON.stringify(
+            _this.costTypeValue
+          );
+        } else {
+          _this.item.domainCostDataDTO.costType = "";
+        }
+        _this.item.domainCostDataDTO.departmentAttribute =
+          _this.departmentAttributeValue;
+      }
+    },
+  },
+};
+</script>

src/components/domainManager/domain-manager.vue

@@ -0,0 +1,587 @@
+<template>
+  <div>
+    <div class="page-agreement">
+      <bread-crumb></bread-crumb>
+      <section class="content-section">
+        <div style="margin: 15px"></div>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span style="line-height: 36px"
+              ><i class="el-icon-date" style="margin-right: 5px"></i
+              >高级搜索</span
+            >
+            <el-button
+              style="float: right"
+              size="small"
+              @click="resetSearchButtonClicked()"
+              >重置</el-button
+            >
+            <el-button
+              style="float: right; margin-right: 10px"
+              size="small"
+              type="primary"
+              @click="searchButtonClicked()"
+              >查找</el-button
+            >
+          </div>
+          <div>
+            <el-form label-position="right" label-width="140px">
+              <el-row>
+                <div>
+                  <el-col :span="6">
+                    <el-form-item label="域名：" style="margin-bottom: 10px">
+                      <el-input
+                        placeholder="请输入内容"
+                        v-model="searchForm.domainName"
+                        @keyup.enter.native="searchButtonClicked"
+                        clearable
+                      ></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      label="域名劵号："
+                      style="margin-bottom: 10px"
+                    >
+                      <el-input
+                        placeholder="请输入内容"
+                        v-model="searchForm.domainCoupon"
+                        @keyup.enter.native="searchButtonClicked"
+                        clearable
+                      ></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="所有人：" style="margin-bottom: 10px">
+                      <el-input
+                        placeholder="请输入内容"
+                        v-model="searchForm.owner"
+                        @keyup.enter.native="searchButtonClicked"
+                        clearable
+                      ></el-input>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      label="审核状态："
+                      style="margin-bottom: 10px"
+                    >
+                      <el-select v-model="statusValue" placeholder="请选择">
+                        <el-option
+                          v-for="item in statusOptions"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        >
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </div>
+                <div>
+                  <el-col :span="6">
+                    <el-form-item
+                      label="域名申请日期："
+                      style="margin-bottom: 10px"
+                    >
+                      <div class="block">
+                        <el-date-picker
+                          v-model="applyDateValue"
+                          type="daterange"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期"
+                          format="yyyy 年 MM 月 dd 日"
+                          value-format="yyyy/MM/dd HH:mm:ss"
+                        >
+                        </el-date-picker>
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                </div>
+              </el-row>
+            </el-form>
+          </div>
+        </el-card>
+        <el-card class="box-card">
+          <div>
+            <span style="line-height: 36px"
+              ><i class="el-icon-date" style="margin-right: 5px"></i
+              >域名信息列表</span
+            >
+            <el-button
+              style="float: right; margin-right: 20px; margin-left: 0"
+              size="small"
+              type="primary"
+              @click="exportExcel"
+              >导出</el-button
+            >
+            <el-button
+              style="float: right; margin-right: 20px; margin-left: 0"
+              size="small"
+              type="primary"
+              @click="
+                addDomainDialogVisible = true;
+                handleModify(0, null);
+              "
+              >新建</el-button
+            >
+            <el-table
+              id="domain-table"
+              ref="domainTable"
+              :data="tableData"
+              @row-dblclick="checkRow"
+              v-loading.body="tableLoading"
+              stripe
+              border
+              class="table-font"
+              max-height="450"
+              @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" width="55"></el-table-column>
+              <el-table-column
+                type="index"
+                label="序号"
+                align="center"
+                width="80"
+              ></el-table-column>
+              <el-table-column
+                prop="domainName"
+                label="域名"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="domainCoupon"
+                label="域名劵号"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="owner"
+                label="所有人"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="auditStatus"
+                label="审核状态"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="applyDate"
+                label="域名申请日期"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="registerUser"
+                label="账户ID"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                width="200"
+                align="center"
+                fixed="right"
+                label="操作"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    type="text"
+                    @click="
+                      addDomainDialogVisible = true;
+                      handleModify(1, scope.row);
+                    "
+                    >编辑</el-button
+                  >
+                  <el-button
+                    type="text"
+                    @click="handleDelete(scope.$index, tableData)"
+                    >删除</el-button
+                  >
+                  <el-button type="text" @click="handleModify(2, scope.row)"
+                    >查看</el-button
+                  >
+                  <el-button
+                    type="text"
+                    @click="handleAudit(scope.$index, tableData)"
+                    >审核</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <div style="margin-top: 10px; margin-left: -5px">
+              <el-pagination
+                @current-change="handleCurrentChange"
+                :page-count="pagination.pages"
+                :current-page.sync="pagination.current"
+                layout="prev, pager, next, jumper"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-card>
+      </section>
+    </div>
+    <el-dialog
+      :title="title"
+      :visible.sync="addDomainDialogVisible"
+      width="60%"
+    >
+      <add-domain-dialog
+        :domainId="domainId"
+        :addDomainDialogVisible="addDomainDialogVisible"
+        :operateType="operateType"
+        @close="initTable(true)"
+      ></add-domain-dialog>
+    </el-dialog>
+    <div
+      style="font-size: 12px; text-align: center; padding: 10px; color: gray"
+    >
+      CopyRight @ 碧桂园物业 {{ new Date().getFullYear() }}
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import breadCrumb from "../breadCrumb.vue";
+import {
+  selectDomainList,
+  delDomain,
+  selectDetailDomain,
+  editAuditStatus,
+  exportDomainExcel,
+} from "@/api/domain";
+import addDomainDialog from "./add-domain";
+import FileSaver from "file-saver";
+import XLSX from "xlsx";
+
+export default {
+  components: {
+    breadCrumb,
+    addDomainDialog,
+  },
+  mounted() {
+    this.resetSearchButtonClicked();
+  },
+  data() {
+    return {
+      title: "",
+      domainId: "",
+      tableData: [],
+      pagination: {
+        current: 1,
+        limit: 10,
+        total: 0,
+        pages: 0,
+        max: 1,
+        next: 1,
+      },
+      searchForm: {
+        domainName: "",
+        domainCoupon: "",
+        owner: "",
+        auditStatus: "",
+        applyDateStart: "",
+        applyDateEnd: "",
+        registerUser: "",
+      },
+      statusOptions: [
+        {
+          value: "0",
+          label: "待发布",
+        },
+        {
+          value: "1",
+          label: "待审核",
+        },
+        {
+          value: "2",
+          label: "审核通过",
+        },
+        {
+          value: "3",
+          label: "无效",
+        },
+      ],
+      applyDateValue: "",
+      tableLoading: false,
+      statusValue: "",
+      multipleSelection: [],
+      addDomainDialogVisible: false,
+      operateType: 0,
+    };
+  },
+  methods: {
+    initTable(refreshFlag) {
+      let _this = this;
+      _this.domainId = "";
+      _this.addDomainDialogVisible = false;
+      if (refreshFlag) _this.resetSearchButtonClicked();
+    },
+    //当前分页改变
+    async handleCurrentChange(val) {
+      this.setPaginationNextPage(val);
+      this.fetchData();
+    },
+    //获取分页跳转数
+    getPaginationSkip() {
+      return Math.max(1, this.pagination.next);
+    },
+    //设置分页总数
+    setPaginationTotal(row) {
+      this.pagination.total = row;
+      this.pagination.pages = row;
+    },
+    setPaginationNextPage(next) {
+      this.pagination.next = next;
+    },
+    checkRow(row, event) {
+      this.$refs.domainTable.toggleRowSelection(row);
+    },
+
+    async fetchData() {
+      let _this = this;
+      _this.tableLoading = true;
+      _this.searchForm.size = this.pagination.limit;
+      _this.searchForm.page = this.getPaginationSkip();
+      if (_this.searchForm.auditStatus != null) {
+        _this.searchForm.auditStatus = this.statusValue;
+      }
+      if (this.applyDateValue != null) {
+        _this.searchForm.applyDateStart = this.applyDateValue[0];
+        _this.searchForm.applyDateEnd = this.applyDateValue[1];
+      }
+      await selectDomainList(
+        _this.searchForm,
+        (response) => {
+          this.setPaginationTotal(response.pages);
+          this.tableData = response.data;
+          this.tableLoading = false;
+        },
+        (error) => {
+          console.warn(error);
+          this.tableLoading = false;
+        },
+        (exception) => {
+          console.warn(exception);
+          this.tableLoading = false;
+        }
+      );
+    },
+    //重置查询
+    resetSearchButtonClicked() {
+      let searchForm = this.searchForm;
+      searchForm.domainName = "";
+      searchForm.domainCoupon = "";
+      searchForm.owner = "";
+      searchForm.auditStatus = "";
+      searchForm.domainCoupon = "";
+      this.statusValue = "";
+      this.applyDateValue = "";
+      this.fetchData();
+    },
+    searchButtonClicked() {
+      this.fetchData();
+    },
+    distributionMenusDialogToggle() {},
+    handleSelectionChange(val) {
+      // this.multipleSelection = val;
+      this.multipleSelection = [];
+      for (let i = 0; i < val.length; i++) {
+        this.multipleSelection.push(val[i].domainId);
+      }
+    },
+    async exportExcel() {
+      let _this = this;
+      if (_this.multipleSelection.length == 0) {
+        this.$confirm("是否导出全部域名信息？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "info",
+        })
+          .then(() => {
+            let exportUrl = exportDomainExcel({
+              domainIds: _this.multipleSelection,
+            });
+            if (exportUrl != null) {
+              window.open(exportUrl);
+              this.$message({
+                type: "success",
+                message: "导出成功！",
+                duration: 3000,
+                onClose: () => {},
+              });
+            }
+          })
+          .catch((e) => {
+            this.$message({
+              type: "info",
+              message: "已取消！",
+              duration: 3000,
+              onClose: () => {},
+            });
+          });
+      } else {
+        let exportUrl = exportDomainExcel({
+          domainIds: _this.multipleSelection,
+        });
+        if (exportUrl != null) {
+          window.open(exportUrl);
+          this.$message({
+            type: "success",
+            message: "导出成功！",
+            duration: 3000,
+            onClose: () => {},
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: "导出异常！",
+            duration: 3000,
+            onClose: () => {},
+          });
+        }
+      }
+    },
+    handleModify(titleType, row) {
+      let _this = this;
+      _this.domainId = "";
+      _this.operateType = titleType;
+      if (titleType == 0) {
+        _this.title = "域名管理登记";
+        return;
+      } else if (titleType == 1) {
+        _this.title = "编辑";
+      } else if (titleType == 2) {
+        _this.title = "查看";
+      }
+      _this.addDomainDialogVisible = true;
+      _this.domainId = row.domainId + "";
+    },
+    handleDelete(index, rows) {
+      this.$confirm("是否删除该域名信息？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        delDomain(
+          {
+            domainId: rows[index].domainId,
+          },
+          (response) => {
+            console.log("删除域名信息：", response);
+            let delType = "success";
+            let delMessage = "删除成功";
+            if (response == "权限不足") {
+              delType = "info";
+              delMessage = "权限不足或非草稿状态";
+            }
+            this.fetchData();
+            this.$message({
+              type: delType,
+              message: delMessage,
+              duration: 3000,
+              onClose: () => {},
+            });
+          },
+          (error) => {
+            console.error(error);
+            this.$message({
+              type: "error",
+              message: error,
+              duration: 3000,
+              onClose: () => {},
+            });
+          },
+          (exception) => {
+            console.error(exception);
+          }
+        );
+      });
+    },
+    async handleAudit(index, rows) {
+      let _this = this;
+      console.log("rows", rows[index]);
+      if (rows[index].auditStatus == "待审核") {
+        _this
+          .$confirm(
+            "是否允许域名【 " + rows[index].domainName + " 】通过审核？",
+            "提示",
+            {
+              confirmButtonText: "允许",
+              cancelButtonText: "不允许",
+              type: "warning",
+              distinguishCancelAndClose: true,
+            }
+          )
+          .then(() => {
+            editAuditStatus(
+              { domainId: rows[index].domainId, status: "2" },
+              (response) => {
+                console.log("response:", response);
+                if (response != "权限不足") {
+                  this.$message({
+                    type: "success",
+                    message:
+                      "域名【 " + rows[index].domainName + " 】通过审核！",
+                  });
+                  _this.resetSearchButtonClicked();
+                } else {
+                  this.$message({
+                    type: "info",
+                    message: "权限不足",
+                  });
+                }
+              },
+              (error) => {
+                console.log(error);
+              },
+              (exception) => {
+                console.log(exception);
+              }
+            );
+          })
+          .catch((e) => {
+            console.log("e:", e);
+            if (e === "close") {
+              //do something
+            } else if (e === "cancel") {
+              //do something
+              editAuditStatus(
+                { domainId: rows[index].domainId, status: "3" },
+                (response) => {
+                  if (response != "权限不足") {
+                    this.$message({
+                      type: "info",
+                      message:
+                        "域名【" + rows[index].domainName + " 】未通过审核！",
+                    });
+                    _this.resetSearchButtonClicked();
+                  } else {
+                    this.$message({
+                      type: "info",
+                      message: "权限不足",
+                    });
+                  }
+                },
+                (error) => {
+                  console.log(error);
+                },
+                (exception) => {
+                  console.log(exception);
+                }
+              );
+            } else {
+              console.log(e);
+            }
+          });
+      } else {
+        this.$message({
+          type: "info",
+          message: "该域名非待审核状态",
+        });
+      }
+    },
+  },
+  deactived() {
+    this.$destroy();
+  },
+};
+</script>

src/router/index.js

@@ -193,6 +193,7 @@ import myTest from '@/views/pages/personnel/myTest';
 
 //系统管理
 import RoleManager from '@/components/roleManager/role-manager';
+import DomainManager from '@/components/domainManager/domain-manager';
 import Functions from '@/components/functions/functions';
 import Menu from '@/components/menu/menu';
 
@@ -933,6 +934,12 @@ export default new Router({
       name: '资源管理',
       component: RoleManager,
     },
+    {
+      hash: '',
+      path: '/domainManager',
+      name: '域名管理',
+      component: DomainManager,
+    },
     {
       hash: '',
       path: '/menusmanager',