qgb-process 0.1.52 → 0.1.53

package/src/views/formBuilder/formDataDetail.vue

@@ -1,565 +0,0 @@
-<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>