supply-front/src/views/engin_deposit/components/deposit_list-detail.vue

<template>
  <div>
    <div class="sty">
      <el-page-header @back="goBack" content="详情"> </el-page-header>
    </div>
    <el-divider></el-divider>
    <el-radio-group v-model="engineering" size="" @change="handleRadio">
      <el-radio-button label="工程押金信息"></el-radio-button>
      <el-radio-button label="工程订单信息"></el-radio-button>
      <el-radio-button label="工程发货信息"></el-radio-button>
    </el-radio-group>
    <br /><br />

    <div v-show="engineering == '工程押金信息'">
      <div class="diy-table-1">
        <el-form :model="details" ref="form">
          <el-row :gutter="0">
            <el-col :xs="12" :sm="8" :lg="8" class="item">
              <div class="label">工程登录编码</div>
              <div class="value">{{ details.refEnginRecordNo }}</div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="8" class="item">
              <div class="label">工程名称(项目名称)</div>
              <div class="value">{{ details.refProjectName }}</div>
            </el-col>
            <el-col :xs="12" :sm="8" :lg="8" class="item">
              <div class="label">工程编号</div>
              <div class="value">{{ details.refProjectNo }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">经销商名称</div>
              <div class="value">{{ details.customerName }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">经销商编码</div>
              <div class="value">{{ details.customerId }}</div>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">工程登录类型</div>
              <div class="value">{{ details.refPromiseStatus }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">联系人</div>
              <div class="value">{{ details.refLinkman }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">固定电话</div>
              <div class="value">{{ details.refTel }}</div>
            </el-col>

            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">厂工程编码</div>
              <div class="value">
                <el-form-item prop="refFactoryNo">
                  <el-input
                    v-model="details.refFactoryNo"
                    placeholder="厂工程编码"
                    size="small"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label"></div>
              <div class="value"></div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">移动电话</div>
              <div class="value">{{ details.refPhone }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">押金总额</div>
              <div class="value">{{ details.depositAmount }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">工程差价总额</div>
              <div class="value">{{ details.depositDiffAmount }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">使用单位</div>
              <div class="value">{{ details.refUseUnit }}</div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label"></div>
              <div class="value"></div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">安装时间</div>
              <div class="value" style="padding: 0">
                <el-form-item prop="installDate">
                  <el-date-picker
                    v-model="details.installDate"
                    type="datetime"
                    placeholder="安装时间"
                    default-time="00:00:00"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8" class="item">
              <div class="label">寄厂日期</div>
              <div class="value" style="padding: 0">
                <el-form-item prop="sendFactoryDate">
                  <el-date-picker
                    v-model="details.sendFactoryDate"
                    type="datetime"
                    placeholder="寄厂日期"
                    default-time="00:00:00"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <h3>货品信息</h3>
      <el-divider></el-divider>
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="details.items"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              align="center"
              label="物料编码"
              prop="materialNumber"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="产品编码"
              prop="materialOldNumber"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="产品名称"
              prop="materialName"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="规格型号"
              prop="specification"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="单价"
              prop="price"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="数量"
              prop="qty"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="金额"
              prop="totalAmount"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="发货数量"
              prop="hasSendQty"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="押金金额"
              prop="depositAmount"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="上交资料"
              prop="dataQty"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="收差全额"
              prop="diffAmount"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="diy-table-1">
        <el-row :gutter="0">
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">申请人</div>
            <div class="value">{{ details.submitBy }}</div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">申请日期</div>
            <div class="value">{{ details.submitTime }}</div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24" class="item">
            <div class="label">申请退押金</div>
            <div class="value">{{ details.applyNote }}</div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 25px">审批</div>
      <el-divider></el-divider>
      <div class="diy-table-1">
        <el-row :gutter="0">
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">验收人</div>
            <div class="value">{{ details.checkBy }}</div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">验收日期</div>
            <div class="value">{{ details.checkDate }}</div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">是否退押</div>
            <div class="value">
              {{ details.isRefundDeposit == true ? "是" : "否" }}
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="12" class="item">
            <div class="label">审批结果</div>
            <div class="value">
              {{ details.examineResult == 0 ? "驳回" : "通过" }}
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24" class="item">
            <div class="label">验收说明</div>
            <div class="value">{{ details.checkNote }}</div>
          </el-col>
        </el-row>
      </div>
      <div style="margin: 20px 0">
        <el-button type="primary" size="small" @click="handleSvse"
          >保存</el-button
        >
        <el-button type="primary" size="small" @click="handleReset"
          >重置</el-button
        >
      </div>
    </div>
    <div v-show="engineering == '工程订单信息'">
      <h3>订单信息</h3>
      <el-divider></el-divider>
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              align="center"
              label="工程订单号"
              prop="enginOrderNo"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="订单日期"
              prop="orderDate"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="产品名称"
              prop="materialName"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="规格型号"
              prop="specification"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="单价"
              prop="price"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="数量"
              prop="qty"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="押金金额"
              prop="totalDepositAmount"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-show="engineering == '工程发货信息'">
      <h3>发货单信息</h3>
      <el-divider></el-divider>
      <!-- 列表 -->
      <div class="mymain-container">
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="projectList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
          >
            <el-table-column
              align="center"
              label="发货单"
              prop="id"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="发货申请日期"
              prop="theTime"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="产品名称"
              prop="materialName"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="规格型号"
              prop="specification"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="单价"
              prop="price"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="数量"
              prop="qty"
              min-width="160"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              align="center"
              label="押金金额"
              prop="totalDepositAmount"
              min-width="160"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{
                  (scope.row.refundableQty || 0) *
                  (scope.row.singleDepositAmount || 0)
                }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  geDetail,
  geOrderInfo,
  editInfo,
  getListProject,
} from "@/api/engin_deposit.js";
export default {
  data() {
    return {
      listLoading: false,
      engineering: "工程押金信息",
      dataList: [],
      projectList: [],
      details: {},
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      if (this.engineering == "工程押金信息") {
        geDetail({ id: this.$parent.depositManageId }).then((res) => {
          this.details = res.data;
        });
      } else if (this.engineering == "工程订单信息") {
        geOrderInfo({ refEnginRecordNo: this.$parent.refEnginRecordNo }).then(
          (res) => {
            this.dataList = res.data;
          }
        );
      } else {
        getListProject({
          pageSize: -1,
          pageNum: 1,
          refEnginRecordNo: this.$parent.refEnginRecordNo,
        }).then((res) => {
          this.projectList = res.data.records;
        });
      }
    },
    goBack() {
      this.$parent.showPage = 1;
    },
    handleRadio(e) {
      this.getDetail();
    },
    handleSvse() {
      this.details.isRefundDeposit =
        this.details.isRefundDeposit == true ? true : false;
      editInfo(this.details).then((res) => {
        this.$successMsg("编辑成功");
        this.$parent.showPage = 1;
      });
    },
    handleReset() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__prefix {
  display: none;
  left: 65px !important;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
::v-deep .el-date-editor.el-input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 10px;
}
.diy-table-1 {
  ::v-deep .el-form-item {
    margin: 0;
  }
}
::v-deep .el-input__suffix {
  right: -15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
</style>