opms_wechat/pages/project/details.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-03-13 14:45:47
 * @Description: file content
 * @FilePath: \oms\pages\project\details.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" @click="goBack()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>项目详情</text>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="main-top">
        <view class="customer-box">
          <view class="header flex1">
            <view class="name flex_l">
              <image class="img" src="../../static/images/menu2.png" mode="scaleToFill" />
              <text>{{ projectData.nboName }}</text>
            </view>
            <view class="date">{{ parseTime(projectData.createdTime, '{y}-{m}-{d}') || '-' }}</view>
          </view>
          <view class="info">
            <view class="info-item">
              <u-row>
                <u-col span="6">
                  <view class="flex_l">
                    <view class="info-label">项目编码：</view>
                    <text class="info-txt">{{ projectData.nboCode }}</text>
                  </view>
                </u-col>
                <u-col span="6">
                  <view class="flex_l">
                    <view class="info-label">客户名称：</view>
                    <text class="info-txt">{{ projectData.custName }}</text>
                  </view>
                </u-col>
              </u-row>
            </view>
            <view class="info-item">
              <u-row justify="space-between">
                <u-col span="6">
                  <view class="flex_l">
                    <view class="info-label">产品线：</view>
                    <text class="info-txt">{{ selectDictLabel(productLineOptions, projectData.productLine) }}</text>
                  </view>
                </u-col>
                <u-col span="6">
                  <view class="flex_l">
                    <view class="info-label">项目预算：</view>
                    <text class="info-txt">{{ formatPrice(projectData.nboBudget) }}</text>
                  </view>
                </u-col>
              </u-row>
            </view>
          </view>
        </view>
        <view class="tabs">
          <u-tabs
            @change="changeTabs"
            :current="curTabIndex"
            :scrollable="false"
            :list="list"
            :activeStyle="{
              color: '#3E7EF8',
              fontWeight: 'bold',
            }"
            :inactiveStyle="{
              color: '#969696',
            }"></u-tabs>
        </view>
      </view>
      <view class="data-list">
        <!-- 跟进记录 -->
        <follow-records v-if="curTabIndex == 0" ref="follow" :projectId="projectId"></follow-records>
        <!-- 详情 -->
        <project-detail v-else-if="curTabIndex == 1" :detail="projectData"></project-detail>
        <!-- 联系人 -->
        <contacts v-else-if="curTabIndex == 2" :projectId="projectId"></contacts>
        <!-- 产品详情 -->
        <form-list
          v-else-if="curTabIndex == 3 && productList.length > 0"
          :data="productList"
          :columns="columns"
          ref="list">
          <template v-slot:header="{ dataItem }">
            <view>{{ dataItem.prodName }}</view>
          </template>
          <template v-slot:content="{ dataItem, propsss }">
            <!-- <view v-if="propsss === 'prodClass' && productList.length > 0">
              <u-input
                disabled
                :value="selectDictLabel(productLineOptions, dataItem['prodClass'], productList)"></u-input>
            </view> -->
            <view v-if="propsss === 'prodPrice'">
              <u-input disabled :value="'￥' + dataItem['prodPrice']"></u-input>
            </view>
          </template>
          <view @click="$refs.list.getData()">获取数据</view>
        </form-list>
      </view>
    </view>
    <!-- 新增按钮 -->
    <view class="fixed-btn-group" :style="{ width: openBtnWidth ? '480rpx' : '90rpx' }">
      <view class="flex1" v-if="openBtnWidth">
        <view
          class="btn center"
          v-if="['20', '30', '50'].includes(projectData.nboType) && projectData.approStatus != '20'"
          @click="linkToLevel(1)">
          升
        </view>
        <view
          class="red btn center"
          v-if="['10', '20'].includes(projectData.nboType) && projectData.approStatus != '20'"
          @click="linkToLevel(0)">
          降
        </view>
        <view
          class="btn center"
          v-if="projectData.nboType != '40' || projectData.nboType != '50' || projectData.approStatus != '20'"
          @click="$refs.reserve.open(projectId)">
          储
        </view>
        <view class="btn center" @click="linkToTransfer()">转</view>
        <!-- <view class="btn center" @click="createProject()">增</view> -->
        <view class="btn center" @click="openFollow()">跟</view>
      </view>
      <view class="btn center" @click="openBtnWidth = !openBtnWidth">
        <u-icon name="plus" color="#fff" size="20"></u-icon>
      </view>
    </view>
    <!-- 转储备 -->
    <transfer-reserve ref="reserve"></transfer-reserve>
  </view>
</template>
<script>
  import projectApi from '../../api/project'
  import to from 'await-to-js'
  import projectDetail from './components/projectDetail'
  import followRecords from './components/followRecords'
  import Contacts from './components/contacts'
  import TransferReserve from './components/transferReserve'
  import FormList from '@/components/FormList/index'
  export default {
    name: 'omsIndex',
    components: { projectDetail, followRecords, Contacts, TransferReserve, FormList },
    data() {
      return {
        columns: [
          {
            prop: 'prodCode',
            label: '产品编码',
            disabled: true,
          },
          {
            prop: 'prodName',
            label: '产品名称',
            disabled: true,
          },
          // {
          //   prop: 'prodClass',
          //   label: '产品类别',
          //   customRender: true,
          // },
          {
            prop: 'prodPrice',
            label: '产品单价',
            customRender: true,
          },
          {
            prop: 'prodNum',
            label: '数量',
            disabled: true,
          },
          {
            prop: 'totalPrice',
            label: '合计',
            disabled: true,
          },
        ],
        productList: [],
        openBtnWidth: false,
        curTabIndex: 0,
        fllowList: [], //跟进数据
        list: [
          {
            name: '跟进记录',
            index: 0,
          },
          {
            name: '详细信息',
            index: 1,
          },
          {
            name: '联系人',
            index: 2,
          },
          {
            name: '产品信息',
            index: 3,
          },
        ],
        height: '',
        paddingTop: '',
        projectData: {}, //项目详情
        projectId: 0, //项目id
        // salesModelOptions: [],
        productLineOptions: [], //产品线
        // sourceOptions: [],
      }
    },
    onLoad(option) {
      this.projectId = parseInt(option.id)
      this.getOptions()
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    onShow() {
      this.openBtnWidth = false
      this.getProjectDetail()
    },
    watch: {
      curTabIndex(idx) {
        if (idx == 3) {
          this.getProductList()
        }
      },
    },
    methods: {
      dictLabel(datas, value) {
        return '32322332'
      },
      getOptions() {
        Promise.all([
          // this.getDicts('proj_sales_model'),
          this.getDicts('sys_product_line'),
          // this.getDicts('proj_nbo_source'),
        ])
          .then(([line]) => {
            // this.salesModelOptions = model.data.values || []
            this.productLineOptions = line.data.values || []
            // this.sourceOptions = source.data.values || []
          })
          .catch((err) => console.log(err))
      },
      async getProductList() {
        const [err, res] = await to(projectApi.getBusinessProduct({ id: this.projectId }))
        if (err) return
        if (res && res.code == 200) {
          this.productList = res.data
        }
      },
      async getProjectDetail() {
        const [err, res] = await to(projectApi.getDetail({ id: this.projectId }))
        if (err) return
        if (res && res.code == 200) {
          this.projectData = res.data
          //跟进记录
          if (this.curTabIndex == 0) {
            this.$refs.follow.getRecords()
          }
        }
      },
      // 改变tab
      changeTabs(data) {
        this.curTabIndex = data.index
      },
      // 打开转移
      openFollow() {
        this.$store.commit('setDetails', this.projectData)
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url: '/pages/publicPages/follow?targetType=20&id=' + this.projectData.id,
        })
      },
      // 跳转到转移客户
      linkToTransfer() {
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url: '/pages/project/transfer?id=' + this.projectId,
        })
      },
      // 升降级
      linkToLevel(type) {
        if (type === 1) {
          uni.navigateTo({
            //保留当前页面，跳转到应用内的某个页面
            url: '/pages/project/upgrade?id=' + this.projectId,
          })
        } else {
          uni.navigateTo({
            //保留当前页面，跳转到应用内的某个页面
            url: '/pages/project/downgrade?id=' + this.projectId,
          })
        }
      },
      // 跳转到新建项目
      createProject() {
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url: '/pages/project/create',
        })
      },
      goBack() {
        uni.navigateBack({
          //关闭当前页面，返回上一页面或多级页面。
          delta: 1,
        })
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 200rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 356rpx;
      background: #3e7ef8;
      border-radius: 0 0 31rpx 31rpx;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }

    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 200rpx);
      overflow: hidden;
      padding-bottom: 64rpx;
      .main-top {
        padding: 0 32rpx;
      }
      .customer-box {
        width: 100%;
        background: #ffffff;
        box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
        border-radius: 32rpx;
        padding: 22rpx 38rpx 68rpx 40rpx;
        .header {
          .name {
            .img {
              width: 46rpx;
              height: 46rpx;
              border-radius: 50%;
              margin-right: 8rpx;
            }
            text {
              font-size: 28rpx;
              font-weight: bold;
              color: #323232;
            }
          }
          .date {
            font-size: 24rpx;
            color: #3e7ef8;
          }
        }
        .info {
          .info-item {
            margin-top: 18rpx;
            .info-label {
              width: 120rpx;
              text-align: left;
              font-size: 24rpx;
              color: #646464;
            }
            .info-txt {
              flex: 1;
              font-size: 24rpx;
              color: #323232;
            }
          }
        }
      }
      .data-list {
        margin-top: 16rpx;
        width: 100%;
        height: calc(100vh - 532rpx);
        background: #ffffff;
        padding: 32rpx;
        overflow: auto;
        padding-bottom: 145rpx;
      }
    }
    .fixed-btn-group {
      position: fixed;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 90rpx;
      height: 90rpx;
      bottom: 50rpx;
      right: 50rpx;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      transition: all 0.2s;
      background: #fff;
      .red {
        background: #ff4d4f !important;
      }
      .btn {
        width: 60rpx;
        height: 60rpx;
        background: #3e7ef8;
        border-radius: 50%;
        margin: 10rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
</style>