item-management-web/src/views/personal/myOrder.vue

<template>
  <div class="app-container">
    <div class="title-container">
      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>
    <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getPage">
      <template slot="left">
        <PermissionButton menu-code="_views_personal_order" class-name="filter-item" type="danger" icon="el-icon-circle-plus-outline"
          :page-jump="true" round style="float: left" :page-query="{'couldEdit':true,'saveOrderBtn':'保存订单','showBtn':true ,'couldBack':true}" />
        <el-input style="margin-left: 20px;width: 100px;float: left;" class="filter-item" 
            v-model="listQuery.keyword" placeholder="关键字搜索..." clearable>
        </el-input>
        <el-input v-model="listQuery.name" placeholder="相关人员" clearable
          style="margin-left: 20px;width: 270px;float: left;">
        </el-input>
        <el-select v-model="listQuery.state" placeholder="请选择" clearable filterable
          style="margin-left: 20px;width: 100px;float: left;" class="filter-item">
          <el-option label="线上" value="online" />
          <el-option label="线下" value="outline" />
        </el-select>
        <el-select v-model="listQuery.state" placeholder="请选择" clearable filterable
          style="margin-left: 20px;width: 100px;float: left;" class="filter-item">
          <el-option label="意见书" value="statement" />
          <el-option label="报告" value="report" />
        </el-select>
        <el-button class="filter-item" style="margin-left: 10px;float: left;" type="primary" @click="searchList" round>搜索
        </el-button>
        <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置
        </el-button>
      </template>
      <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;" >
        <el-table-column label="坐落" align="center" width="200">
          <template slot-scope="{row}">
            <span>{{ row.location }}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目编号" align="center" width="140" >
          <template slot-scope="{row}">
            <span>{{ row.orderId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="面积" align="center" width="130" prop="reportNo">
          <template slot-scope="{row}">
            <span>{{ row.acreage }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" width="130">
          <template slot-scope="{row}">
            <span>{{ row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总价" align="center" width="130">
          <template slot-scope="{row}">
            <span>{{ row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" align="center" width="130">
          <template slot-scope="{row}">
            <span>{{ row.clientName==null?'-': row.clientName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务来源" align="center" width="130">
          <template slot-scope="{row}">
            <span>{{ row.clientSubName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="中介" align="center" width="130">
          <template slot-scope="{row}">
            <span>{{ row.agent==null?'-': row.agent }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center" width="130">
          <template slot-scope="{row}">
            <span>{{ row.contactName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人电话" align="center" width="130">
          <template slot-scope="{row}">
            <span>{{ row.contactTel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="委托人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.bailorA}} {{ row.bailorB}}</span>
          </template>
        </el-table-column>
        <el-table-column label="实收款(元)" align="center" width='120'>
          <template slot-scope="{row}">
            <span style="color:red;font-weight:bold">{{ row.realAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应收款(元)" align="center" width='120'>
          <template slot-scope="{row}">
            <span>{{ row.shouldAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" align="center" width="100" prop="created" sortable>
          <template slot-scope="{row}">
            {{ row.created }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130" align="center">
          <template slot-scope="{row}">
            <el-button round type="text" size="small" @click="orderDetail(row)">详情</el-button>
            <el-button type="text" size="small" @click="productionList(row)">产品包</el-button>
          </template>
        </el-table-column>
      </parentTable>
    </y-page-list-layout>
    <el-dialog :visible.sync="productionListDialog" width="60%" center  custom-class="doWarehouseClass">
      <el-collapse v-model="activeName" accordion v-if="bag.productions.length>0">
        <el-collapse-item v-for="(r,index) in bag.productions" :name="index">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span style="font-weight:bold;margin-left:10px;margin-right:10px">{{ aliasProductionType(r.production) }}</span>
            {{r.productionNo}}
          </template>
          <el-card style="margin-top:20px" shadow="hover">
            <div slot="header" class="clearfix">
              <!-- <span style="font-size:16px;font-weight:bold;">{{aliasProductionType(r.production)}}</span> -->
              <el-button v-if="(r.production!='STATEMENT' && r.repertoryState !=null && !r.repertoryState)" 
                style="float: right; padding: 3px 0;margin-left:10px" type="text" @click="openApplyOutWarehouseList(bag)">出库申请</el-button>
            </div>
            <el-form :model="r">
              <el-row>
                <el-col :xs="24" :sm="12" :lg="24" :span="12">
                  <el-form-item label="项目名称：" prop="name"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.name" type="text" class="filter-item" disabled readonly/>
                  </el-form-item >
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="出具报告日期：" prop="createDate"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.createDate" type="text" class="filter-item" disabled readonly />
                  </el-form-item >
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="实勘日期：" prop="sceneDate"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.sceneDate" type="text" class="filter-item" disabled readonly />
                  </el-form-item >
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="报告使用期限：" prop="repertoryOutTime"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.limitDate" type="text" class="filter-item" disabled readonly />
                  </el-form-item >
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="评估总价：" prop="evaluateAmount"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.evaluateAmount/10000" type="text" class="filter-item" disabled readonly>
                      <template slot="append">万元</template>
                    </el-input>
                  </el-form-item >
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="评估面积：" prop="evaluateAcreage"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.evaluateAcreage" type="text" class="filter-item" disabled readonly>
                      <template slot="append">平方</template>
                    </el-input>
                  </el-form-item >
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="评估单价：" prop="evaluatePrice"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.evaluatePrice/10000" type="text" class="filter-item" disabled readonly>
                      <template slot="append">万元</template>
                    </el-input>
                  </el-form-item >
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="库存状态：" prop="repertoryState"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.repertoryState==null?'未入库':(r.repertoryState?'已出库':'已入库')" type="text" class="filter-item" disabled readonly />
                  </el-form-item >
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="入库时间：" prop="repertoryInTime"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.repertoryInTime" type="text" class="filter-item" disabled readonly />
                  </el-form-item >
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="出库时间：" prop="repertoryOutTime"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.repertoryOutTime" type="text" class="filter-item" disabled readonly />
                  </el-form-item >
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="归档状态：" prop="ifSaveFile"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.ifSaveFile?'已归档':'未归档'" type="text" class="filter-item" disabled readonly />
                  </el-form-item >
                </el-col>
                <el-col :xs="24" :sm="12" :lg="8" :span="12">
                  <el-form-item label="归档时间：" prop="saveFileDate"  label-width="140px" class="postInfo-container-item">
                    <el-input :value="r.saveFileDate" type="text" class="filter-item" disabled readonly />
                  </el-form-item >
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-collapse-item>
      </el-collapse>
      <el-empty v-else description="暂无产品"></el-empty>
    </el-dialog>
    <el-dialog :visible.sync="outWarehouseListDialog" width="70%" center  custom-class="doWarehouseClass" >
      <el-button type="danger" round @click="outWarehouseDialog = true">新增出库申请</el-button>
      <div style="margin-top:30px;">
        <el-table
          :data="outApllyList"
          stripe
          style="width: 100%">
          <el-table-column
          align = "center"
            prop="realAmount"
            label="申请时实收款金额(元)"
            width="180">
            <template slot-scope="{row}">
              <span>{{ row.realAmount==null?'-': row.realAmount}}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="applyName"
            label="申请人">
            <template slot-scope="{row}">
              <span>{{ row.applyName }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="remark"
            label="申请原因" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.remark==null?'-':row.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="created"
            label="申请日期" width="150">
            <template slot-scope="{row}">
              <span>{{ row.created }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="departmentCheckState"
            label="部门审核状态">
            <template slot-scope="{row}">
              <span>{{ row.departmentCheckState==null?'-':row.departmentCheckState }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="departmentChecker"
            label="部门审核人">
            <template slot-scope="{row}">
              <span>{{ row.departmentChecker==null?'-':row.departmentChecker }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="departmentCheckTime"
            label="部门审核时间" width="150">
            <template slot-scope="{row}">
              <span>{{ row.departmentCheckTime==null?'-': row.departmentCheckTime}}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="departmentReply"
            label="部门审核回复" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.departmentReply==null?'-':row.departmentReply }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
          align = "center"
            prop="financeCheckState"
            label="财务审核状态">
            <template slot-scope="{row}">
              <span>{{ row.financeCheckState==null?'-':row.financeCheckState }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="financeChecker"
            label="财务审核人">
            <template slot-scope="{row}">
              <span>{{ row.financeChecker==null?'-':row.financeChecker }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="financeCheckTime"
            label="财务审核时间" width="150">
            <template slot-scope="{row}">
              <span>{{ row.financeCheckTime==null?'-':row.financeCheckTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
          align = "center"
            prop="financeReply"
            label="财务审核回复" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.financeReply==null?'-':row.financeReply }}</span>
            </template>
          </el-table-column> -->
          <!-- <el-table-column fixed="right" label="操作" width="100" align = "center">
          <template slot-scope="{row}">
            <el-button @click="outApplyCancel(row.id,row.productionId,row.financeCheckState)" type="text" size="small">撤销</el-button>
          </template>
        </el-table-column> -->
        </el-table>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="outWarehouseDialog" width="35%" center top="35vh" custom-class="doWarehouseClass" >
      <el-form ref="outWarehouse" :model="outWarehouse" style="margin-left:40px" :rules="rules">
          <el-row>
            <el-col :xs="24" :sm="12" :lg="24" :span="12">
              <el-form-item label="应收款金额：" prop="shouldAmount"  label-width="160px" class="postInfo-container-item">
                    <el-input style="width:300px" v-model="outWarehouse.shouldAmount" type="text" class="filter-item" />
                  </el-form-item >
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="12" :lg="24" :span="12">
                <el-form-item label="出库原因：" prop="remark"  label-width="160px" class="postInfo-container-item">
                    <el-input style="width:300px" type="textarea" v-model="outWarehouse.remark"></el-input>
                </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outWarehouseDialog = false">取 消</el-button>
        <el-button type="primary" @click="doApplyOut()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout'
import Breadcrumb from '@/components/Breadcrumb'
import PermissionButton from '@/components/PermissionButton/PermissionButton'
import YDetailPageLayout from '@/components/YDetailPageLayout/index_detail'
import {isNumber} from '@/utils/validate'

export default {
  name: 'PersonalMyOrder',
  components: {
    Breadcrumb,
    YPageListLayout,
    PermissionButton,
  },

  data() {
    return {
      rules:{
            shouldAmount:[{required:true,message:"应收款金额必填",trigger:'blur'},{validator:isNumber,trigger:'blur'}],
          },
      pageData: { records: [] },
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        current: 1,
        descs: null,
        ascs:null,
        keyword:null,
        startDate:null,
        endDate:null
      },
      productionListDialog:false,
      bag:{
        businessId:null,
        businessType:null,
        reportNo:null,
        productions:[]
      },
      activeName: '0',
      outWarehouseListDialog:false,
      outWarehouseDialog:false,
      outWarehouse:{
        id:null,
        orderFundId:null,
        remark:null,
        realAmount:null
      },
      outApllyList:[]
    }
  },
  created() {
    this.getPage();
  },
  methods: {
    getPage() {
      this.$api.personal.list(this.listQuery).then(res=>{
        if (res.code ===200){
            this.pageData = res.data;
        }
      })
    },

    fliterSearch(params){
      this.$api.personal.list(params).then(res=>{
        if (res.code ===200){
            this.pageData = res.data;
        }
      })
    },

    searchList() {
      // 重置分页
      this.listQuery.page = 1
      this.listQuery.size = 10
      this.getList()
    },

    resetParams(){
      this.$router.push({ query: {} });
      this.listQuery = {
          current: 1,
          size: 10,
          descs: 'created',
      }
      this.getPage();
    },

    orderDetail(row){
      this.$router.push(`/personal/order?id=${row.id}&couldEdit=${false}&recall=${true}$couldBack=${true}&back=${'/personal/my/order'}`)
    },
    productionList(row){
      this.productionListDialog = true;
      this.outWarehouse.orderFundId = row.orderFundId;
      this.outWarehouse.realAmount = row.realAmount;
      if (row.id){
          this.$api.businessProduction.personalBag(row.id).then(res=>{
            if (res.code === 200 && res.data!=null){
                let prods = res.data.productions
                if (prods){
                  let prodType = prods.map(item=>item.production)
                  if (prodType.includes("TECHNIC") && prodType.includes("FINAL")){
                    prods = prods.filter(item=>item.production!='TECHNIC')
                    for (let i in prods){
                       if (prods[i].production==='FINAL'){
                        prods[i].production = 'TECHNIC+FINAL'
                       }
                    }
                    this.bag = res.data;
                    this.bag.productions = prods;
                  }
                }
                this.bag = res.data;

            }
          })
      }
    },
    aliasProductionType(code){
        if (code === 'STATEMENT'){
            return '房地产意见书';
        }
        if (code === 'LETTER'){
            return '复评函';
        }
        if (code === 'TECHNIC'){
            return '报告(技术报告)';
        }
        if (code === 'FINAL'){
            return '报告(结果报告)';
        }
        return '报告(技术报告、结果报告)'
    },
    openApplyOutWarehouseList(bag){
      this.getListByBizTypeProductionId(bag.businessId);
      this.outWarehouseListDialog = true;
      this.outWarehouse.businessType = 'PERSOANL_BUSINESS';
      this.outWarehouse.businessId = bag.businessId;
    },
    getListByBizTypeProductionId(orderId){
      this.$api.productionOutWarehouse.getPersonalByOrderId(orderId).then(res=>{
          if (res.code === 200){
              this.outApllyList = res.data;
          }
        })
    },
    doApplyOut(){
      let taskRecordDTO = new Object();
      taskRecordDTO.recordId = this.taskId;
      taskRecordDTO.taskData = this.outWarehouse;
      console.log(this.outWarehouse);
      this.$api.productionOutWarehouse.add(taskRecordDTO).then(res=>{
        if (res.code === 200 && res.data){
          this.$notify({
              title: '成功',
              message: '出库申请已提交',
              type: 'success',
              duration: 2000
            });
            this.commitNode();
            this.outWarehouseDialog = false;
            this.outWarehouseListDialog = false;
        }else {
          this.$notify({
              title: '失败',
              message: '出库申请提交失败',
              type: 'error',
              duration: 2000
            });
        }
      })
    }
  },
  
}
</script>
<style lang="scss" scoped>
     /deep/.doWarehouseClass {
     border-radius: 10px;
    }
</style>