nxdt-uniapp/pages/projectInfo/index.vue

<template>
  <view>
    <Navbar title="工程信息" />
    <div class="content">
      <u-input
        v-model="searchValue"
        placeholder="请输入搜索内容"
        suffixIcon="search"
        suffixIconStyle="color: #909399"
        shape="circle"
        @blur="handleSearch"
        style="margin-bottom: 20px"
      />
      <!-- 数据列表 -->
      <u-list :height="projectList.length > 0 ? '' : '10'">
        <u-list-item v-for="(item, index) in projectList" :key="index">
          <div class="item-wrapper">
            <div class="list-item">
              <div class="item-title">工程名称:</div>
              <div class="item-content">{{ item.proName }}</div>
            </div>
            <div class="list-item">
              <span class="item-title">工程类型:</span>
              <span class="item-content">{{ item.proType }}</span>
            </div>
            <div class="list-item">
              <span class="item-title">工程状态:</span>
              <span class="item-content">{{ item.proStatus }}</span>
            </div>
            <u-line dashed color="#E3E9FA"></u-line>
            <div class="bts">
              <div class="btn-item">
                <u-button v-if="item.proStatus == '规划中'" type="primary" plain size="mini" @click="handleEdit(item)">
                  编辑
                </u-button>
              </div>
              <div class="btn-item">
                <u-button
                  v-if="item.proStatus == '规划中'"
                  type="warning"
                  plain
                  size="mini"
                  @click="handleArrange(item)"
                >
                  筹备
                </u-button>
              </div>
              <div class="btn-item" v-if="item.proStatus != '规划中'">
                <u-button type="primary" plain size="mini" @click="handleCheck(item)">查看</u-button>
              </div>
            </div>
          </div>
        </u-list-item>
      </u-list>
      <u-divider v-if="projectList.length == 0" text="暂无数据"></u-divider>

      <!-- 弹框 -->
      <u-modal
        :show="showModal"
        :title="modalTitle"
        :content="modalContent"
        showCancelButton
        @cancel="showModal = false"
        @confirm="handleArrangeModal"
      ></u-modal>
    </div>
  </view>
</template>

<script>
import { getProList, AppPreparation } from '@/api/project'

export default {
  data() {
    return {
      isLoading: false,
      searchValue: '', // 搜索内容
      // 项目列表
      projectList: [],
      showModal: false,
      modalTitle: '确定开始筹备工程么？',
      modalContent: '确定筹备后，工程不可删除，\n系统开始通知相关部门上传工程文件',
      modalData: {},
      isEdit: true
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      this.projectList = []
      console.log('获取列表')
      let params = {
        proName: this.searchValue
      }
      if (!this.searchValue) {
        params = undefined
      }
      getProList(params).then(res => {
        console.log('获取列表 ->', res)
        this.projectList = res.rows
        console.log('🚀 ~ getProList ~ this.projectList:', this.projectList)
      })
    },
    handleSearch() {
      console.log('搜索 ->', this.searchValue)
      this.getList()
    },
    // 编辑
    handleEdit(item) {
      console.log('🚀 编辑 ->', item)
      const params = {
        isEdit: true,
        proId: item.proId
      }
      // 跳转到编辑页面
      uni.navigateTo({
        url: `/pages/newProject/index?params=${JSON.stringify(params)}`
      })
    },
    // 筹备
    handleArrange(item) {
      console.log('🚀 筹备', item)
      this.showModal = true
      this.modalData = item
    },
    // 弹框确认
    handleArrangeModal() {
      if (this.isLoading) return
      this.isLoading = true
      uni.showLoading({
        title: '加载中'
      })
      console.log('🚀 确认筹备', this.modalData)
      AppPreparation(this.modalData.proId).then(res => {
        console.log('🚀 筹备 ->', res)
        uni.showToast({
          title: '操作成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.hideLoading()
          this.isLoading = false
          this.showModal = false
          this.getList()
        }, 100)
      }).catch(err => {
        console.log('🚀 筹备 ->', err)
        uni.hideLoading()
        this.showModal = false
        this.getList()
      })
    },
    // 查看
    handleCheck(item) {
      console.log('🚀 查看', item)
      const params = {
        proId: item.proId
      }
      uni.navigateTo({
        url: `/pages/projectInfo/projectDetails?params=${JSON.stringify(params)}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;

  .item-wrapper {
    margin-bottom: 18px;
    width: 98.5%;
    // height: 118px;
    box-shadow: 0px 2px 4px 0px rgba(56, 136, 255, 0.1);
    border-radius: 3px 3px 3px 3px;

    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .item-title {
      width: 55px;
      display: inline-block;
      margin-bottom: 8px;
      height: 17px;
      font-weight: 400;
      font-size: 12px;
      color: rgba(10, 38, 64, 0.5);
    }

    .item-content {
      width: calc(100% - 55px);
      margin-left: 5px;
      font-weight: 400;
      font-size: 12px;
      color: #0a2640;
      word-break: break-all;
    }

    .bts {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin: 10px;
      .btn-item {
        margin-left: 10px;
        width: 50px;
      }
    }
  }

  /deep/ .u-modal__content__text {
    text-align: center;
    font-weight: 400;
    font-size: 13px;
    color: rgba(43, 43, 43, 0.6);
  }
}
</style>