|
@@ -0,0 +1,549 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ :class="'singleDataDialog'"
|
|
|
+ :visible.sync="isShow"
|
|
|
+ width="700px"
|
|
|
+ top="7%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :before-close="dialogBeforeClose"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :model="fromDataRender"
|
|
|
+ class="singledata"
|
|
|
+ ref="single_form"
|
|
|
+ label-width="80px"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item label="标题字段" prop="content.titlePara">
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.content.titlePara"
|
|
|
+ :readonly="!edit"
|
|
|
+ ></el-input>
|
|
|
+ <!-- maxlength="20"
|
|
|
+ show-word-limit -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item label="行政区划编码字段">
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.content.areaCodePara"
|
|
|
+ :readonly="!edit"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item label="第三方ID字段" prop="content.threeIdPara">
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.content.threeIdPara"
|
|
|
+ :readonly="!edit"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item label="第三方表名" prop="tableName">
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.tableName"
|
|
|
+ :readonly="!edit"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item label="中心经度字段" prop="content.lonPara">
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.content.lonPara"
|
|
|
+ :readonly="!edit"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item label="中心纬度字段" prop="content.latPara">
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.content.latPara"
|
|
|
+ :readonly="!edit"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row v-if="modelParams.geotype != 0">
|
|
|
+ <el-col :span="22">
|
|
|
+ <el-form-item label="点集字段" prop="content.locationsPara">
|
|
|
+ <!-- :readonly="!edit" -->
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.content.locationsPara"
|
|
|
+ placeholder="实际字段值应为WKT格式数据,其余类型不支持"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item label="描述字段" prop="content.contentPara">
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.content.contentPara"
|
|
|
+ :readonly="!edit"
|
|
|
+ ></el-input>
|
|
|
+ <!-- maxlength="100" -->
|
|
|
+ <!-- show-word-limit -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item label="更新字段" prop="updatePara">
|
|
|
+ <el-input
|
|
|
+ v-model="fromDataRender.updatePara"
|
|
|
+ :readonly="!edit"
|
|
|
+ ></el-input>
|
|
|
+ <!-- maxlength="100" -->
|
|
|
+ <!-- show-word-limit -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ style="float: right"
|
|
|
+ @click="changeAdvancedOptionsStatue()"
|
|
|
+ >
|
|
|
+ 高级选项
|
|
|
+ <i
|
|
|
+ v-show="!advancedOptionsShow"
|
|
|
+ class="el-icon-caret-bottom el-icon--right"
|
|
|
+ ></i>
|
|
|
+ <i
|
|
|
+ v-show="advancedOptionsShow"
|
|
|
+ class="el-icon-caret-top el-icon--right"
|
|
|
+ ></i>
|
|
|
+ </el-button>
|
|
|
+ <!-- el-icon-caret-bottom -->
|
|
|
+ <!-- el-icon-caret-top -->
|
|
|
+ </el-row>
|
|
|
+ <!-- 高级选项 table -->
|
|
|
+ <div v-if="advancedOptionsShow">
|
|
|
+ <el-table
|
|
|
+ :data="listData"
|
|
|
+ :class="['advanceOptionsTable']"
|
|
|
+ max-height="250"
|
|
|
+ >
|
|
|
+ <el-table-column label="字段名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input
|
|
|
+ placeholder="例:CITYID"
|
|
|
+ v-model="scope.row.paraName"
|
|
|
+ :readonly="!edit"
|
|
|
+ ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input
|
|
|
+ placeholder="例:建筑金额"
|
|
|
+ v-model="scope.row.name"
|
|
|
+ :readonly="!edit"
|
|
|
+ ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="单位">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input
|
|
|
+ placeholder="例:万元"
|
|
|
+ v-model="scope.row.unit"
|
|
|
+ :readonly="!edit"
|
|
|
+ ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column :align="'right'" v-if="edit">
|
|
|
+ <template slot="header">
|
|
|
+ <el-button size="mini" @click="addAdvancedOptionsRow()">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="deleteAdvancedOptionsRow(scope.$index, scope)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-minus"></i>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 高级选项 table end -->
|
|
|
+ </el-form>
|
|
|
+ <!-- centerPoint: centerPoint, -->
|
|
|
+
|
|
|
+ <span slot="title" class="dialog-title">
|
|
|
+ <div class="title">
|
|
|
+ <span>{{ title }}</span>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ <span slot="footer" class="dialog-footer" v-if="edit">
|
|
|
+ <el-button @click="dialogBeforeClose()">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="sure">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import api from "@/api/content";
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ isShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ edit: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: Number,
|
|
|
+ default: 1, //1 新增 2 修改
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ beforeClose: {
|
|
|
+ type: Function,
|
|
|
+ },
|
|
|
+ modelParams: {
|
|
|
+ type: Object,
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ formData: {
|
|
|
+ type: Object,
|
|
|
+ default: function () {
|
|
|
+ return {
|
|
|
+ content: {
|
|
|
+ areaCodePara: "",
|
|
|
+ contentPara: "",
|
|
|
+ jsonStrPara: [],
|
|
|
+ latPara: "",
|
|
|
+ lonPara: "",
|
|
|
+ locationsPara: "",
|
|
|
+ threeIdPara: "",
|
|
|
+ titlePara: "",
|
|
|
+ },
|
|
|
+ modelId: "",
|
|
|
+ tableName: "",
|
|
|
+ updatePara: "",
|
|
|
+ updateTime: 0,
|
|
|
+ updateUrl: "http://121.43.55.7:10086/metadata/test/",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fromDataRender: {
|
|
|
+ content: {
|
|
|
+ areaCodePara: "",
|
|
|
+ contentPara: "",
|
|
|
+ jsonStrPara: [],
|
|
|
+ latPara: "",
|
|
|
+ lonPara: "",
|
|
|
+ locationsPara: "",
|
|
|
+ threeIdPara: "",
|
|
|
+ titlePara: "",
|
|
|
+ },
|
|
|
+ modelId: "",
|
|
|
+ tableName: "",
|
|
|
+ updatePara: "",
|
|
|
+ updateTime: 0,
|
|
|
+ updateUrl: "http://121.43.55.7:10086/metadata/test/",
|
|
|
+ },
|
|
|
+ listData: [],
|
|
|
+ rules: {
|
|
|
+ "content.titlePara": [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入标题字段的字段名",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // areaCodePara: [
|
|
|
+ // { required: true, message: "请输入名称", trigger: "blur" },
|
|
|
+ // ],
|
|
|
+ "content.threeIdPara": [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请输入第三方ID的字段名",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableName: [
|
|
|
+ { required: true, message: "请输入第三方表名", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ "content.lonPara": [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请填写中心点经度的字段名",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ "content.latPara": [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请填写中心点纬度的字段名",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ "content.locationsPara": [
|
|
|
+ { required: true, message: "请填写点集的字段名", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ "content.contentPara": [
|
|
|
+ { required: true, message: "请填写描述的字段名", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ updatePara: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "请填写更新字段的字段名",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ isShowUpdateCenterDialog: false,
|
|
|
+ centerPoint: [],
|
|
|
+ tableData: [{}],
|
|
|
+ advancedOptionsShow: false,
|
|
|
+
|
|
|
+ isShowUpdateGeometryDialog: false,
|
|
|
+ geometry: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 创建
|
|
|
+ sure() {
|
|
|
+ let that = this;
|
|
|
+ if (this.listData.length > 0) {
|
|
|
+ let judge = this.listData.every(function (item) {
|
|
|
+ return item.name != "" && item.paraName != ""; // && item.unit;
|
|
|
+ });
|
|
|
+ if (!judge) {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "高级选项相关内容未填写完整,请完善后重新提交!",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$refs["single_form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ var obj = Object.assign({}, that.fromDataRender);
|
|
|
+ obj.content.jsonStrPara = Object.assign({}, that.listData);
|
|
|
+ obj.modelId = that.modelParams.modelId;
|
|
|
+ // 开始导入
|
|
|
+ that.upload(obj);
|
|
|
+ } else {
|
|
|
+ that.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "信息填写有误,请修改后提交",
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 创建
|
|
|
+ upload(obj) {
|
|
|
+ let that = this;
|
|
|
+ // 上传loading
|
|
|
+ const loading =
|
|
|
+ this.$createLoading("数据库导入功能配置上传中,请勿刷新!");
|
|
|
+ api
|
|
|
+ .uploadDBConfigforModelID({ type: 2, dbInfo: JSON.stringify(obj) })
|
|
|
+ .then((result) => {
|
|
|
+ loading.close();
|
|
|
+ if (result.code == 200) {
|
|
|
+ that
|
|
|
+ .$confirm(result.content, "", {
|
|
|
+ showConfirmButton: false,
|
|
|
+ cancelButtonText: "关闭",
|
|
|
+ type: "success",
|
|
|
+ })
|
|
|
+ .then(() => {})
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ loading.close();
|
|
|
+ that.$message({
|
|
|
+ type: "error",
|
|
|
+ message: err,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新
|
|
|
+ updateSingleData(data) {
|
|
|
+ let that = this;
|
|
|
+ // 上传loading
|
|
|
+ const loading = this.$createLoading("数据更新中,请勿刷新!");
|
|
|
+ api
|
|
|
+ .updateSingleData(data)
|
|
|
+ .then((result) => {
|
|
|
+ if (result.code == 200) {
|
|
|
+ loading.close();
|
|
|
+ that.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "数据更新成功!",
|
|
|
+ });
|
|
|
+ if (that.updateData) that.updateData();
|
|
|
+ that.dialogBeforeClose();
|
|
|
+ } else {
|
|
|
+ // that.$checkRequestCode(result);
|
|
|
+ that.$message({
|
|
|
+ type: "error",
|
|
|
+ message: result.message,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ loading.close();
|
|
|
+ that.$message({
|
|
|
+ type: "error",
|
|
|
+ message: err,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 创建数据集窗口关闭前
|
|
|
+ dialogBeforeClose() {
|
|
|
+ this.fromDataRender = {
|
|
|
+ content: {
|
|
|
+ areaCodePara: "",
|
|
|
+ contentPara: "",
|
|
|
+ jsonStrPara: [],
|
|
|
+ latPara: "",
|
|
|
+ lonPara: "",
|
|
|
+ locationsPara: "",
|
|
|
+ threeIdPara: "",
|
|
|
+ titlePara: "",
|
|
|
+ },
|
|
|
+ modelId: "",
|
|
|
+ tableName: "",
|
|
|
+ updatePara: "",
|
|
|
+ updateTime: 0,
|
|
|
+ updateUrl: "http://121.43.55.7:10086/metadata/test/",
|
|
|
+ };
|
|
|
+ this.advancedOptionsShow = false;
|
|
|
+ this.clearAdvancedOptions();
|
|
|
+ this.beforeClose();
|
|
|
+ this.$refs.single_form.clearValidate();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更改高级选项显示状态
|
|
|
+ changeAdvancedOptionsStatue() {
|
|
|
+ this.advancedOptionsShow = !this.advancedOptionsShow;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加 高级选项input 按钮
|
|
|
+ addAdvancedOptionsRow() {
|
|
|
+ this.listData.push({
|
|
|
+ name: "",
|
|
|
+ paraName: "",
|
|
|
+ unit: "",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除 高级选项input 按钮
|
|
|
+ deleteAdvancedOptionsRow(index) {
|
|
|
+ this.listData.splice(index, 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 清空高级选项
|
|
|
+ clearAdvancedOptions() {
|
|
|
+ this.listData = [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ isShow(newVal, oldVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.fromDataRender = Object.assign({}, this.formData);
|
|
|
+ if (this.formData.content.jsonStrPara.length != 0) {
|
|
|
+ this.advancedOptionsShow = true;
|
|
|
+ this.listData = this.formData.content.jsonStrPara;
|
|
|
+ } else {
|
|
|
+ this.advancedOptionsShow = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.singleDataDialog {
|
|
|
+ /deep/ .el-dialog__header {
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-dialog__body {
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-dialog__footer {
|
|
|
+ border-top: 1px solid #eeeeee;
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ /deep/ .el-form-item__label {
|
|
|
+ width: 140px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-form-item__content {
|
|
|
+ margin-left: 140px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .advanceOptionsTable {
|
|
|
+ border: 1px solid #eeeeee;
|
|
|
+ border-bottom: 0px solid #eeeeee;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/
|
|
|
+ .el-form-item.is-required:not(.is-no-asterisk)
|
|
|
+ > .el-form-item__label:before {
|
|
|
+ content: " ";
|
|
|
+ width: 0px;
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .is-required /deep/.el-form-item__label:after {
|
|
|
+ content: " *";
|
|
|
+ color: #3f9dfe;
|
|
|
+ font-size: 150%;
|
|
|
+ }
|
|
|
+ ::v-deep input::-webkit-outer-spin-button,
|
|
|
+ ::v-deep input::-webkit-inner-spin-button {
|
|
|
+ -webkit-appearance: none !important;
|
|
|
+ }
|
|
|
+ ::v-deep input[type="number"] {
|
|
|
+ -moz-appearance: textfield !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|