Procházet zdrojové kódy

项目信息动态展示

duxiangyu před 3 roky
rodič
revize
09c1d7f495

+ 9 - 1
src/components/project-manage/components/anchor.vue

@@ -3,7 +3,7 @@
     <div
       class="anchor-item"
       :class="{ active: activeIndex === index }"
-      v-for="(item, index) in points"
+      v-for="(item, index) in anchorList"
       :key="item.value"
       @click="go(item.value, index)"
     >
@@ -13,6 +13,14 @@
 </template>
 <script>
 export default {
+  props: {
+    anchorList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
   data() {
     return {
       activeIndex: 0,

+ 66 - 17
src/components/project-manage/components/basic.vue

@@ -1,23 +1,48 @@
 <template>
   <div class="basic-container">
-    <Title :name="name" />
+    <Title :name="itemProps.label" />
     <div class="basic-content">
-      <div class="basic-line">
-        项目ID:<span>{{ info.id }}</span>
+      <GeoComp v-if="itemProps.label === '地理位置'" />
+      <div
+        :class="['basic-item', { all: item.dataType === 'ATTACHMENT' }]"
+        v-for="(item, index) in itemProps.child"
+        :key="item.id"
+        v-if="item.visible"
+      >
+        <FormItem
+          :label="item.name"
+          :formType="filterType(item.dataType)"
+          :isDisabled="item.unDisabled"
+          :formItemObj="item"
+          :info="info"
+        />
       </div>
-      <div class="basic-line">
+
+      <!-- <div class="basic-line">
         项目本地名称:<span>{{ info.localName }}</span>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 <script>
 import Title from "./title.vue";
+import { dataTypeEnum } from "../index.vue";
+// import FormItem from "./formItem.vue";
+import FormItem from "../form/index.vue";
+import GeoComp from "./geo.vue";
 export default {
   components: {
     Title,
+    FormItem,
+    GeoComp,
   },
   props: {
+    itemProps: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
     name: {
       type: String,
       default: "",
@@ -25,13 +50,24 @@ export default {
     info: {
       type: Object,
       default: () => {
-        return {
-          id: "",
-          localName: "",
-        };
+        return {};
       },
     },
   },
+  methods: {
+    filterType(type) {
+      return dataTypeEnum[type];
+    },
+    filterClass(type) {
+      let className = "";
+      switch (type) {
+        case "ATTACHMENT":
+        case "long":
+          className = "all";
+          return;
+      }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -42,16 +78,29 @@ export default {
   &-content {
     display: flex;
     padding-left: 16px;
-  }
-  &-line {
-    font-size: 14px;
-    color: #646c73;
-    span {
-      color: #1f2429;
+    flex-wrap: wrap;
+    .basic-item {
+      width: 50%;
+      font-size: 14px;
+      color: #646c73;
+      margin-bottom: 24px;
+      span {
+        color: #1f2429;
+      }
     }
-    &:nth-child(2) {
-      margin-left: 157px;
+    .all {
+      width: 100%;
     }
   }
+  // &-line {
+  //   font-size: 14px;
+  //   color: #646c73;
+  //   span {
+  //     color: #1f2429;
+  //   }
+  //   &:nth-child(2) {
+  //     margin-left: 157px;
+  //   }
+  // }
 }
 </style>

+ 4 - 1
src/components/project-manage/components/formItem.vue

@@ -18,7 +18,9 @@
     <Input
       v-if="formType === 'input'"
       v-model="value"
+      :width="250"
       :placeholder="placeholder"
+      :disabled="isDisabled"
     ></Input>
     <!-- 输出框带单位 -->
     <Input
@@ -94,9 +96,10 @@ export default {
       type: String,
       default: "请输入",
     },
+    isDisabled: false,
     labelWidth: {
       type: Number,
-      default: 100,
+      default: 120,
     },
     unit: String,
     selectData: {

+ 6 - 30
src/components/project-manage/components/geo.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="geo-container">
-    <Title name="地理信息" />
     <div class="geo-content">
       <div id="map-container"></div>
       <div class="map-search-input">
@@ -8,32 +7,6 @@
           <i slot="prefix" class="el-input__icon el-icon-search"></i>
         </el-input>
       </div>
-      <div class="form-content">
-        <FormItem label="省市区县" :initValue="geoFormData.district" />
-        <FormItem label="详细地址" :initValue="geoFormData.address" />
-        <el-row>
-          <el-col :span="12">
-            <FormItem
-              label="经度"
-              :initValue="geoFormData.lng"
-              formType="input-unit"
-              unit="度"
-            />
-          </el-col>
-          <el-col :span="12"
-            ><FormItem
-              label="纬度"
-              :initValue="geoFormData.lat"
-              formType="input-unit"
-              unit="度"
-          /></el-col>
-        </el-row>
-        <FormItem
-          label="抗震设防烈度"
-          :initValue="geoFormData.level"
-          formType="select"
-        />
-      </div>
     </div>
   </div>
 </template>
@@ -71,7 +44,6 @@ export default {
     };
   },
   mounted() {
-    console.log(this.geoFormData, 111);
     this.initMap();
   },
   methods: {
@@ -81,12 +53,15 @@ export default {
         key: window.__systemConf.mapKey,
         version: "2.0",
         plugins: [],
-        setCenter: [this.geoFormData.lng, this.geoFormData.lat],
       }).then((Amap) => {
         this.map = new Amap.Map("map-container", {
           zoom: 11,
           resizeEnable: true,
         });
+        this.addMarker(Amap, {
+          lng: this.geoFormData.lng,
+          lat: this.geoFormData.lat,
+        });
         Amap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
           const autoOptions = {
             input: "tipinput",
@@ -149,8 +124,9 @@ export default {
   },
   watch: {
     PropInfo: {
-      handler: (val) => {
+      handler(val) {
         this.geoFormData = val;
+        this.initMap();
       },
       deep: true,
     },

+ 61 - 0
src/components/project-manage/form/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="form-container">
+    <LabelComp :label="formItemObj.name" :popText="formItemObj.note" />
+    <component
+      v-bind:is="cur_comp[formItemObj.dataType]"
+      :initValue="info[formItemObj.path]"
+      :isDisabled="!formItemObj.unDisabled"
+      :unit="formItemObj.unit"
+      :selectData="formItemObj.dataSource"
+      :formItemObj="formItemObj"
+    />
+  </div>
+</template>
+<script>
+// import LabelComp from "./items/label.vue";
+import LabelComp from "./items/label.vue";
+import InputComp from "./items/input.vue";
+import SelectComp from "./items/select.vue";
+import DateComp from "./items/date.vue";
+import UploadComp from "./items/upload.vue";
+export default {
+  components: {
+    LabelComp,
+  },
+  props: {
+    formItemObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      cur_comp: {
+        INTEGER: InputComp,
+        STRING: InputComp,
+        DOUBLE: InputComp,
+        TEXT: InputComp,
+        ENUM: SelectComp,
+        DATETIME: DateComp,
+        ATTACHMENT: UploadComp,
+      },
+    };
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.form-container {
+  display: flex;
+  align-items: center;
+}
+</style>

+ 24 - 0
src/components/project-manage/form/items/date.vue

@@ -0,0 +1,24 @@
+<template>
+  <PickerDate :date="value" @change="date1Change" />
+</template>
+
+<script>
+export default {
+  props: {
+    initValue: {
+      type: [String, Number, Array, Object],
+      default: () => {
+        return "";
+      },
+    },
+  },
+  data() {
+    return {
+      value: this.initValue,
+    };
+  },
+  methods: {
+    date1Change() {},
+  },
+};
+</script>

+ 51 - 0
src/components/project-manage/form/items/input.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- 输出框 -->
+  <Input
+    v-model="value"
+    :width="250"
+    :placeholder="placeholder"
+    :disabled="isDisabled"
+    :type="formItemObj.name === '项目简介' ? 'textarea' : 'input'"
+    :rows="6"
+    :right-button="
+      unit
+        ? [
+            {
+              id: '1',
+              name: unit,
+              checked: 'checked',
+            },
+          ]
+        : []
+    "
+  ></Input>
+</template>
+<script>
+export default {
+  props: {
+    initValue: {
+      type: [String, Number, Array, Object],
+      default: () => {
+        return "";
+      },
+    },
+    placeholder: {
+      type: String,
+      default: "请输入",
+    },
+    isDisabled: false,
+    unit: String,
+    formItemObj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      value: this.initValue,
+    };
+  },
+};
+</script>

+ 54 - 0
src/components/project-manage/form/items/label.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- 标题 -->
+  <div
+    class="label"
+    :style="{ width: labelWidth + 'px', flex: `0 0 ${labelWidth}px` }"
+  >
+    {{ label }}
+    <!-- 提示 -->
+    <Popover v-if="popText" type="base" placement="top-left">
+      <template #content>
+        <article>
+          {{ popText }}
+        </article>
+      </template>
+      <Icon class="icon" :name="'tagError'" />
+    </Popover>
+    :
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    labelWidth: {
+      type: Number,
+      default: 120,
+    },
+    popText: {
+      type: String,
+      default: "",
+    },
+    label: "",
+  },
+};
+</script>
+<style lang="less" scoped>
+.label {
+  font-size: 14px;
+  text-align: right;
+  color: #646c73;
+  margin-right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  .icon {
+    width: 11.5px;
+    height: 11.5px;
+    /deep/ .v-svg-tagError {
+      width: 11.5px !important;
+      height: 11.5px !important;
+    }
+  }
+}
+</style>

+ 61 - 0
src/components/project-manage/form/items/select.vue

@@ -0,0 +1,61 @@
+<template>
+  <!-- 选择框 -->
+  <MCascade
+    width="180"
+    v-model="value"
+    :data="mapList(selectData)"
+    @change="change"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    selectData: [],
+    initValue: {
+      type: [String, Number, Array, Object],
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      value: this.initValue === "" ? [] : [],
+    };
+  },
+  methods: {
+    change(result) {},
+    mapList(list) {
+      let _list = list.map((i) => {
+        return {
+          id: i.code,
+          name: i.name,
+          parentCode: i.parentCode,
+        };
+      });
+      let tree = this.listToTree(_list);
+      return tree;
+    },
+    listToTree(list) {
+      var map = {},
+        node,
+        tree = [],
+        i;
+      for (i = 0; i < list.length; i++) {
+        map[list[i].id] = list[i];
+        list[i].children = [];
+      }
+      for (i = 0; i < list.length; i += 1) {
+        node = list[i];
+        if (node.parentCode) {
+          map[node.parentCode].children.push(node);
+        } else {
+          tree.push(node);
+        }
+      }
+      return tree;
+    },
+  },
+};
+</script>

+ 26 - 0
src/components/project-manage/form/items/upload.vue

@@ -0,0 +1,26 @@
+<template>
+  <ImageUpload
+    hosts="http://47.95.122.141:8209/domita/backend"
+    action="/base/attachment/uploadX"
+    :defaultFileList="value"
+    :previewMode="false"
+    :multiple="true"
+  />
+</template>
+<script>
+export default {
+  props: {
+    initValue: {
+      type: [String, Number, Array, Object],
+      default: () => {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      value: this.initValue === "" ? [] : [],
+    };
+  },
+};
+</script>

+ 64 - 25
src/components/project-manage/index.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="container">
     <div class="left">
-      <Anchor @goAnchor="goAnchor" />
+      <Anchor @goAnchor="goAnchor" :anchorList="anchorList" />
     </div>
     <div class="right">
-      <Basic name="基本信息" :info="info.basic" />
-      <Geo :propInfo="info.geo" />
+      <Basic
+        v-for="(item, index) in anchorList"
+        :key="index"
+        :itemProps="item"
+        :info="info"
+      />
+      <!-- <Geo :PropInfo="info.geo" />
       <Project />
-      <Business />
+      <Business /> -->
       <div class="bottom">
         <Button type="primary">保存</Button>
       </div>
@@ -22,6 +27,19 @@ import Project from "./components/project.vue";
 import Business from "./components/business.vue";
 import { mapState } from "vuex";
 import ScanController from "@/controller/old-adm/ScanController";
+import Dic from "@/controller/old-adm/dicController";
+import Form from "./form/index.vue";
+export const dataTypeEnum = {
+  INTEGER: "input",
+  DOUBLE: "input",
+  BOOLEAN: "BOOLEAN",
+  STRING: "input",
+  DATETIME: "DATETIME",
+  ENUM: "select",
+  MENUM: "select",
+  ATTACHMENT: "upload",
+  OBJECT: "OBJECT",
+};
 export default {
   components: {
     Anchor,
@@ -29,22 +47,12 @@ export default {
     Geo,
     Project,
     Business,
+    Form,
   },
   data() {
     return {
-      info: {
-        basic: {
-          id: "",
-          localName: "",
-        },
-        geo: {
-          district: "", // 省市区县
-          address: "", // 详细地址
-          lng: "", // 经度
-          lat: "", // 纬度
-          level: null, // 抗震设防烈度
-        },
-      },
+      anchorList: [],
+      info: {},
     };
   },
   computed: {
@@ -52,10 +60,40 @@ export default {
     ...mapState("layout", ["projectId"]),
   },
   mounted() {
-    console.log(this.selectProject, this.projectId);
     this.getInfo();
+    this.getDict();
   },
   methods: {
+    getDict() {
+      Dic.getDataDictionary({
+        type: "project",
+        filters: `projectId=${this.projectId}`,
+      }).then((res) => {
+        let keys = [];
+        res.content
+          .filter((i) => i.visible)
+          .forEach((i) => {
+            const index = keys.findIndex((i2) => i2.label === i.firstTag);
+            const obj = {
+              label: i.firstTag,
+              value: `a-${encodeURI(i.firstTag)}`,
+              child: [i],
+            };
+            if (index === -1) {
+              keys.push(obj);
+            } else {
+              keys[index].child.push(i);
+            }
+          });
+        this.anchorList = keys;
+        console.log(
+          "%c [ res ]: ",
+          "color: #bf2c9f; background: pink; font-size: 13px;",
+          res
+        );
+        console.log(keys);
+      });
+    },
     getInfo() {
       ScanController.getAllProject({
         filters: `projectId=${this.projectId}`,
@@ -63,20 +101,21 @@ export default {
         console.log(res);
         if (res.content.length) {
           let info = res.content[0];
-          const { id, localName, infos } = info;
-          this.info.basic.id = id;
-          this.info.basic.localName = localName;
+          // const { id, localName, infos } = info;
+          // this.info.basic.id = id;
+          // this.info.basic.localName = localName;
 
-          this.info.geo.lng = infos.longitude;
-          this.info.geo.lat = infos.latitude;
+          // this.info.geo.lng = infos.longitude;
+          // this.info.geo.lat = infos.latitude;
+          this.info = info;
         }
       });
     },
     goAnchor(anchor) {
-      let name = anchor + "-container";
+      let name = anchor;
       let dom = document.querySelector(`.${name}`);
       let right = document.querySelector(".right");
-      if (dom) {
+      if (dom && right) {
         right.scrollTop = dom.offsetTop - 120;
       }
     },

+ 3 - 1
src/meri.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import {Button, Input, MSelect, Icon, Popover, ImageUpload, Modal} from 'meri-design'
+import {Button, Input, MSelect, Icon, Popover, ImageUpload, Modal, MCascade, PickerDate} from 'meri-design'
 
 Vue.use(Button)
 Vue.use(Input)
@@ -8,3 +8,5 @@ Vue.use(Icon)
 Vue.use(Popover)
 Vue.use(ImageUpload)
 Vue.use(Modal)
+Vue.use(MCascade)
+Vue.use(PickerDate)