xnzt/xnzt-h5/pages/index/wantBuySell/purchaseDetail/index.vue

<template>
  <!-- <div class="purchaseDetail">purchaseDetail</div> -->
  <view class="purchaseDetail">
    <template v-for="(item, index) of fields">
      <uni-section
        type="square"
        :title="item.label"
        sub-title=""
        :key="index"
        v-if="!(item.show === false)"
      >
        <template v-slot:right>
          <view v-if="!(item.isNeedLabel === true)">
            <text>{{ pur[item.name] }}</text>
          </view>
          <view v-else-if="!(item.havType === true)">
            <text>{{ getLabel(item, pur[item.name]) }}</text>
          </view>
          <view v-else>
            <text>{{ returnDict("sys_unit", pur[item.name]) }}</text>
          </view>
        </template>
      </uni-section>
    </template></view
  >
</template>

<script>
import {
  getPurchaseDemandRelease,
  listGoodsCategory,
} from "@/api/lef/demandPublish";

export default {
  components: {},
  data() {
    return {
      pur: {},
      fields: [
        {
          label: "经营主体名称",
          name: "baseName",
        },
        {
          label: "联系人",
          name: "contact",
        },
        {
          label: "联系人电话",
          name: "contactPhone",
        },
        {
          label: "采购商品名称",
          name: "goodsName",
        },
        {
          label: "采购商品数量",
          name: "quantity",
        },
        {
          label: "商品类型",
          name: "goodsType",
          isNeedLabel: true,
          labelFields: "goodsCategorys",
          havType: false,
        },
        {
          label: "单位",
          name: "measureUnit",
          isNeedLabel: true,
          labelFields: "dicts",
          havType: true,
          type: "sys_unit",
          show: true,
        },
        {
          label: "备注",
          name: "remark",
          show: true,
        },
      ],
      dicts: {},
      goodsCategorys: [],
      needLabel: [
        { name: "measureUnit", thisFields: "dicts" },
        { name: "goodsType", thisFields: "goodsCategorys" },
      ],
      options: {},
    };
  },
  computed: {},
  methods: {
    IsNeedLabel(name) {
      const _this = this;
      for (let i of _this.needLabel) {
        if (i.name === name) {
          return false;
        }
      }
      return true;
    },
    getLabel(item, val) {
      const _this = this;
      for (let NLFieItem of _this[item.labelFields]) {
        if (NLFieItem.id === val) {
          return NLFieItem.name;
        }
      }
    },
    getPurById(id) {
      this.loading = true;
      listGoodsCategory().then((response) => {
        this.goodsCategorys = response.data;
      });
      getPurchaseDemandRelease(id).then((response) => {
        this.pur = response.data;
        this.loading = false;
      });
    },
    // 数据字典政策类型列表
    getDictList() {
      // 此函数已预留自动查询开放字典接口列表功能的空间
      const a = "sys_unit";
      this.getDicts(a).then((response) => {
        this.$set(this.dicts, [a], response.data);
      });
    },
    returnDict(dictType, e) {
      const dictList = this.dicts;
      if (dictList[dictType] !== undefined && dictList[dictType].length !== 0) {
        for (let dict of dictList[dictType]) {
          if (dict.dictValue === e) {
            return dict.dictLabel;
          }
        }
      }
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.getDictList();
    this.options = options;
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {
    this.getPurById(this.options.id);
  },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {
    const that = this
    return that.$listenOB.goBack()
  },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
/deep/.uni-section {
  .uni-section-header__content {
    white-space: nowrap;
    margin-right: 20px;
  }
}
</style>