wxjt-asset-web/src/views/component/detail.vue

<template>
  <div>
    <el-page-header
      :content="$route.meta.title"
      style="
        padding: 1em;
        font-size: 1em;
        background: #fff;
        margin: 1.67em 0;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border-radius: 5px;
      "
      @back="$router.back()"
    >
    </el-page-header>

    <el-row :gutter="20">
      <el-col :span="14">
        <el-card v-if="detail.id_assets_picture_files_file_id_relation" style="margin-bottom: 20px;">
          <div class="el-descriptions__header el-descriptions__title">图集</div>
          <el-carousel trigger="click" height="150px">
            <el-carousel-item v-for="item in detail.id_assets_picture_files_file_id_relation">
              <el-image
                style="width: 100%; height: 100%;"
                :src="item.url"
                :preview-src-list="picList"
                fit="contain"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <el-card>
          <el-descriptions title="详情" :column="2" :label-style="{'font-weight': '600'}">
            <el-descriptions-item v-for="item in fields" :label="item.name">{{
                contentFormat(item)
              }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="10" >
        <el-card>
          <div class="el-descriptions__header el-descriptions__title">资产历史</div>
          <Timeline>
            <TimelineItem v-for="(item,index) in histories" :key="item.id">
              <p>{{ item.riqi }}</p>
              <div v-html="item.neirong"></div>
              <el-image style="width: 78%;height: 160px;" v-for="img in item.id_his_tupian_files_asset_history_id_relation" :src="img.url" fit="contain"></el-image>
            </TimelineItem>

          </Timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { show, index } from "@/api/system/baseForm";
import { show as formShow } from "@/api/system/customForm";
import { getparameter } from '@/api/system/dictionary'
import { listdept } from '@/api/system/department'
export default {
  data() {
    return {
      histories: [],
      picList: [],
      detail: {},
      fields: [],
      relation: [],
      customForm: {
        customFormId: "",
        tableName: "",
      },


    }
  },
  methods: {
    async getFields () {
      if (this.$route.meta.params?.custom_form) {
        let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
        try {
          let custom_form = JSON.parse(decode);
          this.customForm.customFormId = custom_form.custom_form_id;
          this.customForm.tableName = custom_form.table_name;
        } catch (err) {
          console.warn(err);
        }
      }

      const res = await formShow({ id: this.customForm.customFormId }, false);
      this.fields = res.fields.sort((a,b) => a.sort - b.sort)
      this.relation = res.relation


      //字段处理
      //初始表白名单
      let baseTable = new Map([
        ['departments', async () => {
          const res = await listdept()
          return res
        }],
        ['admins',[]]
      ])
      let { fields, relation } = this
      if (
        !fields ||
        !relation ||
        !fields instanceof Array ||
        !relation instanceof Array
      ) {
        throw new Error("fields或relation格式错误");
      }
      fields.sort((a,b) => a.sort - b.sort).forEach(i => {
        i._relations = relation.find(
          (j) => j.link_table_name.split("_")[1] === i.field
        );
        if (i.select_item && typeof i.select_item === "object") {
          let keys = Object.keys(i.select_item);
          i._params = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(i.select_item[key])
                ? Number(i.select_item[key])
                : i.select_item[key],
            };
          });
        }
        if (i.edit_input === 'file' || i.edit_input === 'files') {
          return
        }
        if (i._relations) {
          if (baseTable.get(i._relations.link_table_name)) {
            baseTable
              .get(i._relations.link_table_name)()
              .then((res) => {
                i._params = res.data;
              });
          } else {
            i._params = i._relations.parameter_id
              ? getparameter({ id: i._relations.parameter_id }, false).then(
                (res) => {
                  i._params = res.detail;
                }
              )
              : this.index({
                table_name: i._relations.link_table_name,
                page: 1,
                page_size: 9999,
              }).then((res) => {
                i._params = res.data;
              });
          }
        }
      });

      const detail = await show({
        id: this.$route.query.id,
        table_name: this.customForm.tableName
      })
      this.detail = detail

      this.picList = detail?.id_assets_picture_files_file_id_relation?.map(i => i.url)
    },

    async getHistory () {
      const res = await index({
        page: 1,
        page_size: 999,
        table_name: "asset_histories",
        filter: [
          {
            key: 'asset_id',
            op: 'eq',
            value: this.detail.id
          }
        ]
      })
      this.histories = res.data
    }
  },
  computed: {
    contentFormat() {
      return function (i) {
        let { _relations } = i;
        if (_relations && _relations.link_table_name) {
          if (_relations.link_relation === "hasOne" || _relations.link_relation === "newHasOne") {
            return (
              this.detail[_relations.link_with_name]?.name ||
              this.detail[_relations.link_with_name]?.no ||
              this.detail[_relations.link_with_name]?.value
            );
          }
          if (_relations.link_relation === "hasMany" || _relations.link_relation === "newHasMany") {
            return this.detail[_relations.link_with_name]
              ?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
              ?.toString();
          }

          return
        }
        if (i._params && i._params.length > 0) {
          return i._params.find(j => j.value == this.detail[i.field])?.key;
        }

        return this.detail[i.field]
      };
    }
  },
  created() {
    this.getFields().then(res => {
      this.getHistory()
    })
  }
}
</script>

<style scoped lang="scss">
</style>