浏览代码

上传组件样式修改

duxiangyu 3 年之前
父节点
当前提交
818c0b0680

+ 1 - 1
src/components/project-manage/components/basic.vue

@@ -28,7 +28,7 @@
 import Title from "./title.vue";
 import Title from "./title.vue";
 import { dataTypeEnum } from "../index.vue";
 import { dataTypeEnum } from "../index.vue";
 // import FormItem from "./formItem.vue";
 // import FormItem from "./formItem.vue";
-import FormItem from "../form/index.vue";
+import FormItem from "../form/form.vue";
 import GeoComp from "./geo.vue";
 import GeoComp from "./geo.vue";
 export default {
 export default {
   components: {
   components: {

+ 91 - 0
src/components/project-manage/form/form.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="form-container">
+    <LabelComp :label="formItemObj.name" :popText="formItemObj.note" />
+    <component
+      v-bind:is="cur_comp[formItemObj.dataType]"
+      :initValue="trueValue()"
+      :isDisabled="!formItemObj.unDisabled"
+      :unit="formItemObj.unit"
+      :selectData="formItemObj.dataSource"
+      :formItemObj="formItemObj"
+      @change="change"
+    />
+  </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";
+import ImageUploadComp from "./items/ImageUpload.vue";
+import { $Bus } from "@/utils/Bus";
+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: ImageUploadComp,
+      },
+      result: this.info,
+    };
+  },
+  mounted() {},
+  methods: {
+    change(val) {
+      let pathArr = this.splitPath(this.formItemObj.path);
+      // this.info[pathArr[0]][pathArr[1]] = val;
+      $Bus.$emit("formInfoChange", { pathArr: pathArr, value: val });
+    },
+    splitPath(path) {
+      return path.split(".");
+    },
+    trueValue() {
+      let pathArr = this.splitPath(this.formItemObj.path);
+      let value = "";
+      let path = "";
+      if (
+        pathArr.length > 1 &&
+        this.info[pathArr[0]].hasOwnProperty(pathArr[1])
+      ) {
+        path = [pathArr[0]][pathArr[1]];
+        value = this.info[pathArr[0]][pathArr[1]];
+      } else if (pathArr.length === 1) {
+        path = [pathArr[0]];
+        value = this.info[pathArr[0]];
+      }
+      return value;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.form-container {
+  display: flex;
+  align-items: center;
+}
+</style>

+ 82 - 59
src/components/project-manage/form/index.vue

@@ -1,35 +1,52 @@
 <template>
 <template>
-  <div class="form-container">
-    <LabelComp :label="formItemObj.name" :popText="formItemObj.note" />
-    <component
-      v-bind:is="cur_comp[formItemObj.dataType]"
-      :initValue="trueValue()"
-      :isDisabled="!formItemObj.unDisabled"
-      :unit="formItemObj.unit"
-      :selectData="formItemObj.dataSource"
-      :formItemObj="formItemObj"
-      @change="change"
-    />
+  <div class="basic-container">
+    <Title :name="itemProps.label" />
+    <div class="basic-content">
+      <GeoComp v-if="itemProps.label === '地理位置'" @change="geoChange" />
+      <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">
+        项目本地名称:<span>{{ info.localName }}</span>
+      </div> -->
+    </div>
   </div>
   </div>
 </template>
 </template>
 <script>
 <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";
+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 {
 export default {
   components: {
   components: {
-    LabelComp,
+    Title,
+    FormItem,
+    GeoComp,
   },
   },
   props: {
   props: {
-    formItemObj: {
+    itemProps: {
       type: Object,
       type: Object,
       default: () => {
       default: () => {
         return {};
         return {};
       },
       },
     },
     },
+    name: {
+      type: String,
+      default: "",
+    },
     info: {
     info: {
       type: Object,
       type: Object,
       default: () => {
       default: () => {
@@ -37,53 +54,59 @@ export default {
       },
       },
     },
     },
   },
   },
-  data() {
-    return {
-      cur_comp: {
-        INTEGER: InputComp,
-        STRING: InputComp,
-        DOUBLE: InputComp,
-        TEXT: InputComp,
-        ENUM: SelectComp,
-        DATETIME: DateComp,
-        // ATTACHMENT: UploadComp,
-      },
-      result: this.info,
-    };
-  },
-  mounted() {},
   methods: {
   methods: {
-    change(val, val2) {
-      let pathArr = this.splitPath(this.formItemObj.path);
-      this.info[pathArr[0]][pathArr[1]] = val;
-      console.log(this.info, this.formItemObj.path);
+    filterType(type) {
+      return dataTypeEnum[type];
     },
     },
-    splitPath(path) {
-      return path.split(".");
-    },
-    trueValue() {
-      let pathArr = this.splitPath(this.formItemObj.path);
-      let value = "";
-      let path = "";
-      if (
-        pathArr.length > 1 &&
-        this.info[pathArr[0]].hasOwnProperty(pathArr[1])
-      ) {
-        path = [pathArr[0]][pathArr[1]];
-        value = this.info[pathArr[0]][pathArr[1]];
-      } else if (pathArr.length === 1) {
-        path = [pathArr[0]];
-        value = this.info[pathArr[0]];
+    filterClass(type) {
+      let className = "";
+      switch (type) {
+        case "ATTACHMENT":
+        case "long":
+          className = "all";
+          return;
       }
       }
-      return value;
+    },
+    geoChange(info) {
+      console.log(info, "asdqasd");
+      this.info.infos.longitude = info.lng;
+      this.info.infos.latitude = info.lat;
+      this.info.infos.address = info.district;
     },
     },
   },
   },
 };
 };
 </script>
 </script>
-
 <style lang="less" scoped>
 <style lang="less" scoped>
-.form-container {
-  display: flex;
-  align-items: center;
+.basic {
+  &-container {
+    padding-bottom: 40px;
+  }
+  &-content {
+    display: flex;
+    padding-left: 16px;
+    flex-wrap: wrap;
+    .basic-item {
+      width: 50%;
+      font-size: 14px;
+      color: #646c73;
+      margin-bottom: 24px;
+      span {
+        color: #1f2429;
+      }
+    }
+    .all {
+      width: 100%;
+    }
+  }
+  // &-line {
+  //   font-size: 14px;
+  //   color: #646c73;
+  //   span {
+  //     color: #1f2429;
+  //   }
+  //   &:nth-child(2) {
+  //     margin-left: 157px;
+  //   }
+  // }
 }
 }
 </style>
 </style>

文件差异内容过多而无法显示
+ 959 - 766
src/components/project-manage/form/items/ImageUpload.vue


+ 4 - 1
src/components/project-manage/form/items/input.vue

@@ -45,7 +45,10 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
-      value: this.initValue,
+      value:
+        typeof this.initValue === "number"
+          ? this.initValue.toString()
+          : this.initValue,
     };
     };
   },
   },
   methods: {
   methods: {

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

@@ -1,9 +1,9 @@
 <template>
 <template>
   <ImageUpload
   <ImageUpload
-    :hosts="`http://develop.ysbdtp.com/dmp-file`"
+    :hosts="`http://47.95.122.141:8209/domita/backend`"
     action="/file/initSingleUpload"
     action="/file/initSingleUpload"
     :defaultFileList="value"
     :defaultFileList="value"
-    :previewMode="true"
+    :previewMode="false"
     :multiple="true"
     :multiple="true"
     :maxNumber="10"
     :maxNumber="10"
     @change="change"
     @change="change"

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

@@ -0,0 +1,180 @@
+<template>
+  <div class="container">
+    <div class="left">
+      <Anchor @goAnchor="goAnchor" :anchorList="anchorList" />
+    </div>
+    <div class="right">
+      <Basic
+        v-for="(item, index) in anchorList"
+        :key="index"
+        :itemProps="item"
+        :info="info"
+      />
+      <!-- <Geo :PropInfo="info.geo" />
+      <Project />
+      <Business /> -->
+      <div class="bottom">
+        <Button type="primary" @click="save">保存</Button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Anchor from "./components/anchor.vue";
+import Basic from "./components/basic.vue";
+import Geo from "./components/geo.vue";
+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";
+import { $Bus } from "@/utils/Bus";
+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,
+    Basic,
+    Geo,
+    Project,
+    Business,
+    Form,
+  },
+  data() {
+    return {
+      anchorList: [],
+      info: {},
+    };
+  },
+  computed: {
+    ...mapState(["selectProject"]),
+    ...mapState("layout", ["projectId"]),
+  },
+  mounted() {
+    this.getInfo();
+    this.getDict();
+    this.initEvent();
+  },
+  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}`,
+      }).then((res) => {
+        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;
+
+          // this.info.geo.lng = infos.longitude;
+          // this.info.geo.lat = infos.latitude;
+          this.info = info;
+        }
+      });
+    },
+    goAnchor(anchor) {
+      let name = anchor;
+      let dom = document.querySelector(`.${name}`);
+      let right = document.querySelector(".right");
+      if (dom && right) {
+        right.scrollTop = dom.offsetTop - 120;
+      }
+    },
+    save() {
+      ScanController.updateProjectInfo({ content: [this.info] }).then((res) => {
+        console.log(res);
+      });
+      console.log(this.info);
+    },
+    initEvent() {
+      $Bus.$on("formInfoChange", ({ pathArr, value }) => {
+        if (pathArr.length > 1) {
+          if (this.info[pathArr[0]].hasOwnProperty(pathArr[1])) {
+            this.info[pathArr[0]][pathArr[1]] = value;
+          } else {
+            this.$set(this.info[pathArr[0]], pathArr[1], value);
+          }
+        } else if (pathArr.length === 1) {
+          this.info[pathArr[0]] = value;
+        }
+      });
+    },
+  },
+  watch: {
+    projectId() {
+      this.getInfo();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.container {
+  width: 100%;
+  display: flex;
+  background-color: #ffffff;
+
+  .left {
+    flex: 0 0 143px;
+  }
+  .right {
+    width: 100%;
+
+    overflow-y: auto;
+    .basic-container,
+    .geo-container,
+    .project-container,
+    .business-container {
+      padding: 20px;
+    }
+    .bottom {
+      width: 100%;
+      height: 72px;
+      box-shadow: 0px 2px 10px rgba(31, 36, 41, 0.2);
+      // display: flex;
+      // align-items: center;
+      padding: 20px;
+    }
+  }
+}
+</style>

+ 10 - 0
src/components/project-manage/form/static/iconSvg/add.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 1 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g transform="translate(0, 1.500000)">
+        <path d="M8.66666667,1.66666667 L8.66666667,7.33266667 L14.3333333,7.33333333 L14.3333333,8.66666667
+                                L8.66566667,8.66666667 L8.66666667,14.3333333 L7.33333333,14.3333333 L7.33266667,8.66566667 L1.66666667,8.66666667
+                                L1.66666667,7.33333333 L7.33266667,7.33266667 L7.33333333,1.66666667 L8.66666667,1.66666667 Z"
+              class="svg-fill-grey-800">
+        </path>
+    </g>
+</svg>

文件差异内容过多而无法显示
+ 7 - 0
src/components/project-manage/form/static/iconSvg/clear2.svg


+ 9 - 0
src/components/project-manage/form/static/iconSvg/close.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M112.979852 869.87749m29.144113-29.144113l699.730243-699.730243q29.144113-29.144113 58.288226 0l0 0q29.144113 29.144113 0 58.288226l-699.730243 699.730243q-29.144113 29.144113-58.288226 0l0 0q-29.144113-29.144113 0-58.288226Z"
+          class="svg-fill-grey-500"></path>
+    <path d="M824.612116 882.05104L156.379237 213.818161a42.88 42.88 0 1 1 60.641478-60.641477l668.232879 668.232879a42.88 42.88 0 0 1-60.641478 60.641477z"
+          class="svg-fill-grey-500"></path>
+</svg>

+ 11 - 0
src/components/project-manage/form/static/iconSvg/download.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M513.024 41.92c23.552 0 42.688 19.072 42.688 42.688v597.312a42.688 42.688 0 0 1-85.312 0V84.608c0-23.616 19.072-42.688 42.624-42.688z"
+          class="svg-fill-grey-800"></path>
+    <path d="M506.496 664.384l275.584-266.048a42.688 42.688 0 0 1 59.264 61.44L535.232 755.2a42.56 42.56 0 0 1-60.16-0.896L183.872 455.68a42.688 42.688 0 1 1 61.056-59.52l261.568 268.224z"
+          class="svg-fill-grey-800"></path>
+    <path d="M43.712 639.232v213.376a128 128 0 0 0 128 128H854.4a128 128 0 0 0 128-128V639.232a42.688 42.688 0 0 0-85.376 0v213.376a42.688 42.688 0 0 1-42.624 42.624H171.712a42.688 42.688 0 0 1-42.688-42.624V639.232a42.688 42.688 0 0 0-85.312 0z"
+          class="svg-fill-grey-500"></path>
+</svg>

+ 11 - 0
src/components/project-manage/form/static/iconSvg/fail_img.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 41 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.925548735">
+        <rect class="svg-stroke-grey-400" stroke-width="2" x="4.00368755" y="7" width="32" height="25" rx="2.02985075"></rect>
+        <path d="M4.26491802,26.6431168 L12.1045755,16.9621735 C12.457332,16.5265656 13.0964277,16.4594014 13.5320356,16.812158 C13.5707575,16.8435151 13.6071177,16.8776811 13.6408213,16.914379 L17.8672865,21.5163297 C18.2059311,21.8850599 18.7628649,21.9517713 19.1790152,21.6734529 L21.4437915,20.1587862 C21.8389862,19.8944827 22.3646926,19.939935 22.7086589,20.2681458 L35.0036876,32 L35.0036876,32 L4.26491802,32 L4.26491802,26.6431168 Z"
+              class="svg-fill-grey-400"></path>
+        <circle class="svg-stroke-grey-50 svg-fill-grey-400" stroke-width="2" cx="31.5" cy="28" r="7"></circle>
+        <path d="M32.5,30 L32.5,32 L30.5,32 L30.5,30 L32.5,30 Z M32.5,24 L32.5,29 L30.5,29 L30.5,24 L32.5,24 Z"
+              class="svg-fill-white"></path>
+    </g>
+</svg>

二进制
src/components/project-manage/form/static/iconSvg/favicon.ico


文件差异内容过多而无法显示
+ 7 - 0
src/components/project-manage/form/static/iconSvg/left.svg


文件差异内容过多而无法显示
+ 13 - 0
src/components/project-manage/form/static/iconSvg/original_size.svg


文件差异内容过多而无法显示
+ 7 - 0
src/components/project-manage/form/static/iconSvg/small_image.svg


+ 2 - 1
src/components/project-manage/index.vue

@@ -28,7 +28,7 @@ import Business from "./components/business.vue";
 import { mapState } from "vuex";
 import { mapState } from "vuex";
 import ScanController from "@/controller/old-adm/ScanController";
 import ScanController from "@/controller/old-adm/ScanController";
 import Dic from "@/controller/old-adm/dicController";
 import Dic from "@/controller/old-adm/dicController";
-import Form from "./form/index.vue";
+import Form from "./form/form.vue";
 export const dataTypeEnum = {
 export const dataTypeEnum = {
   INTEGER: "input",
   INTEGER: "input",
   DOUBLE: "input",
   DOUBLE: "input",
@@ -129,6 +129,7 @@ export default {
   watch: {
   watch: {
     projectId() {
     projectId() {
       this.getInfo();
       this.getInfo();
+      this.getDict();
     },
     },
   },
   },
 };
 };