qgb-process 0.2.3 → 0.2.7

package/src/views/formBuilder/formDataDetail.vue

@@ -1,565 +1,565 @@
-<template>
-  <div
-    class="wrapper"
-    v-loading="loading"
-  >
-    <el-row style="display: flex;justify-content: center;">
-      <el-col :span="21">
-        <el-col :span="12">
-          <span class="title">申请单位：</span>
-          {{formData.companyStr}}
-        </el-col>
-        <el-col
-          :span="12"
-          class="item"
-        >
-          <span class="title">申请部门：</span>
-          {{formData.departmentStr}}
-        </el-col>
-        <el-col
-          :span="12"
-          class="item"
-        >
-          <span class="title">申请人：</span>
-          {{formData.staffStr}}
-        </el-col>
-        <!-- <el-col
-          :span="12"
-          class="item"
-        >
-          <span class="title">经办人：</span>
-          {{formData.operator}}
-        </el-col> -->
-        <template v-for="(val, key, i) in formDesc">
-          <el-col
-            :span="24"
-            :key="i"
-            v-if="type.indexOf(val.type) == -1 && val.type !='bank-form-heard'"
-            style="display:flex;"
-          >
-            <span style="width:100px;text-align:right;">{{val.label}}：</span>
-            <template v-if="val.type == 'switch'">
-              <!-- <el-switch disabled :value ="setCellValue(formData[key], i, val)"></el-switch> -->
-              <span>{{formData[key]?'开':'关'}}</span>
-            </template>
-            <template v-else-if="val.type == 'postman'">
-              {{user.realName}}
-            </template>
-             <template v-else-if="val.type == 'formDep'  ">
-              {{setCellValue(formData[key+'Str'], i, val)}}
-            </template>
-             <template v-else-if=" val.type == 'person'  ">
-              {{setCellValue(formData[key+'Str'], i, val)}}
-            </template>
-
-            <template v-else>
-              <div style="flex:1;">{{setCellValue(formData[key], i, val)}}</div>
-            </template>
-          </el-col>
-          <template v-else-if="val.type == 'image-uploader'">
-            <el-col
-              :span="24"
-              :key="i"
-            >
-              <div class="label">{{val.label}}：</div>
-              <div class="img-box">
-                <div
-                  class="img-item"
-                  v-for="(url, index) in getImageList(formData[key])"
-                  :key="index"
-                >
-                  <el-image
-                    style="width: 150px; height: 150px"
-                    :src="url"
-                  ></el-image>
-                </div>
-              </div>
-            </el-col>
-          </template>
-          <template v-else-if="val.type == 'upload-file'">
-            <el-col
-              :span="24"
-              :key="i"
-            >
-              <div class="label" style="width:100px;text-align:right;">{{val.label}}：</div>
-              <div class="file-list">
-                <div
-                  class="img-item"
-                  v-for="(url, index) in getImageList(formData[key])"
-                  :key="index"
-                >
-                  <span>{{url && url.name ? url.name : ''}}</span>
-                  <i @click="downFile(url.url)">下载</i>
-                </div>
-              </div>
-            </el-col>
-          </template>
-          <template v-else-if="val.type == 'quill-editor'">
-            <el-col
-              :span="24"
-              :key="i"
-            >
-              <div class="label">{{val.label}}：</div>
-              <div
-                class="file-list"
-                v-html="formData[key]"
-              ></div>
-            </el-col>
-          </template>
-          <template v-else-if="val.type == 'columns'">
-            <el-col
-              :span="24"
-              :key="i"
-            >
-              <div class="list">
-
-                <el-col
-                  :span="val.rows==2?12:8"
-                  v-for="(columnE, columnI) in val.attrs.columns"
-                  :key="columnI+'columnE'"
-                >
-                  <template v-if="columnE.type == 'postman'">
-                    {{columnE.label}}: {{user.realName}}
-                  </template>
-                  <template v-else-if="columnE.type == 'handleCode'">
-                    {{columnE.label}}: {{formData.formId }}
-                  </template>
-                  <template v-else-if="columnE.type == 'checkbox'">
-                    {{columnE.label}}: {{setCellValue(formData[val.attrs.columns[columnI].field], columnI, columnE)}}
-                  </template>
-                  <template v-else>
-                    {{columnE.label}}: {{formData[columnE.field] }}
-                  </template>
-                </el-col>
-              </div>
-            </el-col>
-          </template>
-          <template v-else-if="val.type == 'custom-table'">
-            <el-col
-              :span="24"
-              :key="i"
-            >
-              <div class="list">
-                <div class="label">{{val.label}}：</div>
-                <table-list
-                  class="table-list"
-                  :tableData="formData[key]"
-                  :formId="formData.formId"
-                  :tableConfig="getTableConfig(val)"
-                  showIndex
-                ></table-list>
-              </div>
-            </el-col>
-          </template>
-          <template v-else-if="val.type == 'purchase'">
-            <el-col
-              :span="24"
-              :key="i"
-            >
-              <div class="list">
-                <div class="label">{{val.label}}：</div>
-                <div class="purchase">
-                  <div
-                    class="flex"
-                    v-for="(purVal,indexVal) in formData[key]"
-                    :key="indexVal"
-                  >
-                    <template v-for="(pur,indexs) in val.attrs.columns">
-                      <div
-                        class="pur-row"
-                        :key="indexs"
-                        v-if="isShowTag(purVal, pur)"
-                      >
-                        <div><span class="row-title">{{pur.content.label}}：</span> {{setPurchaseStr(pur, purVal)}}</div>
-                      </div>
-                    </template>
-                    <template v-for="(pro, proKey, j) in purVal">
-                      <div
-                        class="pur-row"
-                        :key="'pro'+j"
-                        v-if="pro&&pro.property"
-                      ><span class="row-title">{{pro.property}}：</span> {{pro.value}}{{pro.unit ? pro.unit : ''}}</div>
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </el-col>
-          </template>
-          <template v-else-if="val.type == 'groupTitle'">
-            <el-col
-              :span="24"
-              :key="i"
-            >
-              <GroupTitle :title="val.label"></GroupTitle>
-            </el-col>
-          </template>
-          <template v-else-if="val.type == 'groupSummary'">
-            <el-col
-              :span="24"
-              :key="i"
-            >
-              <GroupSummary :title="val.label"></GroupSummary>
-            </el-col>
-          </template>
-        </template>
-      </el-col>
-
-    </el-row>
-    <CommonAduit v-if="!$route.query.approve && !$route.query.type"></CommonAduit>
-  </div>
-</template>
-
-<script>
-import * as api from "@/api/apiFormBuilder/menu";
-import GroupTitle from "@/formBuilder/components/app-main/components/components/GroupTitle.vue";
-import GroupSummary from "@/formBuilder/components/app-main/components/components/GroupSummary.vue";
-import moment from "moment";
-import tableList from "@/formBuilder/components/app-main/components/components/tableList.vue";
-import { queryProcessDataById } from "@/api/apiProcess";
-
-export default {
-  name: "",
-  mixins: [],
-  extends: {},
-  components: {
-    tableList,
-    CommonAduit: () => import("@/components/ComAduitNew"),
-    GroupTitle,
-    GroupSummary
-  },
-  props: {},
-  data() {
-    return {
-      formData: {},
-      id: "",
-      formDesc: {},
-      menuId: "",
-      loading: false,
-      type: [
-        "custom-table",
-        "image-uploader",
-        "upload-file",
-        "quill-editor",
-        "columns",
-        "purchase",
-        "groupTitle",
-        "groupSummary"
-      ]
-    };
-  },
-  watch: {
-    formDesc: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        const _this = this;
-        _this.$delete(_this.formDesc, "business");
-      }
-    },
-    formData: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        const _this = this;
-        _this.$delete(_this.formData, "business");
-      }
-    }
-  },
-  computed: {
-    user() {
-      return this.$store.state.user;
-    }
-  },
-  methods: {
-    // 业务组件显示隐藏
-    isShowTag(val, item) {
-      if (item.content && item.content.vif && Array.isArray(item.content.vif)) {
-        const node = item.isLink ? item.isLink : "leaseType";
-        return item.content.vif.indexOf(val[node]) > -1;
-      } else {
-        return true;
-      }
-    },
-    async getData() {
-      this.loading = true;
-      const res = await queryProcessDataById({ id: this.$route.query.auditId });
-      this.loading = false;
-      if (res.data.state == "ok") {
-        this.formData = Object.assign({}, res.data.data.data);
-      }
-    },
-    // 获取表单配置信息
-    async getFormDes() {
-      const id = this.$route.params.id;
-      if (!id) {
-        return;
-      }
-      this.menuId = id;
-      const { data } = await api.queryFormByMenu({
-        menuId: id,
-        companyNo: this.$route.query.companyId ? this.$route.query.companyId : this.user.cno
-      });
-      if (data.state == "ok" && data.data && data.data.content) {
-        const formDesc = Object.entries(data.data.content.formDesc).map(
-          ([key, val]) => {
-            if (val.type == "image-uploader" || val.type == "quill-editor") {
-              val.attrs.responseFn = function(response, file) {
-                return response.data;
-              };
-            }
-            if (val.type == "upload-file") {
-              val.attrs.responseFn = function(response, file) {
-                return { name: file.name, url: response.data };
-              };
-            }
-          }
-        );
-        this.formDesc = data.data.content.formDesc;
-        this.formData.formId = data.data.id;
-      } else {
-        this.$message.error(data.msg ? data.msg : "获取信息失败");
-      }
-    },
-    // 数据格式化
-    setCellValue(cellValue, index, item) {
-      let str = "";
-      if (!cellValue) {
-        return item.type == "switch" ? "否" : "";
-      }
-      switch (item.type) {
-        case "input":
-          str = cellValue;
-          break;
-        case "time":
-          str = cellValue;
-          break;
-        case "textarea":
-          str = cellValue;
-          break;
-        case "date":
-          str = moment(cellValue * 1000).format("YYYY-MM-DD");
-          break;
-        case "daterange":
-          str = cellValue
-            .map(item => moment(item * 1000).format("YYYY-MM-DD"))
-            .join(" -- ");
-          break;
-        case "datetimerange":
-          str = cellValue
-            .map(item => moment(item * 1000).format("YYYY-MM-DD"))
-            .join(" -- ");
-          break;
-        case "datetime":
-          str = moment(cellValue * 1000).format("YYYY-MM-DD");
-          break;
-        case "timerange":
-          str = cellValue
-            .map(item => moment(item * 1000).format("HH:mm:ss"))
-            .join(" -- ");
-          break;
-        case "select":
-          const arr = item.options.filter
-            ? item.options.filter(item => item.value == cellValue)
-            : [];
-          str = arr.length > 0 ? arr[0].text : "";
-          break;
-        case "switch":
-          str = cellValue;
-          //   str = cellValue == true ? "是" : cellValue == false ? "否" : "";
-          break;
-        case "number":
-          str = cellValue;
-          break;
-        case "radio":
-          const radioName = item.options.filter
-            ? item.options.filter(item => item.value == cellValue)
-            : [];
-          str = radioName.length > 0 ? radioName[0].text : "";
-          break;
-        case "checkbox":
-          const checkbox = item.options.filter
-            ? item.options
-              .filter(item => cellValue.indexOf(item.value) > -1)
-              .map(i => i.text)
-            : [];
-          str = checkbox.length > 0 ? checkbox.join(",") : "";
-          break;
-        case "text":
-          str = cellValue;
-          break;
-        case "formDep" :
-          str = cellValue;
-          break;
-        case "person":
-          str = cellValue;
-          break;
-        case "cascader":
-          if (Array.isArray(item.options)) {
-            const res = this.getCascader(item.options, cellValue);
-            str = res.join ? res.join("/") : "";
-          } else {
-            str = cellValue;
-          }
-          break;
-      }
-      return str;
-    },
-    getTableConfig(val) {
-      const arr = [];
-      val.attrs.columns.forEach((item, index) => {
-        const type = item.content
-          ? item.content.type.replace("ele-form-", "")
-          : "";
-        if (
-          item.prop &&
-          item.content.options &&
-          typeof item.content.options == "string"
-        ) {
-          arr.push({
-            prop: item.content.field + "Str",
-            label: item.content.label,
-            type: type,
-            options: item.content.options
-          });
-        } else if (item.prop) {
-          arr.push({
-            prop: item.content.field,
-            label: item.content.label,
-            type: type,
-            options: item.content.options
-          });
-        }
-      });
-      return arr;
-    },
-    setPurchaseStr(item, purVal) {
-      const type = item.content
-        ? item.content.type.replace("ele-form-", "")
-        : "";
-      let obj;
-      if (
-        item.prop &&
-        item.content.options &&
-        typeof item.content.options == "string"
-      ) {
-        obj = {
-          prop: item.content.field + "Str",
-          label: item.content.label,
-          type: "input",
-          options: item.content.options
-        };
-      } else if (item.prop) {
-        obj = {
-          prop: item.content.field,
-          label: item.content.label,
-          type: type,
-          options: item.content.options
-        };
-      }
-      return this.setCellValue(purVal[obj.prop], "", obj);
-    },
-    getImageList(item) {
-      if (Array.isArray(item)) {
-        return item;
-      } else if (typeof item == "string") {
-        return [item];
-      } else {
-        return [];
-      }
-    },
-    downFile(url) {
-      window.open(url, "_blank");
-    },
-    getCascader(option, val, count, Astr) {
-      const arr = Astr || [];
-      let num = count || 0;
-      const _this = this;
-      if (!option) return arr;
-      for (let i = 0; i < option.length; i++) {
-        if (option[i].value == val[num]) {
-          num++;
-          arr.push(option[i].label);
-          return this.getCascader(option[i].children, val, num, arr);
-        }
-      }
-    }
-  },
-  created() {
-    this.getFormDes();
-    this.getData();
-  },
-  mounted() {}
-};
-</script>
-<style lang="scss" scoped>
-.wrapper {
-  padding: 20px;
-  display: flex;
-}
-.title {
-  display:inline-block;
-  width:100px;
-  text-align: right;
-}
-.text{
-  display:inline-block;
-}
-/deep/ .el-col {
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 400;
-  color: #333333;
-  span {
-    color: #666;
-  }
-}
-.list {
-  margin-top: 20px;
-  .table-list {
-    margin-top: 10px;
-    border-right: 0 !important;
-    border-bottom: 0 !important;
-  }
-}
-.img-box {
-  display: flex;
-  .img-item {
-    margin-right: 20px;
-  }
-}
-.file-list {
-  padding-left: 20px;
-  .img-item {
-    display: flex;
-    line-height: 30px;
-    i {
-      margin-left: 20px;
-      cursor: pointer;
-      font-style: normal;
-      color: #0286df;
-    }
-  }
-}
-.label {
-  color: #666;
-}
-.purchase {
-  border: 1px solid #ebeef5;
-  border-bottom: 0;
-  .flex {
-    padding: 4px;
-    border-bottom: 1px solid #ebeef5;
-  }
-}
-.pur-column {
-  display: flex;
-}
-.pur-row {
-  padding-right: 20px;
-  .row-title {
-    color: #333333;
-    font-weight: bold;
-  }
-}
-/deep/ .file-list p {
-  margin: 0;
-}
-</style>
+<template>
+  <div
+    class="wrapper"
+    v-loading="loading"
+  >
+    <el-row style="display: flex;justify-content: center;">
+      <el-col :span="21">
+        <el-col :span="12">
+          <span class="title">申请单位：</span>
+          {{formData.companyStr}}
+        </el-col>
+        <el-col
+          :span="12"
+          class="item"
+        >
+          <span class="title">申请部门：</span>
+          {{formData.departmentStr}}
+        </el-col>
+        <el-col
+          :span="12"
+          class="item"
+        >
+          <span class="title">申请人：</span>
+          {{formData.staffStr}}
+        </el-col>
+        <!-- <el-col
+          :span="12"
+          class="item"
+        >
+          <span class="title">经办人：</span>
+          {{formData.operator}}
+        </el-col> -->
+        <template v-for="(val, key, i) in formDesc">
+          <el-col
+            :span="24"
+            :key="i"
+            v-if="type.indexOf(val.type) == -1 && val.type !='bank-form-heard'"
+            style="display:flex;"
+          >
+            <span style="width:100px;text-align:right;">{{val.label}}：</span>
+            <template v-if="val.type == 'switch'">
+              <!-- <el-switch disabled :value ="setCellValue(formData[key], i, val)"></el-switch> -->
+              <span>{{formData[key]?'开':'关'}}</span>
+            </template>
+            <template v-else-if="val.type == 'postman'">
+              {{user.realName}}
+            </template>
+             <template v-else-if="val.type == 'formDep'  ">
+              {{setCellValue(formData[key+'Str'], i, val)}}
+            </template>
+             <template v-else-if=" val.type == 'person'  ">
+              {{setCellValue(formData[key+'Str'], i, val)}}
+            </template>
+
+            <template v-else>
+              <div style="flex:1;">{{setCellValue(formData[key], i, val)}}</div>
+            </template>
+          </el-col>
+          <template v-else-if="val.type == 'image-uploader'">
+            <el-col
+              :span="24"
+              :key="i"
+            >
+              <div class="label">{{val.label}}：</div>
+              <div class="img-box">
+                <div
+                  class="img-item"
+                  v-for="(url, index) in getImageList(formData[key])"
+                  :key="index"
+                >
+                  <el-image
+                    style="width: 150px; height: 150px"
+                    :src="url"
+                  ></el-image>
+                </div>
+              </div>
+            </el-col>
+          </template>
+          <template v-else-if="val.type == 'upload-file'">
+            <el-col
+              :span="24"
+              :key="i"
+            >
+              <div class="label" style="width:100px;text-align:right;">{{val.label}}：</div>
+              <div class="file-list">
+                <div
+                  class="img-item"
+                  v-for="(url, index) in getImageList(formData[key])"
+                  :key="index"
+                >
+                  <span>{{url && url.name ? url.name : ''}}</span>
+                  <i @click="downFile(url.url)">下载</i>
+                </div>
+              </div>
+            </el-col>
+          </template>
+          <template v-else-if="val.type == 'quill-editor'">
+            <el-col
+              :span="24"
+              :key="i"
+            >
+              <div class="label">{{val.label}}：</div>
+              <div
+                class="file-list"
+                v-html="formData[key]"
+              ></div>
+            </el-col>
+          </template>
+          <template v-else-if="val.type == 'columns'">
+            <el-col
+              :span="24"
+              :key="i"
+            >
+              <div class="list">
+
+                <el-col
+                  :span="val.rows==2?12:8"
+                  v-for="(columnE, columnI) in val.attrs.columns"
+                  :key="columnI+'columnE'"
+                >
+                  <template v-if="columnE.type == 'postman'">
+                    {{columnE.label}}: {{user.realName}}
+                  </template>
+                  <template v-else-if="columnE.type == 'handleCode'">
+                    {{columnE.label}}: {{formData.formId }}
+                  </template>
+                  <template v-else-if="columnE.type == 'checkbox'">
+                    {{columnE.label}}: {{setCellValue(formData[val.attrs.columns[columnI].field], columnI, columnE)}}
+                  </template>
+                  <template v-else>
+                    {{columnE.label}}: {{formData[columnE.field] }}
+                  </template>
+                </el-col>
+              </div>
+            </el-col>
+          </template>
+          <template v-else-if="val.type == 'custom-table'">
+            <el-col
+              :span="24"
+              :key="i"
+            >
+              <div class="list">
+                <div class="label">{{val.label}}：</div>
+                <table-list
+                  class="table-list"
+                  :tableData="formData[key]"
+                  :formId="formData.formId"
+                  :tableConfig="getTableConfig(val)"
+                  showIndex
+                ></table-list>
+              </div>
+            </el-col>
+          </template>
+          <template v-else-if="val.type == 'purchase'">
+            <el-col
+              :span="24"
+              :key="i"
+            >
+              <div class="list">
+                <div class="label">{{val.label}}：</div>
+                <div class="purchase">
+                  <div
+                    class="flex"
+                    v-for="(purVal,indexVal) in formData[key]"
+                    :key="indexVal"
+                  >
+                    <template v-for="(pur,indexs) in val.attrs.columns">
+                      <div
+                        class="pur-row"
+                        :key="indexs"
+                        v-if="isShowTag(purVal, pur)"
+                      >
+                        <div><span class="row-title">{{pur.content.label}}：</span> {{setPurchaseStr(pur, purVal)}}</div>
+                      </div>
+                    </template>
+                    <template v-for="(pro, proKey, j) in purVal">
+                      <div
+                        class="pur-row"
+                        :key="'pro'+j"
+                        v-if="pro&&pro.property"
+                      ><span class="row-title">{{pro.property}}：</span> {{pro.value}}{{pro.unit ? pro.unit : ''}}</div>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </template>
+          <template v-else-if="val.type == 'groupTitle'">
+            <el-col
+              :span="24"
+              :key="i"
+            >
+              <GroupTitle :title="val.label"></GroupTitle>
+            </el-col>
+          </template>
+          <template v-else-if="val.type == 'groupSummary'">
+            <el-col
+              :span="24"
+              :key="i"
+            >
+              <GroupSummary :title="val.label"></GroupSummary>
+            </el-col>
+          </template>
+        </template>
+      </el-col>
+
+    </el-row>
+    <CommonAduit v-if="!$route.query.approve && !$route.query.type"></CommonAduit>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/apiFormBuilder/menu";
+import GroupTitle from "@/formBuilder/components/app-main/components/components/GroupTitle.vue";
+import GroupSummary from "@/formBuilder/components/app-main/components/components/GroupSummary.vue";
+import moment from "moment";
+import tableList from "@/formBuilder/components/app-main/components/components/tableList.vue";
+import { queryProcessDataById } from "@/api/apiProcess";
+
+export default {
+  name: "",
+  mixins: [],
+  extends: {},
+  components: {
+    tableList,
+    CommonAduit: () => import("@/components/ComAduitNew"),
+    GroupTitle,
+    GroupSummary
+  },
+  props: {},
+  data() {
+    return {
+      formData: {},
+      id: "",
+      formDesc: {},
+      menuId: "",
+      loading: false,
+      type: [
+        "custom-table",
+        "image-uploader",
+        "upload-file",
+        "quill-editor",
+        "columns",
+        "purchase",
+        "groupTitle",
+        "groupSummary"
+      ]
+    };
+  },
+  watch: {
+    formDesc: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        const _this = this;
+        _this.$delete(_this.formDesc, "business");
+      }
+    },
+    formData: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        const _this = this;
+        _this.$delete(_this.formData, "business");
+      }
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    }
+  },
+  methods: {
+    // 业务组件显示隐藏
+    isShowTag(val, item) {
+      if (item.content && item.content.vif && Array.isArray(item.content.vif)) {
+        const node = item.isLink ? item.isLink : "leaseType";
+        return item.content.vif.indexOf(val[node]) > -1;
+      } else {
+        return true;
+      }
+    },
+    async getData() {
+      this.loading = true;
+      const res = await queryProcessDataById({ id: this.$route.query.auditId });
+      this.loading = false;
+      if (res.data.state == "ok") {
+        this.formData = Object.assign({}, res.data.data.data);
+      }
+    },
+    // 获取表单配置信息
+    async getFormDes() {
+      const id = this.$route.params.id;
+      if (!id) {
+        return;
+      }
+      this.menuId = id;
+      const { data } = await api.queryFormByMenu({
+        menuId: id,
+        companyNo: this.$route.query.companyId ? this.$route.query.companyId : this.user.cno
+      });
+      if (data.state == "ok" && data.data && data.data.content) {
+        const formDesc = Object.entries(data.data.content.formDesc).map(
+          ([key, val]) => {
+            if (val.type == "image-uploader" || val.type == "quill-editor") {
+              val.attrs.responseFn = function(response, file) {
+                return response.data;
+              };
+            }
+            if (val.type == "upload-file") {
+              val.attrs.responseFn = function(response, file) {
+                return { name: file.name, url: response.data };
+              };
+            }
+          }
+        );
+        this.formDesc = data.data.content.formDesc;
+        this.formData.formId = data.data.id;
+      } else {
+        this.$message.error(data.msg ? data.msg : "获取信息失败");
+      }
+    },
+    // 数据格式化
+    setCellValue(cellValue, index, item) {
+      let str = "";
+      if (!cellValue) {
+        return item.type == "switch" ? "否" : "";
+      }
+      switch (item.type) {
+        case "input":
+          str = cellValue;
+          break;
+        case "time":
+          str = cellValue;
+          break;
+        case "textarea":
+          str = cellValue;
+          break;
+        case "date":
+          str = moment(cellValue * 1000).format("YYYY-MM-DD");
+          break;
+        case "daterange":
+          str = cellValue
+            .map(item => moment(item * 1000).format("YYYY-MM-DD"))
+            .join(" -- ");
+          break;
+        case "datetimerange":
+          str = cellValue
+            .map(item => moment(item * 1000).format("YYYY-MM-DD"))
+            .join(" -- ");
+          break;
+        case "datetime":
+          str = moment(cellValue * 1000).format("YYYY-MM-DD");
+          break;
+        case "timerange":
+          str = cellValue
+            .map(item => moment(item * 1000).format("HH:mm:ss"))
+            .join(" -- ");
+          break;
+        case "select":
+          const arr = item.options.filter
+            ? item.options.filter(item => item.value == cellValue)
+            : [];
+          str = arr.length > 0 ? arr[0].text : "";
+          break;
+        case "switch":
+          str = cellValue;
+          //   str = cellValue == true ? "是" : cellValue == false ? "否" : "";
+          break;
+        case "number":
+          str = cellValue;
+          break;
+        case "radio":
+          const radioName = item.options.filter
+            ? item.options.filter(item => item.value == cellValue)
+            : [];
+          str = radioName.length > 0 ? radioName[0].text : "";
+          break;
+        case "checkbox":
+          const checkbox = item.options.filter
+            ? item.options
+              .filter(item => cellValue.indexOf(item.value) > -1)
+              .map(i => i.text)
+            : [];
+          str = checkbox.length > 0 ? checkbox.join(",") : "";
+          break;
+        case "text":
+          str = cellValue;
+          break;
+        case "formDep" :
+          str = cellValue;
+          break;
+        case "person":
+          str = cellValue;
+          break;
+        case "cascader":
+          if (Array.isArray(item.options)) {
+            const res = this.getCascader(item.options, cellValue);
+            str = res.join ? res.join("/") : "";
+          } else {
+            str = cellValue;
+          }
+          break;
+      }
+      return str;
+    },
+    getTableConfig(val) {
+      const arr = [];
+      val.attrs.columns.forEach((item, index) => {
+        const type = item.content
+          ? item.content.type.replace("ele-form-", "")
+          : "";
+        if (
+          item.prop &&
+          item.content.options &&
+          typeof item.content.options == "string"
+        ) {
+          arr.push({
+            prop: item.content.field + "Str",
+            label: item.content.label,
+            type: type,
+            options: item.content.options
+          });
+        } else if (item.prop) {
+          arr.push({
+            prop: item.content.field,
+            label: item.content.label,
+            type: type,
+            options: item.content.options
+          });
+        }
+      });
+      return arr;
+    },
+    setPurchaseStr(item, purVal) {
+      const type = item.content
+        ? item.content.type.replace("ele-form-", "")
+        : "";
+      let obj;
+      if (
+        item.prop &&
+        item.content.options &&
+        typeof item.content.options == "string"
+      ) {
+        obj = {
+          prop: item.content.field + "Str",
+          label: item.content.label,
+          type: "input",
+          options: item.content.options
+        };
+      } else if (item.prop) {
+        obj = {
+          prop: item.content.field,
+          label: item.content.label,
+          type: type,
+          options: item.content.options
+        };
+      }
+      return this.setCellValue(purVal[obj.prop], "", obj);
+    },
+    getImageList(item) {
+      if (Array.isArray(item)) {
+        return item;
+      } else if (typeof item == "string") {
+        return [item];
+      } else {
+        return [];
+      }
+    },
+    downFile(url) {
+      window.open(url, "_blank");
+    },
+    getCascader(option, val, count, Astr) {
+      const arr = Astr || [];
+      let num = count || 0;
+      const _this = this;
+      if (!option) return arr;
+      for (let i = 0; i < option.length; i++) {
+        if (option[i].value == val[num]) {
+          num++;
+          arr.push(option[i].label);
+          return this.getCascader(option[i].children, val, num, arr);
+        }
+      }
+    }
+  },
+  created() {
+    this.getFormDes();
+    this.getData();
+  },
+  mounted() {}
+};
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  padding: 20px;
+  display: flex;
+}
+.title {
+  display:inline-block;
+  width:100px;
+  text-align: right;
+}
+.text{
+  display:inline-block;
+}
+/deep/ .el-col {
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #333333;
+  span {
+    color: #666;
+  }
+}
+.list {
+  margin-top: 20px;
+  .table-list {
+    margin-top: 10px;
+    border-right: 0 !important;
+    border-bottom: 0 !important;
+  }
+}
+.img-box {
+  display: flex;
+  .img-item {
+    margin-right: 20px;
+  }
+}
+.file-list {
+  padding-left: 20px;
+  .img-item {
+    display: flex;
+    line-height: 30px;
+    i {
+      margin-left: 20px;
+      cursor: pointer;
+      font-style: normal;
+      color: #0286df;
+    }
+  }
+}
+.label {
+  color: #666;
+}
+.purchase {
+  border: 1px solid #ebeef5;
+  border-bottom: 0;
+  .flex {
+    padding: 4px;
+    border-bottom: 1px solid #ebeef5;
+  }
+}
+.pur-column {
+  display: flex;
+}
+.pur-row {
+  padding-right: 20px;
+  .row-title {
+    color: #333333;
+    font-weight: bold;
+  }
+}
+/deep/ .file-list p {
+  margin: 0;
+}
+</style>