|
|
@@ -0,0 +1,430 @@
|
|
|
+<!--
|
|
|
+ * @Author: tengmingxue 1473375109@qq.com
|
|
|
+ * @Date: 2023-08-15 22:08:21
|
|
|
+ * @LastEditors: tengmingxue 1473375109@qq.com
|
|
|
+ * @LastEditTime: 2023-08-17 15:59:13
|
|
|
+ * @FilePath: \xld-gis-admin\src\views\resource\map\SourceDetail.vue
|
|
|
+ * @Description: 地图资源明细界面
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="source-detail">
|
|
|
+ <a-form ref="formRef" :model="formState" :rules="rules" style="width: 100%">
|
|
|
+ <div class="compontents">
|
|
|
+ <div class="title">基本信息</div>
|
|
|
+ <a-row class="form-container">
|
|
|
+ <a-col :span="12" class="form-col">
|
|
|
+ <a-form-item ref="servicename" label="资源名称" name="servicename" class="label-form-item">
|
|
|
+ <a-input v-model:value="formState.servicename" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :span="12" class="form-col">
|
|
|
+ <a-form-item ref="servicealiasname" label="资源别名" name="servicealiasname" class="label-form-item">
|
|
|
+ <a-input v-model:value="formState.servicealiasname" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :span="24" class="form-col">
|
|
|
+ <a-form-item ref="description" label="资源描述" name="description" class="label-form-item">
|
|
|
+ <a-textarea v-model:value="formState.description" :rows="2" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="form-col">
|
|
|
+ <a-form-item ref="servicetype" label="资源类型" name="servicetype" class="label-form-item">
|
|
|
+ <a-select v-model:value="formState.servicetype">
|
|
|
+ <template v-for="(tag, index) in assemblyType" :key="index">
|
|
|
+ <a-select-option :value="tag.value">{{ tag.value }}</a-select-option>
|
|
|
+ </template>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="form-col">
|
|
|
+ <a-form-item ref="thumbnail" label="缩略图" name="thumbnail" class="label-form-item">
|
|
|
+ <a-upload :custom-request="customUpload" v-model:file-list="fileList">
|
|
|
+ <a-button style="background-color: #0671dd; color: #fff; border-radius: 4px">
|
|
|
+ <upload-outlined></upload-outlined>
|
|
|
+ 文件上传
|
|
|
+ </a-button>
|
|
|
+ </a-upload>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="compontents">
|
|
|
+ <div class="title">描述信息</div>
|
|
|
+ <a-row class="form-container">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <a-col :span="12" class="form-col">
|
|
|
+ <a-form-item ref="source" label="发布日期" name="source" class="label-form-item">
|
|
|
+ <!-- <a-input v-model:value="formState.publishtime" disabled /> -->
|
|
|
+ <a-date-picker v-model:value="formState.publishtime" format="YYYY-MM-DD hh:mm:ss" style="width: 100%"
|
|
|
+ disabled show-time>
|
|
|
+ <template #renderExtraFooter>extra footer</template>
|
|
|
+ </a-date-picker>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="form-col">
|
|
|
+ <a-form-item ref="source" label="发布者" name="source" class="label-form-item">
|
|
|
+ <a-input v-model:value="formState.publisher" disabled />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ <a-col :span="12" class="form-col">
|
|
|
+ <a-form-item ref="updatetype" label="更新方式" name="updatetype" class="label-form-item">
|
|
|
+ <a-input v-model:value="formState.updateType" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" class="form-col">
|
|
|
+ <a-form-item ref="updatetime" label="更新时间" name="updatetime" class="label-form-item">
|
|
|
+ <a-date-picker v-model:value="formState.updatetime" format="YYYY-MM-DD hh:mm:ss" style="width: 100%"
|
|
|
+ disabled show-time>
|
|
|
+ <template #renderExtraFooter>extra footer</template>
|
|
|
+ </a-date-picker>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+
|
|
|
+ <a-col :span="6" class="form-col">
|
|
|
+ <a-form-item ref="public" label="是否公开" name="public" class="label-form-item">
|
|
|
+ <a-switch checked-children="" un-checked-children="" v-model:checked="formState.public" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" class="form-col">
|
|
|
+ <a-form-item ref="share" label="是否共享" name="share" class="label-form-item">
|
|
|
+ <a-switch checked-children="" un-checked-children="" v-model:checked="formState.share" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" class="form-col">
|
|
|
+ <a-form-item ref="externalApply" label="是否外部申请" name="externalApply" class="label-form-item">
|
|
|
+ <a-switch checked-children="" un-checked-children="" v-model:checked="formState.externalApply" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="6" class="form-col">
|
|
|
+ <a-form-item ref="searched" label="是否展示" name="searched" class="label-form-item">
|
|
|
+ <a-switch checked-children="" un-checked-children="" v-model:checked="formState.searched" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ ref,
|
|
|
+ toRefs,
|
|
|
+ toRaw,
|
|
|
+ unref,
|
|
|
+ computed,
|
|
|
+ unref,
|
|
|
+ nextTick,
|
|
|
+ reactive,
|
|
|
+ UnwrapRef,
|
|
|
+ onMounted,
|
|
|
+ watch,
|
|
|
+} from 'vue';
|
|
|
+import { BasicForm, useForm } from '/@/components/Form/index';
|
|
|
+import { UploadOutlined } from '@ant-design/icons-vue';
|
|
|
+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
|
|
+import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+const { t } = useI18n(); //加载国际化
|
|
|
+// 加载菜单数据
|
|
|
+import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
+import Moment from 'moment';
|
|
|
+import { insertService, updateService, update } from '/@/api/dataAdmin/assembly';
|
|
|
+import { session } from '/@/utils/Memory.js';
|
|
|
+
|
|
|
+const props = {
|
|
|
+ formData: { type: Object, default: ref(null) },
|
|
|
+ isUpdate: { type: Boolean, default: ref(false) },
|
|
|
+};
|
|
|
+interface FormState {
|
|
|
+ servicetype: string,
|
|
|
+ servicename: string;
|
|
|
+ mapingurl: string,
|
|
|
+ servicealiasname: string;
|
|
|
+ description: string;
|
|
|
+ publishtime: string;
|
|
|
+ publisher: string;
|
|
|
+ updateType: string;
|
|
|
+ updatetime: string;
|
|
|
+ public: boolean;
|
|
|
+ share: boolean;
|
|
|
+ searched: boolean;
|
|
|
+ externalApply: boolean;
|
|
|
+ date1: undefined;
|
|
|
+}
|
|
|
+export default defineComponent({
|
|
|
+ name: 'SourceDetail',
|
|
|
+ components: { BasicForm, UploadOutlined },
|
|
|
+ props,
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const data = reactive({
|
|
|
+ detail: props.formData,
|
|
|
+ isUpdate: props.isUpdate,
|
|
|
+ fileList: [],
|
|
|
+ });
|
|
|
+ var assemblyType = ref([
|
|
|
+ { value: '地图基础功能' },
|
|
|
+ { value: '覆盖物' },
|
|
|
+ { value: '测量工具' },
|
|
|
+ { value: '绘制工具' },
|
|
|
+ { value: '空间分析' },
|
|
|
+ { value: '天气特效' },
|
|
|
+ ])
|
|
|
+
|
|
|
+ const formRef = ref();
|
|
|
+ const formState: UnwrapRef<FormState> = reactive({
|
|
|
+ mapingurl: '',
|
|
|
+ servicename: '',
|
|
|
+ servicealiasname: '',
|
|
|
+ servicetype: '',
|
|
|
+ description: '',
|
|
|
+ publishtime: '',
|
|
|
+ publisher: '',
|
|
|
+ updateType: '',
|
|
|
+ updatetime: '',
|
|
|
+ public: true,
|
|
|
+ share: true,
|
|
|
+ searched: true,
|
|
|
+ externalApply: true,
|
|
|
+ date1: undefined,
|
|
|
+ });
|
|
|
+ const moment = Moment;
|
|
|
+ const rules = {
|
|
|
+ // mapingurl: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
|
|
|
+ servicetype: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
|
|
|
+
|
|
|
+ servicename: [
|
|
|
+ { required: true, message: '请填写资源名称', trigger: 'blur' },
|
|
|
+ { min: 3, max: 20, message: '长度必须在3到20个字符', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ servicealiasname: [
|
|
|
+ { required: true, message: '请输入资源别名', trigger: 'blur' },
|
|
|
+ { min: 3, max: 20, message: '长度必须在3到20个字符', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ systag: [{ required: true, message: '请选择系统标签', trigger: 'change' }],
|
|
|
+ date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
|
|
|
+ type: [
|
|
|
+ {
|
|
|
+ type: 'array',
|
|
|
+ required: true,
|
|
|
+ message: 'Please select at least one activity type',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
|
|
|
+ desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
|
|
|
+ };
|
|
|
+ const { createMessage } = useMessage();
|
|
|
+ watch(
|
|
|
+ () => props.formData,
|
|
|
+ (obj) => {
|
|
|
+ data.detail = obj;
|
|
|
+ if (data.isUpdate) setFormData();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ watch(
|
|
|
+ () => props.isUpdate,
|
|
|
+ (obj) => {
|
|
|
+ data.isUpdate = obj;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ const submitForm = () => {
|
|
|
+ try {
|
|
|
+ formRef.value
|
|
|
+ .validate()
|
|
|
+ .then(async () => {
|
|
|
+ const params = setSubmitForm();
|
|
|
+ console.log(params);
|
|
|
+ if (params) {
|
|
|
+ if (data.isUpdate) {
|
|
|
+ params.servicebase.serviceid = data.detail.serviceid;
|
|
|
+ params.servicebase.id = data.detail.id;
|
|
|
+ if (!params.servicebase.mapingurl) params.servicebase.mapingurl = data.detail.mapingurl;
|
|
|
+
|
|
|
+ params.metadata.serviceid = data.detail.serviceid;
|
|
|
+ params.metadata.id = data.detail.id;
|
|
|
+ if (!params.metadata.mapingurl) params.metadata.mapingurl = data.detail.mapingurl;
|
|
|
+
|
|
|
+
|
|
|
+ const res = await updateService(params);
|
|
|
+ if (res && res?.status !== '-1') {
|
|
|
+ createMessage.success('修改地图资源成功!');
|
|
|
+ resetForm();
|
|
|
+ emit('RtnMain', true);
|
|
|
+ } else createMessage.error('修改地图资源失败!,失败原因:' + res?.message, 1);
|
|
|
+ } else {
|
|
|
+ const res = await insertService(params);
|
|
|
+ if (res && res?.status !== '-1') {
|
|
|
+ createMessage.success('新增地图资源成功!');
|
|
|
+ resetForm();
|
|
|
+ emit('RtnMain', true);
|
|
|
+ } else createMessage.error('新增地图资源失败!,失败原因:' + res?.message, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error: ValidateErrorEntity<FormState>) => {
|
|
|
+ createMessage.error('请完成必填信息!', 1);
|
|
|
+ console.log('error', error);
|
|
|
+ });
|
|
|
+ } catch (ex) {
|
|
|
+ console.log(ex);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const resetForm = () => {
|
|
|
+ formRef.value.resetFields();
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 设置提交数据
|
|
|
+ */
|
|
|
+ const setSubmitForm = () => {
|
|
|
+ const userinfo = session.getItem('userInfo');
|
|
|
+ return {
|
|
|
+ type: 'SR',
|
|
|
+ servicebase: {
|
|
|
+ publisher: userinfo?.EMPLOYEE?.NAME, //'系统管理员',
|
|
|
+ username: userinfo?.EMPLOYEE?.NAME, //'系统管理员',
|
|
|
+ userid: userinfo?.EMPLOYEE?.EMPLOYEE_ID, //'27AF004A-8BDN-885T-30FU-89DE3388762B',
|
|
|
+ servicealiasname: formState.servicealiasname, //资源别名
|
|
|
+ description: formState.description, //资源描述
|
|
|
+ ispublic: formState.public ? '1' : '0', //是否公开
|
|
|
+ searched: formState.searched ? '1' : '0', //是否展示
|
|
|
+ externalApply: formState.externalApply ? '1' : '0', //外部申请
|
|
|
+ servicename: formState.servicename, //资源名
|
|
|
+ otherService: '',
|
|
|
+ source: formState.servicetype, //资源类型
|
|
|
+ mapingurl: formState.mapingurl //服务地址
|
|
|
+ },
|
|
|
+ metadata: {
|
|
|
+ source: formState.servicetype, //资源类型
|
|
|
+ mapingurl: formState.mapingurl, //服务地址
|
|
|
+ name: formState.servicename, //资源名
|
|
|
+ servicealiasname: formState.servicealiasname, //资源别名
|
|
|
+ thumbnail: '',
|
|
|
+ description: formState.description,
|
|
|
+ updateType: formState.updateType, //更新方式
|
|
|
+ workSpace: '',
|
|
|
+ ishistory: '0',
|
|
|
+ shsqlc: 'ggdata',
|
|
|
+ urlInfo: '',
|
|
|
+ otherService: '',
|
|
|
+ bz: '',
|
|
|
+ ispublic: formState.public ? '1' : '0', //是否公开
|
|
|
+ searched: formState.searched ? '1' : '0', //是否展示
|
|
|
+ externalApply: formState.externalApply ? '1' : '0', //外部申请
|
|
|
+ isShow: formState.share ? '1' : '0',
|
|
|
+ publisher: userinfo?.EMPLOYEE?.NAME, //'系统管理员',
|
|
|
+ username: userinfo?.EMPLOYEE?.NAME, //'系统管理员',
|
|
|
+ userid: userinfo?.EMPLOYEE?.EMPLOYEE_ID, //'27AF004A-8BDN-885T-30FU-89DE3388762B',
|
|
|
+ }
|
|
|
+ };
|
|
|
+ };
|
|
|
+ /**
|
|
|
+ * 设置表单数据
|
|
|
+ */
|
|
|
+ const setFormData = () => {
|
|
|
+ formState.public = data.detail.ispublic === '1' ? true : false;
|
|
|
+ formState.servicename = data.detail?.servicename;
|
|
|
+ formState.publishtime = data.detail?.publishdate
|
|
|
+ ? moment(data.detail?.publishdate).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ : '';
|
|
|
+ formState.publisher = data.detail?.publisher;
|
|
|
+ formState.servicealiasname = data.detail?.servicealiasname;
|
|
|
+ formState.updatetime = data.detail?.updatedate
|
|
|
+ ? moment(data.detail?.updatedate).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ : '';
|
|
|
+ formState.searched = data.detail.searched === 0 ? false : true;
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ resetForm();
|
|
|
+ });
|
|
|
+
|
|
|
+ function customUpload({ file, onSuccess, onError }) {
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+ update(formData, session.getItem('sysFild').dirId).then(r => {
|
|
|
+ if (r && r.resp_code == 0 && r.resp_msg == "OK") {
|
|
|
+ formState.mapingurl = `${r.datas.id},${r.datas.dirId}`;
|
|
|
+ onSuccess()
|
|
|
+ } else {
|
|
|
+ onError()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ assemblyType,
|
|
|
+ customUpload,
|
|
|
+ ...toRefs(data),
|
|
|
+ formRef,
|
|
|
+ moment,
|
|
|
+ rules,
|
|
|
+ formState,
|
|
|
+ submitForm,
|
|
|
+ resetForm,
|
|
|
+ createMessage,
|
|
|
+ setSubmitForm,
|
|
|
+ setFormData,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.source-detail {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+
|
|
|
+ .compontents {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 19px;
|
|
|
+ line-height: 18px;
|
|
|
+ padding-left: 6px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-left: 3px solid #0671dd;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 350;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-container {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+
|
|
|
+ .form-col {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-col-left {
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.label-form-item {
|
|
|
+ :deep(.ant-form-item-label) {
|
|
|
+ width: 90px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.ant-form-item-control) {
|
|
|
+ width: calc(100% - 90px);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|