|
@@ -0,0 +1,402 @@
|
|
|
+<template>
|
|
|
+ <div class="block">
|
|
|
+ <el-dialog :destroy-on-close="true" title="域名管理登记" :visible.sync="dialogVisible" width="50%"
|
|
|
+ :before-close="handleClose">
|
|
|
+ <div style="width: 100%;margin-bottom: 20px;margin-top: -10px;" class="tip">
|
|
|
+ <span>基本信息(必填)</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="domainForm" :status-icon="true" :rules="rules" :disabled="!isEdit" :inline="false"
|
|
|
+ :model="tableData" class="demo-form-inline">
|
|
|
+ <el-form-item key="name" label="域名" prop="name">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2 }" v-model="tableData.name" maxlength="50"
|
|
|
+ placeholder="请输入域名(50字以内)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item required label="域名券号">
|
|
|
+ <el-input placeholder="系统自动生成" v-model="tableData.nameId" :disabled="true">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item key="owner" required label="域名所有人" prop="owner"">
|
|
|
+ <el-input type=" textarea" :autosize="{ minRows: 2, maxRows: 2 }" v-model="tableData.owner" maxlength="50"
|
|
|
+ placeholder="请输入所有人(50字以内)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item required label="审核状态">
|
|
|
+ <el-input v-model="tableData.state" placeholder="草稿" :disabled="true">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item key="reTime" label="域名申请日期" style="margin-right: 20px;" prop="reTime">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="tableData.reTime" type="datetime"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item key="agency" label="代理机构" prop="agency">
|
|
|
+ <el-select v-model="tableData.agency" placeholder="代理机构">
|
|
|
+ <el-option label="机构1" value="1"></el-option>
|
|
|
+ <el-option label="机构2" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item label="下次续展日期" style="margin-right: 20px;">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="tableData.nextTime" type="datetime"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="续费日期">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="tableData.payTime" type="datetime"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item key="amount" label="续费金额" prop="amount">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1 }" v-model.number="tableData.amount"
|
|
|
+ maxlength="50" placeholder="请输入金额(50字以内)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item key="mode" label="业务模式" prop="mode">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2 }" v-model="tableData.mode" maxlength="50"
|
|
|
+ placeholder="请输入业务模式(50字以内)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item key="department" label="使用部门" prop="department">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2 }" v-model="tableData.depName" maxlength="50"
|
|
|
+ placeholder="请输入使用部门(50字以内)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="登记人">
|
|
|
+ <el-input v-model="user.UserName" :disabled="true">
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="登记日期">
|
|
|
+ <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="tableData.createTime" disabled type="datetime"
|
|
|
+ placeholder="系统自动生成">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 费用信息子表 -->
|
|
|
+ <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 v-show="isEdit" @click="deleteChildRow" style="float: right;margin-right: 10px;" size="small"
|
|
|
+ type="danger">删除</el-button>
|
|
|
+ <el-button v-show="isEdit" style="float: right;margin-right: 10px;" size="small" type="primary"
|
|
|
+ @click="childVisible = true, childTableAdd = true">添加</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table @selection-change="handleSelectionChange" :data="childTable" border style="width: 100%">
|
|
|
+ <el-table-column :show-overflow-tooltip="true" align="center" type="selection" width="55">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="payType" label="费用类型" width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="money" label="金额" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="depAttribute" label="部门属性" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="budgetDep" label="预算部门" width="120">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="common" label="备注" width="300">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="showChildForm(scope, true, false)" type="text" size="small">查看</el-button>
|
|
|
+ <el-button v-if="isEdit" @click="showChildForm(scope, true, true)" type="text" size="small">编辑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button v-show="isEdit" @click="postDomainInfo(operationMap.SAVE)">保存</el-button>
|
|
|
+ <el-button v-show="isEdit" type="primary" @click="postDomainInfo(operationMap.PUBLISH)">发布</el-button>
|
|
|
+ <el-button type="danger" @click="handleClose">关闭</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 费用信息表的新增及查看弹窗 -->
|
|
|
+ <el-dialog title="费用信息子表" :visible.sync="childVisible" width="35%" :before-close="childhandleClose">
|
|
|
+ <el-form ref="childForm" :disabled="!childIsEdit" :model="childRowInfo" :rules="rules" class="demo-form-inline">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-form-item key="payType" prop="payType" label="费用类型" style="margin-right: 20px;">
|
|
|
+ <el-select value-key="childRowInfo.payType" v-model="childRowInfo.payType" placeholder="请选择类型">
|
|
|
+ <el-option label="官费" value="官费"></el-option>
|
|
|
+ <el-option label="代理费" value="代理费"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item key="depAttribute" label="部门属性" prop="depAttribute">
|
|
|
+ <el-select v-model="childRowInfo.depAttribute" placeholder="请选择属性">
|
|
|
+ <el-option label="职能部门" value="职能部门"></el-option>
|
|
|
+ <el-option label="业务部门" value="业务部门"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item key="money" label="金额" prop="money">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1 }" v-model.number="childRowInfo.money"
|
|
|
+ maxlength="50" placeholder="请输入金额(50字以内)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item key="budgetDep" label="预算部门" prop="budgetDep">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 1 }" v-model="childRowInfo.budgeDep"
|
|
|
+ maxlength="50" placeholder="请输入预算部门(50字以内)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item key="common" label="备注" prop="common">
|
|
|
+ <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="childRowInfo.common" maxlength="200"
|
|
|
+ placeholder="请输入备注(200字以内)"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="cancelChildForm">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="saveChildForm">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { rulesForDomain } from "@/mixins/rulesForDomain.js";
|
|
|
+import { deepClone } from "@/util/util";
|
|
|
+import { createDomainInfo } from "@/util/createData";
|
|
|
+import { createDomain } from "@/api/domainName"
|
|
|
+import { operationMap } from "@/enums/domain/operationType.js"
|
|
|
+export default {
|
|
|
+ mixins: [rulesForDomain],
|
|
|
+ props: {
|
|
|
+ propData: {
|
|
|
+ //弹窗展示控制
|
|
|
+ dialogState: {
|
|
|
+ type: String,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ //所选当前列的数据
|
|
|
+ currentRow: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
+ },
|
|
|
+ currentRowChild: {
|
|
|
+ type: Array,
|
|
|
+ default: []
|
|
|
+ },
|
|
|
+ //操作类型
|
|
|
+ operationType: {
|
|
|
+ type: String,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ functionCode: {
|
|
|
+ type: Object,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ operationMap,
|
|
|
+ dialogVisible: this.propData.dialogState,
|
|
|
+ childVisible: false,
|
|
|
+ isEdit: this.propData.opeartionType,
|
|
|
+ input: '',
|
|
|
+ user: {},
|
|
|
+ tableData: this.propData.currentRow,
|
|
|
+ childTable: this.propData.currentRowChild,
|
|
|
+ childRowInfo: {},
|
|
|
+ childIsEdit: true,
|
|
|
+ childTableAdd: false,
|
|
|
+ rowIndex: 0,
|
|
|
+ multipleSelection: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getUserInfo();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'propData.dialogState': {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.dialogVisible = newValue
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ 'propData.currentRow': {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.tableData = newValue
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ 'propData.operationType': {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.isEdit = newValue
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ 'propData.currentRowChild': {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.childTable = newValue
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ postDomainInfo(operationType) {
|
|
|
+ console.log("$", this.functionCode["domain_admin"])
|
|
|
+ if (!this.functionCode["domain_admin"]) {
|
|
|
+ return this.$message({ type: "error", message: "您没有操作权限", duration: 2000, onClose: () => { } })
|
|
|
+ }
|
|
|
+ this.$refs["domainForm"].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (operationType === null || operationType === "") {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "错误,请检查操作类型",
|
|
|
+ duration: 2000,
|
|
|
+ onClose: () => { }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 构造请求data
|
|
|
+ const domianInfo = createDomainInfo(this.tableData, this.childTable, this.user.UserName, operationType)
|
|
|
+ await createDomain(domianInfo, success => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: "操作成功"
|
|
|
+ });
|
|
|
+ this.$refs["domainForm"].resetFields();
|
|
|
+ this.reset()
|
|
|
+ this.$emit("reflashTable", domianInfo)
|
|
|
+
|
|
|
+ }, error => {
|
|
|
+ console.warn(error);
|
|
|
+ this.$message({ type: "error", message: error, duration: 2000, onClose: () => { } });
|
|
|
+ }, exception => {
|
|
|
+ console.warn(exception);
|
|
|
+ this.$message({ type: "error", message: exception, duration: 2000, onClose: () => { } });
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "注意填写格式"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm('确认关闭?')
|
|
|
+ .then(_ => {
|
|
|
+ //激活自定义事件
|
|
|
+ this.reset();
|
|
|
+ // this.tableData = {};
|
|
|
+ this.$refs["domainForm"].resetFields();
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => { });
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ console.log('submit!');
|
|
|
+ },
|
|
|
+
|
|
|
+ // 费用子表弹窗关闭前函数
|
|
|
+ childhandleClose(done) {
|
|
|
+ this.$confirm('确认关闭?')
|
|
|
+ .then(_ => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch(_ => { });
|
|
|
+ },
|
|
|
+ //自定义事件,重置父组件传递进来的数据
|
|
|
+ reset() {
|
|
|
+ this.$emit("resetPropData", false, "", "", [])
|
|
|
+ // this.$emit("resetCurrentRow", {})
|
|
|
+ },
|
|
|
+ //获取当前用户信息
|
|
|
+
|
|
|
+ getUserInfo() {
|
|
|
+ this.$store.dispatch('getSysUserInfo');
|
|
|
+ this.user = this.$store.state.sysUserInfo;
|
|
|
+ },
|
|
|
+ // 费用子表表单弹窗的展示函数
|
|
|
+ showChildForm(rowInfo, visible, isEdit) {
|
|
|
+ this.childRowInfo = rowInfo.row;
|
|
|
+ this.rowIndex = rowInfo.$index;
|
|
|
+ this.childVisible = visible;
|
|
|
+ this.childIsEdit = isEdit;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 费用子表弹窗取消按钮函数
|
|
|
+ cancelChildForm() {
|
|
|
+ this.resetValue()
|
|
|
+ },
|
|
|
+
|
|
|
+ //子表重置默认值
|
|
|
+ resetValue() {
|
|
|
+ this.childRowInfo = {};
|
|
|
+ this.$set(this.childRowInfo, "payType", "")
|
|
|
+ this.childVisible = false;
|
|
|
+ this.childIsEdit = true;
|
|
|
+ this.childTableAdd = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 费用子表弹窗保存按钮函数
|
|
|
+ saveChildForm() {
|
|
|
+ const childRowInfo = deepClone(this.childRowInfo);
|
|
|
+ if (JSON.stringify(childRowInfo) == "{}" || JSON.stringify(childRowInfo) == "") {
|
|
|
+ console.log("childRowInfo为空")
|
|
|
+ return this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "请填写信息"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.$refs["childForm"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ //判断标识,当前是否为添加
|
|
|
+ if (this.childTableAdd) {
|
|
|
+ if (this.childTable == null || this.childTable == "") {
|
|
|
+ this.childTable = [childRowInfo]
|
|
|
+ } else {
|
|
|
+ this.childTable.push(childRowInfo)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 不为添加则定义为修改
|
|
|
+ else {
|
|
|
+ this.childTable[this.rowIndex] = childRowInfo;
|
|
|
+ }
|
|
|
+ //关闭弹窗前重置标识,且清空数据
|
|
|
+ this.resetValue()
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$message({
|
|
|
+ type: 'error',
|
|
|
+ message: "请检查输入数据",
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //当所选费用子表列发生变化的方法
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val;
|
|
|
+ },
|
|
|
+
|
|
|
+ //删除所选的费用子表列
|
|
|
+ deleteChildRow() {
|
|
|
+ this.$confirm("确认删除所选费用子表列吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ //过滤掉不被选中的列
|
|
|
+ this.childTable = this.childTable.filter(item => {
|
|
|
+ return !this.multipleSelection.includes(item);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.tip {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+</style>
|