goelia-ai-admin/src/views/oms/refund-old/components/orderRefundDialog.vue

<template>
  <div v-loading.fullscreen.lock="detailLoading">
    <div class="head">
      <!--		<span>销售单详情</span>
 			<span>返回</span>
 -->
    </div>
    <div class="main">
      <!-- <div class="box" style="margin-top: 15px;">
				<div class="item_title">
					<span>基本信息</span>
				</div>
				<div class="ptitle">
					<baseInfoTab :orderInfo="orderInfo"></baseInfoTab>
				</div>
			</div> -->

      <div class="box" style="margin-top: 15px;">
        <div class="item_title">
          <span>{{ $t("view.shippingInfo") }}</span>
        </div>
        <div class="ptitle">
          <!-- <receivingInfoTab :addressInfo="addressInfo" :orderInfo="orderInfo"></receivingInfoTab> -->
          <el-descriptions
            class="margin-top"
            :title="$t('title.addressInfo')"
            :column="4"
            direction="horizontal"
          >
            <el-descriptions-item :label="$t('country')">{{
              addressInfo.receiverCountryCode
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('label.postalCode')">{{
              addressInfo.receiverZip
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('state')">{{
              addressInfo.receiverState
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('city')">{{
              addressInfo.receiverCity
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('suburb')">{{
              addressInfo.receiverDistrict
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('street')">{{
              addressInfo.receiverStreet
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('address')">{{
              addressInfo.receiverAddress
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('dooeNo')">{{
              addressInfo.receiverAddress2
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('recipient')">{{
              addressInfo.receiverName
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('telephone')">{{
              addressInfo.receiverPhone
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('moPhone')">{{
              addressInfo.receiverMobile
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('post')">{{
              addressInfo.email
            }}</el-descriptions-item>
            <el-descriptions-item :label="$t('label.shippingFee')">{{
              addressInfo.freight
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div
        class="box"
        style="margin-top: 15px;padding-bottom: 10px;"
        v-if="invoiceInfo != null"
      >
        <div class="item_title">
          <span>{{ $t("view.invoiceDetails") }}</span>
        </div>
        <div class="ptitle">
          <invoiceInfoTab :invoiceInfo="invoiceInfo"></invoiceInfoTab>
        </div>
      </div>

      <div
        class="box"
        style="margin-top: 15px;padding-bottom: 10px;"
        v-loading="fromLoading"
      >
        <div class="item_title">
          <span>{{ $t("view.refundInfo") }}</span>
        </div>
        <div class="ptitle">
          <el-form
            ref="addRefundForm"
            :model="addRefundForm"
            label-width="auto"
          >
            <el-form-item :label="$t('currency')">
              <el-input
                disabled
                v-model="addRefundForm.currency"
                placeholder
                class="normal-input"
              ></el-input>
            </el-form-item>
            <el-form-item :label="$t('label.afterSalesType')" required>
              <el-select
                :disabled="editIs"
                :placeholder="$t('place.pleaseSelect')"
                clearable
                style="width: 200px;"
                class="filter-item"
                v-model="addRefundForm.refundType"
              >
                <el-option
                  v-for="afterSaleType in afterSaleTypes"
                  disabled
                  :key="afterSaleType.value"
                  :label="$t(afterSaleType.label)"
                  :value="afterSaleType.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('label.expectedRefundAmount')" required>
              <el-input
                v-model="addRefundForm.refundTotalAmount"
                :disabled="true"
              />
            </el-form-item>
            <el-form-item :label="$t('label.refundMethod')" required>
              <!-- <el-input  v-model="addRefundForm.refundMethod" :placeholder="$t('place.pleaseFillIn')" class="normal-input"></el-input> -->
              <el-radio-group v-model="addRefundForm.refundMethod">
                <el-radio label="system">{{
                  $t("view.systemRefund")
                }}</el-radio>
                <el-radio label="manual">{{
                  $t("view.manualRefund")
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="addRefundForm.refundMethod == 'manual'"
              :label="$t('label.accountType')"
              required=""
            >
              <el-radio-group v-model="addRefundForm.refundAccountType">
                <el-radio label="PayPal">PayPal</el-radio>
                <!-- 银行卡暂时隐藏 -->
                <!-- <el-radio label="bankCard">银行卡</el-radio> -->
                <!-- <el-radio label="Gift Card">Gift Card</el-radio> -->
              </el-radio-group>
            </el-form-item>
            <el-form-item
              :label="$t('label.receivingAccount')"
              v-if="
                addRefundForm.refundMethod == 'manual' &&
                  addRefundForm.refundAccountType == 'PayPal'
              "
              required
            >
              <el-input
                v-model="addRefundForm.refundAccount"
                :placeholder="$t('place.pleaseFillIn')"
                class="normal-input"
              ></el-input>
            </el-form-item>
            <!-- 选择是否退税-->
            <el-form-item
              v-if="addRefundForm.refundType"
              :label="$t('label.taxRefund')"
            >
              <el-radio-group
                v-model="addRefundForm.refundTaxAble"
                @change="calculateRefundAmount"
              >
                <el-radio label="0">{{ $t("view.noTaxRefund") }}</el-radio>
                <el-radio label="1">{{ $t("view.taxRefund") }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="addRefundForm.refundTaxAble == 1"
              :label="$t('label.taxRefundAmount')"
            >
              <el-input-number
                v-model="addRefundForm.refundTaxAmount"
                :min="0.0"
                :step="0.01"
                step-strictly
                @change="calculateRefundAmount"
              ></el-input-number>
            </el-form-item>
            <!-- 选择是否退运费-->
            <el-form-item
              v-if="addRefundForm.refundType"
              :label="$t('label.shippingFee')"
            >
              <el-radio-group
                v-model="addRefundForm.refundPostage"
                @change="calculateRefundAmount"
              >
                <el-radio label="0">{{ $t("view.noRefund") }}</el-radio>
                <el-radio label="1">{{
                  $t("view.refundShippingFee")
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="addRefundForm.refundPostage == 1"
              :label="$t('label.returnShippingFeeAmount')"
            >
              <el-input-number
                v-model="addRefundForm.refundPostageAmount"
                :min="0.0"
                :step="0.01"
                step-strictly
                @change="calculateRefundAmount"
              ></el-input-number>
            </el-form-item>
            <el-form-item
              v-if="addRefundForm.refundType == 3"
              :label="$t('label.receivingReturnWarehouse')"
            >
              <el-select
                :placeholder="$t('place.pleaseSelect')"
                clearable
                style="width: 200px;"
                class="filter-item"
                v-model="addRefundForm.warehouseCode"
                @change="ShippingLabelOption"
              >
                <el-option
                  v-for="item in warehouseItems"
                  :key="item.key"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- TODO 暂时关闭SL -->
            <el-form-item
              v-if="addRefundForm.warehouseCode"
              label="ShippingLabel" hidden
            >
              <el-radio-group v-model="addRefundForm.slUseable">
                <el-radio label="0" value="0">{{
                  $t("view.notEnabled")
                }}</el-radio>
                <el-radio label="1" value="1">{{
                  $t("view.enabled")
                }}</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              v-if="
                addRefundForm.refundType == 3 && addRefundForm.slUseable == '1'
              "
              :label="$t('label.returnLogisticsCompanyCode')"
            >
              <el-input
                v-model="addRefundForm.shipmodeId"
                disabled
                :placeholder="$t('place.pleaseFillIn')"
                class="normal-input"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="
                addRefundForm.refundType == 3 && addRefundForm.slUseable == '1'
              "
              :label="$t('label.returnLogisticsNumber')"
            >
              <el-input
                v-model="addRefundForm.shippingNo"
                disabled
                :placeholder="$t('place.pleaseFillIn')"
                class="normal-input"
              ></el-input>
            </el-form-item>

            <el-form-item
              v-if="
                addRefundForm.refundType == 3 && addRefundForm.slUseable == '0'
              "
              :label="$t('label.returnLogisticsCompanyCode')"
            >
              <el-input
                v-model="addRefundForm.shipmodeId"
                :placeholder="$t('place.pleaseFillIn')"
                class="normal-input"
              ></el-input>
            </el-form-item>
            <el-form-item
              v-if="
                addRefundForm.refundType == 3 && addRefundForm.slUseable == '0'
              "
              :label="$t('label.returnLogisticsNumber')"
            >
              <el-input
                v-model="addRefundForm.shippingNo"
                :placeholder="$t('place.pleaseFillIn')"
                class="normal-input"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item v-if="addRefundForm.refundType==1" clearable :label="$t('label.refundReason')">
              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item"  @change="refundChange(allReason,addRefundForm.refundReason)">
                <el-option v-for="status in allReason"
                           v-if="status.reasonType=='1'"
                           :key="status.id"
                           :label="status.reasonContentChinese"
                           :value="status.id">
                </el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item v-if="addRefundForm.refundType==2" clearable :label="$t('label.refundReason')" >
              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item"  @change="refundChange(allReason,addRefundForm.refundReason)">
                <el-option v-for="status in allReason"
                           v-if="status.reasonType=='2'"
                           :key="status.id"
                           :label="status.reasonContentChinese"
                           :value="status.id">
                </el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item v-if="addRefundForm.refundType==3" clearable :label="$t('label.refundReason')">
              <el-select  :placeholder="$t('place.pleaseSelect')" clearable v-model="addRefundForm.refundReason" class="filter-item" @change="refundChange(allReason,addRefundForm.refundReason)">
                <el-option v-for="status in allReason"
                           v-if="status.reasonType=='3'"
                           :key="status.id"
                           :label="status.reasonContentChinese"
                           :value="status.id">
                </el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item v-if="customOpen=='1'" :label="$t('label.reasonExplanation')">
              <el-input type="textarea" :placeholder="$t('place.enterReason')" v-model="addRefundForm.otherReason" style="width: 200px;" :rows="3"></el-input>
            </el-form-item> -->

            <el-form-item :label="$t('label.afterSalesInstructions')">
              <el-input
                type="textarea"
                :placeholder="$t('place.enterContent')"
                v-model="addRefundForm.notes"
                maxlength="150"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('label.uploadVoucher')">
              <el-upload
                class="avatar-uploader"
                :action="uploadPhotos"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="box" style="margin-top: 15px;" v-if="refundType">
        <div class="item_title">
          <span>{{ $t("view.selectItems") }}</span>
        </div>
        <div class="ptitle">
          <!-- <orderRefundItemListTab v-if="refundType" :addRefundForm="addRefundForm" :refundType="addRefundForm.refundType" :orderDeatils="orderDeatils" :orderInfo="orderInfo"></orderRefundItemListTab> -->
          <orderRefundItemListTab
            v-if="refundType"
            :addRefundForm="addRefundForm"
            :refundType="addRefundForm.refundType"
          ></orderRefundItemListTab>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getById,
  queryOrderDetails,
  getAllReason
} from "@/api/oms/order/order";
import { queryByOrdersId as getAddress } from "@/api/oms/order/address";
import { getById as getInvoice } from "@/api/oms/order/invoice";
import global from "@/views/oms/global";
import baseInfoTab from "@/views/oms/order/components/baseInfoTab";
import invoiceInfoTab from "@/views/oms/order/components/invoiceInfoTab";
import optLogTab from "@/views/oms/order/components/optLogTab";
import orderRefundItemListTab from "./orderRefundItemListTab";
import receivingInfoTab from "@/views/oms/order/components/receivingInfoTab";
import {
  warehouseList,
  getRefundInfo,
  getDetailListByRefundId
} from "@/api/oms/refund/refund";
import { getToken } from "@/utils/auth";
import { dcmAdd, dcmSub, accDiv, accMul } from "@/utils/toolUtil";
import { BigNumber } from "bignumber.js";
export default {
  name: "orderRefundDialog",
  props: ["refundId"],
  components: {
    baseInfoTab,
    invoiceInfoTab,
    optLogTab,
    orderRefundItemListTab,
    receivingInfoTab
  },
  data() {
    return {
      orderInfo: {},
      addressInfo: {},
      orderDeatils: [],
      invoiceInfo: null,
      detailLoading: false,
      imageUrl: "",
      allReason: {},
      customOpen: "",
      addRefundForm: {
        refundMethod: "system",
        refundPostage: "0",
        refundAmount: 0.0, //商品退款金额
        refundPostageAmount: 0.0,
        warehouseCode: "",
        annexPath: "",
        items: [],
        oldQuantity: 0,
        refundTaxAble: "0", //是否退税
        refundTaxAmount: 0.0, //退税金额
        refundTotalAmount: 0.0, //总计退款金额 = 商品退款金额 + 退运费金额 + 退税金额 。 实际执行时，refundAmount=商品退款金额 + 退税金额；退运费金额单独计算
        refundReason: "", // 退款原因
        otherReason: "", // 其他退款理由
        refundAccount: "",
        refundAccountType: "",
        ormorder: "",
        slUseable: "0" //是否开启ShippingLabel选项
      },
      afterSaleTypes: "",
      warehouseItems: [],
      fromLoading: false,
      uploadPhotos: process.env.VUE_APP_OMS_API + "ordersRefund/uploadPhotos",
      editIs: true,
      refundType: false
    };
  },
  created() {
    // if(!this.refundId) {
    // 	this.editIs = false;
    // }
    // this.getOrderInfo();
    //这里只考虑编辑的情况
    this.getDetailListByRefundId(this.refundId);
  },
  computed: {
    // 计算属性的 getter
    headers: function() {
      return {
        "X-Token": getToken()
      };
    }
  },
  methods: {
    //计算退款总额 商品退款金额 + 退运费金额 +退税金额
    calculateRefundAmount() {
      //如果没选择退税
      if (this.addRefundForm.refundTaxAble != "1") {
        this.addRefundForm.refundTaxAmount = BigNumber(0)
          .toNumber()
          .toFixed(2);
      }
      //如果没选择退运费
      if (this.addRefundForm.refundPostage != "1") {
        this.addRefundForm.refundPostageAmount = BigNumber(0)
          .toNumber()
          .toFixed(2);
      }

      var taxAndShippingAmount = BigNumber(this.addRefundForm.refundTaxAmount)
        .plus(BigNumber(this.addRefundForm.refundPostageAmount))
        .toNumber()
        .toFixed(2);
      console.log(taxAndShippingAmount, this.addRefundForm.refundAmount);
      this.addRefundForm.refundTotalAmount = BigNumber(taxAndShippingAmount)
        .plus(BigNumber(this.addRefundForm.refundAmount))
        .toNumber()
        .toFixed(2);
    },
    getDetailListByRefundId(refundId) {
      //初始化数据
      this.addRefundForm.refundAmount = 0.0;
      this.addRefundForm.refundPostage = "0";
      this.addRefundForm.refundPostageAmount = 0.0;
      this.addRefundForm.warehouseCode = "";
      this.addRefundForm.annexPath = "";
      this.addRefundForm.items = [];
      this.addRefundForm.oldQuantity = 0.0;
      this.addRefundForm.refundTaxAble = "0"; //是否退税
      this.addRefundForm.refundTaxAmount = 0.0; //退税金额
      this.addRefundForm.refundTotalAmount = 0.0;
      this.addRefundForm.shipmodeId = "";
      this.addRefundForm.shippingNo = "";
      this.addRefundForm.refundMethod = "system";
      this.addRefundForm.refundAccountType = "PayPal";
      this.addRefundForm.refundAccount = "";
      this.addRefundForm.notes = "";
      this.addressInfo = [];
      this.reasonListAll = [];
      this.refundReasonAss = "";
      this.refundOtherReasonAss = "";
      this.otherReasonFlag = "";
      //查询该退款单的数据
      this.detailLoading = true;
      let _this = this;
      getDetailListByRefundId(refundId).then(res => {
        if (200 == res.code) {
          this.addRefundForm = res.data;
          this.addressInfo = res.data.address;
          this.afterSaleTypes = global.afterSaleType; //售后类型
          //循环订单项信息
          let refundGoodsAmount = BigNumber(0);
          if (this.addRefundForm.items) {
            for (let ind in this.addRefundForm.items) {
              refundGoodsAmount = refundGoodsAmount.plus(
                BigNumber(this.addRefundForm.items[ind].refundAmount)
              );
            }
          }
          _this.$set(
            this.addRefundForm,
            "refundAmount",
            BigNumber(refundGoodsAmount.toFixed(2))
          ); //this.addRefundForm.refundAmount= refundGoodsAmount.toFixed(2);
          //原单的退税金额 = 原单的退款总金额 - 退商品金额 - 退运费金额
          let oldRefundTaxAmount = BigNumber(
            this.addRefundForm.refundTotalAmount
          )
            .plus(BigNumber(-this.addRefundForm.refundPostageAmount))
            .plus(BigNumber(-this.addRefundForm.refundAmount))
            .toFixed(2);

          if (oldRefundTaxAmount > 0) {
            _this.$set(this.addRefundForm, "refundTaxAble", "1"); //是否退税
          } else {
            oldRefundTaxAmount = 0;
            _this.$set(this.addRefundForm, "refundTaxAble", "0"); //是否退税
          }
          _this.$set(this.addRefundForm, "refundTaxAmount", oldRefundTaxAmount); //是否退税 this.addRefundForm.refundTaxAmount=oldRefundTaxAmount;
          this.refundType = true;

          this.detailLoading = false;

          //退货退款场景
          if (this.addRefundForm.refundType == 3) {
            warehouseList().then(res => {
              if (200 == res.code) {
                this.warehouseItems = res.data;
              }
            });
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleAvatarSuccess(res, file) {
      console.log("图片上传结果", res);
      this.imageUrl = res.accessUrl;
      if (this.imageUrl) {
        this.addRefundForm.annexPath = this.imageUrl;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式或者PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    refundChange(arr, id) {
      console.log(arr, id);
      arr.forEach(item => {
        if (item.id == id) {
          this.customOpen = item.custom;
        }
      });
    },
    // changeRefund() {
    // 	this.fromLoading = true;
    // 	this.refundType=false;
    // 	this.orderDeatils = [];
    // 	this.addRefundForm.refundAmount = 0.00;
    // 	this.addRefundForm.refundPostage = '0';
    // 	this.addRefundForm.refundPostageAmount = 0.00;
    // 	this.addRefundForm.refundTaxAble='0';//是否退税
    // 	this.addRefundForm.refundTaxAmount=0.00;//退税金额
    // 	this.addRefundForm.refundTotalAmount=0.00; //总计退款金额 = 退款金额 + 退运费金额 + 退税金额 。 实际执行时，refundAmount=商品退款金额 + 退税金额；退运费金额单独计算
    // 	this.addRefundForm.warehouseCode = '';
    // 	this.addRefundForm.annexPath = '';
    // 	this.addRefundForm.items = [];
    // 	this.addRefundForm.oldQuantity = 0;
    // 	this.warehouseItems = [];
    // 	this.addRefundForm.refundReason='';
    // 	this.addRefundForm.otherReason='';
    // 	//退货退款场景
    // 	if(this.addRefundForm.refundType == 3) {
    // 		warehouseList().then(res => {
    // 			if(200 == res.code) {
    // 				this.warehouseItems = res.data;
    // 			}
    // 		})
    // 	}
    // queryOrderDetails(this.orderInfo.ordersId).then(res => {
    // 		if(200 == res.code) {

    // 			this.orderDeatils = res.data;
    // 			if(this.orderDeatils) {
    // 				for(let ind in this.orderDeatils) {
    // 					this.orderDeatils[ind].oldQuantity = this.orderDeatils[ind].quantity;
    //     if(this.addRefundForm.refundType==1){
    //       this.orderDeatils[ind].quantity=0;
    //     }
    // 					var fee=this.orderDeatils[ind].totalFee;
    // 					if(fee==null||fee==""){
    // 						fee=0.00;
    // 					}
    // 					this.$set(this.orderDeatils[ind], "refundAmount", fee)
    // 					if(this.orderDeatils[ind].refundQuantity == null) {
    // 						this.orderDeatils[ind].refundQuantity = 0;
    // 					}
    // 				}
    // 				this.refundType=true;
    // 			}

    // 		}
    // 		this.fromLoading = false;
    // 		console.log("this.orderDeatils",this.orderDeatils)
    // 	})

    // },
    ShippingLabelOption() {
      // if (
      //   this.addRefundForm.refundType == 3 &&
      //   this.addressInfo.receiverCountryCode == "US" &&
      //     this.addRefundForm.warehouseCode == "USNY-C1"
      // ) {
      //   this.addRefundForm.slUseable = "1";
      // } else {
      //   this.addRefundForm.slUseable = "0";
      // }
      //暂时关闭SL
      this.addRefundForm.slUseable = "0";
    }
  }
};
</script>

<style lang="scss" scoped>
.head {
  padding: 0 20px;
  height: 25px;
  box-shadow: 0px 7px 6px -6px #f8eeee;
  display: flex;
  justify-content: space-between;
  span:nth-child(1) {
    font-size: 15px;
    line-height: 25px;
    color: #909399;
    font-weight: 600;
  }
  span:nth-child(2) {
    line-height: 25px;
    cursor: pointer;
    color: #ae8878;
    font-size: 13px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.big_box {
  min-width: 650px;
  border: 1px solid #e4e7ed;
  border-bottom: none;
}

.big_box div {
  border-bottom: 1px solid #e4e7ed;
  display: flex;
}

.big_box p {
  margin: 0;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  font-weight: bold;
  border-right: 1px solid #e4e7ed;
  padding: 0 5px;
  text-align: center;
  color: #909399;
  min-width: 100px;
}

.w {
  font-weight: 500 !important;
  color: #606266 !important;
  text-align: left !important;
  padding-left: 20px !important;
}

.main {
  margin-top: 15px;
  .box {
    text-align: center;
    position: relative;
    .box_item {
      padding: 0 20px;
      display: flex;
      .item_title {
        line-height: 40px;
        font-size: 18px;
        text-align: left;
        font-weight: 600;
      }
      .item_list {
        text-align: left;
        font-size: 14px;
        color: #606266;
        display: flex;
        p {
          margin: 10px 0;
        }
        div:nth-child(2) {
          margin-left: 30px;
        }
      }
    }
    .item_title {
      padding-left: 20px;
      line-height: 40px;
      font-size: 18px;
      text-align: left;
      font-weight: 600;
    }
  }
}

.ptitle {
  display: flex;
  justify-content: space-between;
  margin: 20px;
  color: #1f2d3d;
  text-align: left;
  font-weight: bold;
}

.pcode {
  color: #8f5842;
  font-weight: 500;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>