kd-aiot-frontend-aps/src/views/saleOrder/salesToProductionNewTwo.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="body-title">
        <div class="title-left">{{
          type == 'edit' ? '计划修改' : '销售订单转生产计划'
        }}</div>
        <div class="title-right">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="toSubmit" :loading="loading">
            提交计划
          </el-button>
        </div>
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        class="formbox"
      >
        <el-row :gutter="24">
          <el-col v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }">
            <el-form-item label="计划类型:">
              <DictSelection
                dictName="订单计划类型"
                clearable
                v-model="form.planType"
                disabled
              >
              </DictSelection>
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 5, md: 8 } : { span: 4 }">
            <el-form-item
              label="生产类型:"
              :class="isRequired ? 'header_required' : ''"
            >
              <el-select
                v-model="form.produceType"
                style="width: 100%"
                @change="changeProduceType"
              >
                <el-option
                  v-for="item of producedList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }"
            v-if="clientEnvironmentId != 4"
          >
            <el-form-item
              label="BOM版本:"
              :class="isRequired ? 'header_required' : ''"
            >
              <el-select
                v-model="form.bomCategoryId"
                style="width: 100%"
                @change="changeBomId"
              >
                <el-option
                  v-for="item of bomVersionList"
                  :key="item.id"
                  :label="item.name + '(V' + item.versions + '.0)'"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }"
            v-if="clientEnvironmentId != 4"
          >
            <el-form-item label="工艺路线:" prop="produceRoutingId">
              <!--  @click.native="openVersion"   -->
              <div style="display: flex">
                <el-select
                  v-model="form.produceRoutingId"
                  style="width: 100%"
                  @change="changeRoute"
                  v-show="isRouteSelect"
                >
                  <el-option
                    v-for="item of routingList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <div
                  :style="{
                    display: 'flex',
                    width: !isRouteSelect ? '100%' : ''
                  }"
                >
                  <el-input
                    v-show="!isRouteSelect"
                    disabled
                    v-model="form.produceRoutingName"
                    style="width: 100%"
                  ></el-input>
                  <el-button
                    v-show="isSelectShow"
                    type="primary"
                    size="mini"
                    @click="openDialog"
                    >选择</el-button
                  >
                </div>
              </div>
            </el-form-item>
          </el-col>

          <el-col
            v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }"
            v-if="clientEnvironmentId == 4"
          >
            <el-form-item label="工艺路线:" prop="produceRoutingId">
              <el-input
                v-model="form.produceRoutingName"
                style="width: 100%"
                readonly
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }">
            <el-form-item label="库存数量:" prop="stockCountBase">
              <el-input
                v-model="form.stockCountBase"
                style="width: 100%"
                readonly
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col v-bind="styleResponsive ? { lg: 3, md: 6 } : { span: 3 }">
              <el-form-item label="使用改型:" prop="modification">
                <el-checkbox
                  v-model="form.modification"
                  :true-label="1"
                  :false-label="0"
                ></el-checkbox>
              </el-form-item>
            </el-col> -->
        </el-row>
        <el-row :gutter="24">
          <el-col v-bind="styleResponsive ? { lg: 4, md: 8 } : { span: 4 }">
            <el-form-item label="余量系数:" prop="marginCoefficient">
              <el-select
                v-model="form.marginCoefficient"
                filterable
                allow-create
                @change="itemChange"
              >
                <el-option
                  v-for="(item, index) in marginList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }">
            <el-form-item
              class="header_time_required"
              label="计划开始日期:"
              prop="startTime"
            >
              <el-date-picker
                style="width: 100%"
                v-model="form.startTime"
                :pickerOptions="{
                  disabledDate: function (time) {
                    return validDate.startDisabledDate(form, 'endTime', time);
                  }
                  // time.getTime() <
                  // new Date(new Date().setHours(0, 0, 0, 0)).getTime()
                }"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleStartTimeChange(form)"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }">
            <el-form-item
              class="header_time_required"
              label="计划结束日期:"
              prop="endTime"
            >
              <el-date-picker
                style="width: 100%"
                v-model="form.endTime"
                :pickerOptions="{
                  disabledDate: (time) =>
                    validDate.endDisabledDate(form, 'startTime', time),
                  disabledTime: (date) =>
                    validDate.endDisabledTime(form, 'startTime', date)
                  // time.getTime() <
                  // new Date(new Date().setHours(0, 0, 0, 0)).getTime()
                }"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleEndTimeChange(form)"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 5, md: 10 } : { span: 5 }">
            <!-- prop="factoriesId" -->
            <el-form-item label="所属工厂:" prop="factoriesId">
              <el-select
                v-model="form.factoriesId"
                style="width: 100%"
                @change="factoriesIdFn"
              >
                <el-option
                  v-for="item of factoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-form-item label="生产类型:" prop="produceType">
                <el-select v-model="form.produceType" style="width: 100%"   @change="changeProduceType" >
                    <el-option
                      v-for="item of producedList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
              </el-form-item> -->
        </el-row>

        <el-row> </el-row>

        <el-row :gutter="24" class="row-intro product_info">
          <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
            <el-form-item label-width="88px" label="销售单数量:">{{
              form.codeNum
            }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
            <el-form-item label-width="88px" label="订单总数量:">{{
              form.contractNum
            }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 4 }">
            <el-form-item label-width="88px" label="订单总重量:">{{
              form.sumOrderWeight
            }}</el-form-item>
          </el-col>
          <el-col
            style="padding: 0 0"
            v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }"
          >
            <el-form-item
              label-width="80px"
              class="product_code_name"
              label="产品编码:"
              ><span>{{ form.productCode }}</span></el-form-item
            >
          </el-col>
          <el-col
            style="padding: 0 0 0 5px"
            v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }"
          >
            <el-form-item label-width="50px" label="牌号:">{{
              form.brandNo
            }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 5 }">
            <el-form-item label-width="50px" label="型号:">{{
              form.model
            }}</el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 3 }">
            <el-form-item label-width="50px" label="规格:">{{
              form.specification
            }}</el-form-item>
          </el-col>
          <!-- <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
                    <el-form-item label="库存数量:">{{
                        form.stockCountBase
                    }}</el-form-item>
                    </el-col> -->
        </el-row>
        <el-table :data="form.salesOrders" border>
          <el-table-column label="序号" align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="销售订单号"
            align="center"
            prop="code"
            width="120"
            sortable
          >
          </el-table-column>

          <el-table-column
            label="产品名称"
            align="center"
            prop="productName"
            width="120"
          >
          </el-table-column>

          <el-table-column label="行号" align="center" prop="lineNumber">
          </el-table-column>
          <el-table-column
            :label="'订单数量' + (clientEnvironmentId == '4' ? '(方)' : '')"
            align="center"
            prop="contractNum"
            width="120"
          >
            <template slot-scope="scope">
              {{ scope.row.contractNum }}
              <!-- {{ scope.row.measuringUnit }} -->
            </template>
          </el-table-column>
          <el-table-column
            label="订单重量"
            align="center"
            prop="productSumWeight"
            width="120"
          >
            <template slot-scope="scope">
              {{ scope.row.productSumWeight }} {{ form.weightUnit }}
            </template>
          </el-table-column>
          <el-table-column
            label="下达时间"
            align="center"
            prop="releaseTime"
            width="170"
          >
          </el-table-column>
          <el-table-column label="规格" align="center" prop="specification">
          </el-table-column>
          <el-table-column
            label="生产编号"
            align="center"
            prop="productionCodes"
          >
          </el-table-column>
          <el-table-column
            :label="'欠交数量' + (clientEnvironmentId == '4' ? '(方)' : '')"
            align="center"
            prop="lackNum"
          >
          </el-table-column>
          <el-table-column label="批次号" width="160" align="center" prop="batchNo">
            <template slot-scope="scope">
              <el-input
                v-model.number="scope.row.batchNo"
                size="small"
                style="width: 100%"
                placeholder="批次号"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            :label="'计划生产数量' + (clientEnvironmentId == '4' ? '(方)' : '')"
            align="center"
            prop="planProductNum"
            width="140"
          >
            <template slot-scope="scope">
              <el-form-item
                label-width="0px"
                :prop="'salesOrders.' + scope.$index + '.planProductNum'"
                :rules="{
                  required: true,
                  message: '请输入计划生产数量',
                  trigger: 'blur'
                }"
                class="table-item"
              >
                <el-input
                  v-model.number="scope.row.planProductNum"
                  size="small"
                  type="number"
                  style="width: 100%"
                  @input="
                    tableHandleKeyUp(scope.row, scope.$index, $event, 'sum')
                  "
                  placeholder="输入数量"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column
            :label="'要求生产数量' + (clientEnvironmentId == '4' ? '(方)' : '')"
            align="center"
            prop="requiredFormingNum"
            width="120"
          >
            <template slot-scope="scope">
              <el-form-item
                label-width="0px"
                :prop="'salesOrders.' + scope.$index + '.requiredFormingNum'"
                :rules="{
                  required: true,
                  message: '请输入要求生产数量',
                  trigger: 'blur'
                }"
                class="table-item"
              >
                <el-input
                  v-model.number="scope.row.requiredFormingNum"
                  size="small"
                  disabled
                  oninput="value=value.replace(/[^\d]/g,'')"
                  style="width: 100%"
                  placeholder="输入数量"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="模数"
            align="center"
            width="100"
            v-if="clientEnvironmentId == '4'"
          >
            <template slot-scope="scope">
              <div>
                <el-input
                  style="width: 100%"
                  size="small"
                  v-model="scope.row.moCount"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  @input="
                    tableHandleKeyUp(scope.row, scope.$index, $event, 'moCount')
                  "
                  placeholder="请输入"
                >
                </el-input>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            width="100"
            v-if="clientEnvironmentId == '4'"
          >
            <template slot="header">
              <span style="color: red">*</span>
              <span>块数</span>
            </template>
            <template slot-scope="scope">
              <div>
                <el-input
                  size="small"
                  style="width: 100%"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  @input="
                    tableHandleKeyUp(
                      scope.row,
                      scope.$index,
                      $event,
                      'blockCount'
                    )
                  "
                  v-model="scope.row.blockCount"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="权重等级"
            align="center"
            width="120"
            v-if="clientEnvironmentId == '4'"
          >
            <template slot-scope="scope">
              <div>
                <el-select v-model="scope.row.weight" style="width: 100%">
                  <el-option
                    v-for="item of weightList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="120"
            label="是否开槽"
            v-if="clientEnvironmentId == '4'"
          >
            <template slot-scope="scope">
              <div>
                <el-select
                  style="width: 100%"
                  v-model="scope.row.isSlotting"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item of isSlotting"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="120"
            label="开槽类型"
            v-if="clientEnvironmentId == '4'"
          >
            <template slot-scope="scope">
              <DictSelection
                dictName="开槽类型"
                v-model="scope.row.slottingType"
                v-if="scope.row.isSlotting == 1"
              >
              </DictSelection>
            </template>
          </el-table-column>
          <el-table-column
            label="按单按库"
            align="center"
            prop="orderLibraryType"
          >
            <template slot-scope="{ row }">
              {{ getDictValue('按单按库', row.orderLibraryType) }}
            </template>
          </el-table-column>
          <el-table-column label="订单类型" align="center" prop="orderType">
            <template slot-scope="{ row }">
              {{ getDictValue('订单类型', row.orderType) }}
            </template>
          </el-table-column>
          <el-table-column
            label="客户期望交期"
            align="center"
            prop="deliveryTime"
            width="160"
          >
            <template slot-scope="scope">
              <el-form-item
                label-width="0px"
                :prop="'salesOrders.' + scope.$index + '.deliveryTime'"
                :rules="{
                  required: true,
                  message: '请选择客户期望交期',
                  trigger: 'blur'
                }"
                class="table-item"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="scope.row.deliveryTime"
                  @change="changeDate(scope.row, scope.$index)"
                  :pickerOptions="{
                    disabledDate: (time) =>
                      time.getTime() <
                      new Date(new Date().setHours(0, 0, 0, 0)).getTime()
                  }"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="生产交期" align="center" width="160">
            <template slot-scope="scope">
              <el-form-item
                label-width="0px"
                :rules="{
                  required: true,
                  message: '请选择生产交期',
                  trigger: 'blur'
                }"
                class="table-item"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="scope.row.produceDeliveryDeadline"
                  @change="changeDate(scope.row, scope.$index)"
                  :pickerOptions="{
                    disabledDate: (time) =>
                      time.getTime() <
                      new Date(new Date().setHours(0, 0, 0, 0)).getTime()
                  }"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="要求完成日期"
            align="center"
            prop="reqMoldTime"
            width="180"
          >
            <template slot-scope="scope">
              <el-form-item
                label-width="0px"
                :prop="'salesOrders.' + scope.$index + '.reqMoldTime'"
                :rules="{
                  required: true,
                  message: '请选择要求完成日期',
                  trigger: 'blur'
                }"
                class="table-item"
              >
                <el-date-picker
                  style="width: 100%"
                  v-model="scope.row.reqMoldTime"
                  :pickerOptions="{
                    disabledDate: (time) =>
                      time.getTime() <
                      new Date(new Date().setHours(0, 0, 0, 0)).getTime()
                  }"
                  type="date"
                  disabled
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="客户名称" align="center" prop="customerName">
          </el-table-column>
          <el-table-column label="业务员" align="center" prop="salesman">
          </el-table-column>
          <el-table-column
            label="交付要求"
            align="center"
            prop="deliveryRequirements"
          >
            <template slot-scope="{ row }">
              {{ getDictValue('交付要求', row.deliveryRequirements) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="priority"
            label="优先级"
            width="100"
            align="center"
          >
            <template slot-scope="{ row, $index }">
              <div style="display: flex">
                <el-input
                  v-if="$index == 0"
                  v-model="row.priority"
                  type="number"
                  size="mini"
                  :min="0"
                  :max="10"
                  @change="priorityChange(row)"
                  style="width: 80px"
                ></el-input>
                <el-popover
                  v-if="$index == 0"
                  placement="right"
                  width="200"
                  trigger="hover"
                  content="数值越大优先级越高（0-3普通, 4-6优先, 7-10紧急）"
                >
                  <div class="sort-wrap" slot="reference">
                    <i class="el-icon-caret-top" @click="sortTop(row)"></i>
                    <i
                      class="el-icon-caret-bottom"
                      @click="sortBottom(row)"
                    ></i>
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="70" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleDeleteItem(scope.$index)"
                v-if="type != 'edit'"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="add-product" @click="addEquipment" v-if="type != 'edit'">
          <i class="el-icon-circle-plus-outline"></i>
        </div>
        <el-row :gutter="24">
          <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
            <el-form-item label="计划备注:">
              <el-input
                type="textarea"
                :rows="4"
                v-model="form.notes"
                resize="none"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <AdditionalOrder
        ref="additionalRefs"
        :productCode="form.productCode"
        :selectList="form.salesOrders"
        @choose="confirmChoose"
      ></AdditionalOrder>
      <ProductionVersion
        ref="versionRefs"
        @changeProduct="changeProduct"
      ></ProductionVersion>
      <PlanSubmit
        ref="submitRefs"
        :type="$route.query.type"
        :info="form"
        @publish="publishData"
      ></PlanSubmit>
      <ProcessRoute ref="processRouteRef" @changeParent="changeParent" />
    </el-card>
  </div>
</template>
<script>
  import validDate from '@/utils/date';
  import AdditionalOrder from './components/AdditionalOrder.vue';
  import PlanSubmit from './components/plan-submit.vue';
  import ProductionVersion from '@/components/CreatePlan/ProductionVersion2.vue';
  import ProcessRoute from '@/components/selectionDialog/processRoute.vue';
  import {
    productionToPlan,
    saveSaleToPlan,
    updateSaleToPlan,
    releaseSave,
    getInventory,
    getUpdateInfoById,
    bomRoutingList,
    bomListByPlan,
    getFactoryList,
    getInventoryTotalAPI
  } from '@/api/saleOrder';

  import { getByCode } from '@/api/system/dictionary-data';
  import { parameterGetByCode } from '@/api/mainData/index';
  import dictMixins from '@/mixins/dictMixins';
  import { deepClone } from '@/utils/index';
  import { getRouteTabKey, removePageTab } from '@/utils/page-tab-util';
  import { getCode } from '@/api/codeManagement';
  import dayjs from 'dayjs';
  import { debounce } from 'lodash';
  export default {
    mixins: [dictMixins],
    components: {
      AdditionalOrder,
      ProductionVersion,
      PlanSubmit,
      ProcessRoute
    },
    data() {
      return {
        type: this.$route.query.type,
        weightList: [
          { code: 1, name: 'A' },
          { code: 2, name: 'B' },
          { code: 3, name: 'C' }
        ],
        isSlotting: [
          { code: 1, name: '是' },
          { code: 2, name: '否' }
        ], //是否开槽
        producedList: [
          { code: 2, name: '加工(MBOM)' }, //2 待确认
          { code: 3, name: '装配(ABOM)' }
        ],
        form: {
          planType: 1,
          produceRoutingId: '',
          stockCountBase: '',
          salesOrders: [],
          produceRoutingName: '',
          marginCoefficient: '1.0',
          batchNo: null,
          produceType: '',
          bomCategoryId: null,
          factoriesId: '',
          startTime: '',
          endTime: ''
        },
        marginList: [],
        bomVersionList: [],
        routingList: [],
        init: '1',
        factoryList: [],
        // 表单验证规则
        rules: {
          produceRoutingId: [
            { required: true, message: '请选择工艺路线', trigger: 'blur' }
          ],
          // startTime: [
          //   {
          //     type: 'date',
          //     required: true,
          //     message: '请选择计划开始日期',
          //     trigger: 'change'
          //   }
          // ],
          // endTime: [
          //   {
          //     type: 'date',
          //     required: true,
          //     message: '请选择计划结束日期',
          //     trigger: 'change'
          //   }
          // ],
          //   produceType: [
          //     { required: true, message: '请选择生产类型', trigger: 'blur' }
          //   ],
          //   bomCategoryId: [
          //     { required: true, message: '请选择BOM版本', trigger: 'blur' }
          //   ],
          factoriesId: [
            { required: true, message: '请选择所属工厂', trigger: 'change' }
          ]
        },
        // selection: [],
        loading: false,
        processingRequired: 0, // 生产类型跟BOM 版本是否必填 1:是 0:否
        selectionRowShow: false, // 工艺路线输入框展示 状态
        validDate
      };
    },
    props: {
      objData: {
        type: Object,
        default: {}
      }
    },

    watch: {
      objData: {
        handler(val) {
          this.requestDict('按单按库');
          this.requestDict('订单类型');
          this.requestDict('交付要求');
          this.getByCodeFn();
          this.getFactoryList();
          // 查询库存数量
          // this.inventory(val.id);
          if (val.type == 'edit') {
            this.getPlanInfo(val.id);
          } else {
            this.getSaleInfo();
          }
        },
        deep: true,
        immediate: true
      },
      'form.produceType'(newVal, oldVal) {
        console.log(newVal, '值');
      },
      form: {
        handler(newVal) {
          console.log(newVal, 'newVal 33');
        },
        deep: true,
        immediate: true
      }
    },
    mounted() {
      this.mandatoryField();
    },
    computed: {
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      },
      // 是否必填字段
      isRequired() {
        // if (this.form.planType == 5) {
        //   return false;
        // }
        return this.processingRequired == 1;
      },
      // 工艺路线 输入框展示跟选择框判断
      isRouteSelect() {
        if (this.isRequired) {
          return true;
        }
        if (!this.selectionRowShow) {
          return true;
        }
        return false;
      },

      // 选择按钮的显示
      isSelectShow() {
        // if (this.form.planType == 5) {
        //   return true;
        // }
        return this.processingRequired == 0;
      }
    },

    methods: {
      // 初始化时间赋值
      initTime() {
        let data = this.$route.query;
        if (data.startTime) {
          this.$set(this.form, 'startTime', data.startTime);
        }
        if (data.endTime) {
          this.$set(this.form, 'endTime', data.endTime);
        }
      },
      // 是否必填
      mandatoryField() {
        parameterGetByCode({
          code: 'production_plan_code'
        }).then((res) => {
          if (res) {
            this.processingRequired = res.value;
          }
        });
      },
      // 查询库存数量
      inventory(id) {},
      // 验证时间是否超期
      changeDate(item, i) {
        if (this.isTimeAGreaterThanB(item.deliveryTime, item.reqMoldTime)) {
          this.$message.error('交付时间大于了要求完成日期');
        }
      },
      isTimeAGreaterThanB(timeA, timeB) {
        return new Date(timeA) > new Date(timeB);
      },

      async getFactoryList() {
        this.factoryList = await getFactoryList();
        this.$nextTick(() => {
          this.form.factoriesId = this.factoryList[0].id;
        });
      },
      async getPlanInfo(id) {
        const data = await getUpdateInfoById(id);

        console.log(data, '订单的data');
        console.log(11111111111111111111111111111);
        this.form = data;
        this.initTime();
        // if (data.startTime) {
        //   this.form.startTime = new Date(data.startTime);
        // }
        // if (data.endTime) {
        //   this.form.endTime = new Date(data.endTime);
        // }
        if (!data.bomCategoryId || data.bomCategoryId == null) {
          this.form.produceType = '';
          this.selectionRowShow = true;
        } else {
          this.selectionRowShow = false;
        }
        if (data.salesOrders && data.salesOrders.length > 0) {
          this.form.factoriesId = data.salesOrders[0].factoriesId;
        }
        // this.form.factoriesId = data.salesOrders
        //   ? data.salesOrders[0].factoriesId
        //   : '';
        if (this.clientEnvironmentId != 4) {
          this.bomListVersion();
          //   this.getPlanRouting();
        }
        this._getInventory();
      },
      async _getInventory() {
        let code = [this.form.productCode];
        const res = await getInventoryTotalAPI(code);
        this.form.stockCountBase = res[0].stockCountBase;
      },

      getByCodeFn() {
        getByCode('margin_code').then((res) => {
          let _arr = [];
          res.data.map((item) => {
            const key = Object.keys(item)[0];
            const value = item[key];

            _arr.push({ name: key, value: value });
          });
          this.marginList = _arr;
        });
      },

      getPlanRouting() {
        if (this.form.bomCategoryId && this.form.bomCategoryId != 'null') {
          bomRoutingList(this.form.bomCategoryId).then((res) => {
            this.routingList = res || [];
            if (res.length) {
              let id = this.$route.query.produceRoutingId
                ? this.$route.query.produceRoutingId
                : res[0].id;
              this.$nextTick(() => {
                let arr = this.routingList.filter((item) => {
                  return item.id == id;
                });
                if (arr.length > 0) {
                  this.$set(this.form, 'produceRoutingId', id);
                }
              });
            }
          });
        }
      },

      bomListVersion(type) {
        console.log(type, 'type 传递的参数 33');
        let categoryId = '';

        if (this.form.salesOrders.length) {
          categoryId = this.form.salesOrders[0].categoryId;
        } else if (this.form.categoryId) {
          categoryId = this.form.categoryId;
        } else {
          new Error('缺少产品信息');
        }
        let param = {
          bomType: this.form.produceType || null,
          categoryId: categoryId
        };
        bomListByPlan(param).then((res) => {
          this.bomVersionList = res || [];
          if (res.length) {
            let o = res[0];
            if (type == 'init') {
              let query = this.$route.query;
              let id = query.bomCategoryId ? query.bomCategoryId : o.id;
              this.$set(this.form, 'bomCategoryId', id);
            } else {
              this.$set(this.form, 'bomCategoryId', o.id);
            }
            this.changeBomId();
          }
        });
      },
      changeProduceType(type) {
        console.log('111111111111111111111111');
        if (this.clientEnvironmentId == 4) {
          return false;
        }
        this.form.bomCategoryId = null;
        this.form['bomCategoryName'] = '';
        this.form['bomCategoryVersions'] = '';

        this.bomVersionList = [];

        this.routingList = [];

        this.form.produceRoutingId = '';
        this.form.produceRoutingName = '';
        this.form.produceVersionName = '';
        this.selectionRowShow = false; // ****
        if (type == 'init') {
          let queryD = this.$route.query;
          if (queryD.produceRoutingId && !queryD.bomCategoryId) {
            this.form.produceRoutingName = queryD.produceRoutingName;
            this.form.produceRoutingId = queryD.produceRoutingId;
            this.selectionRowShow = true;
          }
        }
        this.bomListVersion(type);
      },

      changeBomId() {
        this.routingList = [];
        this.form.produceRoutingId = '';
        this.form.produceRoutingName = '';
        this.form.produceVersionName = '';

        if (this.bomVersionList.length == 0) {
          this.form.bomCategoryId = '';
        }

        this.bomVersionList.forEach((f) => {
          if (f.id == this.form.bomCategoryId) {
            this.$set(this.form, 'bomCategoryName', f.name);
            this.$set(this.form, 'bomCategoryVersions', f.versions);
          }
        });

        this.getPlanRouting();
      },

      changeRoute() {
        this.$forceUpdate();
        this.routingList.forEach((f) => {
          if (f.id == this.form.produceRoutingId) {
            this.$set(this.form, 'produceRoutingName', f.name);
            this.$set(this.form, 'produceVersionName', f.version);
          }
        });
      },

      getSaleInfo() {
        let params = JSON.parse(this.$route.query.selection);
        productionToPlan(params).then((res) => {
          console.log(this.$route.query);
          this.form = deepClone(res);
          console.log(222222222222222222222222, '===');
          this.initTime();
          // this.bomListVersion('init');
          this.form.produceRoutingName =
            res.produceRoutingName || this.$route.query.produceRoutingName;
          this.form.produceRoutingId =
            res.produceRoutingId || this.$route.query.produceRoutingId;
          this.form.factoriesId =
            res.factoriesId || this.$route.query.factoriesId;
          // this.form.produceType =
          //   res.produceType || this.$route.query.produceType
          //     ? parseInt(this.$route.query.produceType)
          //     : null;
          this.form.produceType = this.$route.query.produceType
            ? parseInt(this.$route.query.produceType)
            : res.produceType;
          this.changeProduceType('init');
          this.form.bomCategoryId =
            res.bomCategoryId || this.$route.query.bomCategoryId;
          // this.changeBomId();
          if (this.clientEnvironmentId == '4') {
            if (this.form.salesOrders[0].productName.includes('板材')) {
              this.changeProduct({
                id: '1856970794952372226',
                name: '板材',
                produceVersionName: '板材'
              });
            } else {
              this.changeProduct({
                id: '1857313733642596353',
                name: '砌块',
                produceVersionName: '砌块'
              });
            }
          }
          this.form.salesOrders.map((item, index) => {
            if (this.clientEnvironmentId == '4') {
              this.tableHandleKeyUp(item, '', item.lackNum, 'sum');
            } else {
              item.planProductNum = item.lackNum;
              item.requiredFormingNum = item.lackNum;
            }
            item.slottingType = item.slottingType && item.slottingType + '';
            item.priority = index + 1;

            item.reqMoldTime = item.deliveryTime;
            // dayjs(
            //     new Date(item.deliveryTime).getTime() - 3600 * 1000 * 24 * 10
            // ).format('YYYY-MM-DD');
          });
          if (this.form.salesOrders.every((itm) => itm.orderType == 2)) {
            this.form.planType = 2;
          } else if (this.form.salesOrders.every((itm) => itm.orderType == 1)) {
            this.form.planType = 1;
          } else {
            this.form.planType = 3;
          }
          this._getInventory();
        });

        this.$forceUpdate();
      },

      itemChange() {
        this.form.salesOrders.map((item, index) => {
          this.$set(
            item,
            'requiredFormingNum',
            item.planProductNum * (this.form.marginCoefficient || 1)
          );
        });
      },

      factoriesIdFn(e) {
        this.$forceUpdate();
      },

      toInt(planProductNum) {
        return planProductNum * (this.form.marginCoefficient || 1);
      },

      cancel() {
        const key = getRouteTabKey();
        // this.$router.go(-1);
        removePageTab({ key });

        this.$emit('cancel');
      },
      toSubmit() {
        if (!this.form.factoriesId)
          return this.$message.warning('请选择所属工厂');
        this.form.salesOrders.map((v) => {
          let arrTime = v.deliveryTime && v.deliveryTime.split(' ');
          let arrTimeTow =
            v.produceDeliveryDeadline && v.produceDeliveryDeadline.split(' ');

          v.deliveryTime = arrTime && arrTime[0];
          v.produceDeliveryDeadline = arrTimeTow && arrTimeTow[0];

          // if(v.salesOrders)
        });
        if (this.form.produceType) {
          //查询生产类型
          this.form.produceVersionName = this.producedList.find(
            (v) => v.code == this.form.produceType
          )?.name;
        }
        if (this.form.produceRoutingId && !this.form.produceRoutingName) {
          //查询工艺路线
          this.form.produceRoutingName = this.routingList.find(
            (v) => v.id == this.form.produceRoutingId
          ).name;
        }
        if (this.form.factoriesId) {
          //查询工厂名称
          this.form.factoriesIdName = this.factoryList.find(
            (v) => v.id == this.form.factoriesId
          )?.name;
        }
        // let data = this.form.salesOrders[0];

        if (this.form.salesOrders.length > 1) {
          //多条订单时，拼接批次号(订单数量)
          let arr = [];
          this.form.salesOrders.map((v) => {
            if (v.batchNo) {
              arr.push(v.batchNo);
            }
          });
          this.form.batchNo = arr.toString();
        } else {
          // ((data.productSumWeight /contractNum)  * data.planProductNum).toFixed(2);
          this.form.batchNo = this.form.salesOrders[0].batchNo;
        }
        let newSumOrderWeight = 0;
        this.form.salesOrders &&
          this.form.salesOrders.map((el) => {
            let total = (
              (el.productSumWeight / el.contractNum) *
              el.planProductNum
            ).toFixed(2);
            newSumOrderWeight = newSumOrderWeight + (total - 0);
          });
        this.form.newSumOrderWeight = newSumOrderWeight;
        let flag = this.parameterVerification();
        // 必填参数校验
        if (!flag) return;
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.mapList();

            this.$refs.submitRefs.open();
          }
        });
      },
      // 参数校验
      parameterVerification() {
        let flag = true;
        if (!this.form.startTime) {
          this.$message.warning('请选择计划开始时间');
          return false;
        }
        if (!this.form.endTime) {
          this.$message.warning('请选择计划结束时间');
          return false;
        }

        if (this.isRequired) {
          if (!this.form.produceType) {
            flag = false;
            this.$message.warning('请选择生产类型');
            return;
          }

          if (!this.form.bomCategoryId) {
            flag = false;
            this.$message.warning('请选择BOM版本');
            return;
          }
        }

        if (!this.form.produceRoutingId) {
          flag = false;
          this.$message.warning('请选择工艺路线');
          return;
        }
        return flag;
      },
      // 对比日期，计算要求生产重量
      mapList() {
        var _sumOrderWeight = 0;
        var requiredFormingNum = 0;
        var productNum = 0;
        this.form.salesOrders.map((item, index) => {
          requiredFormingNum =
            Number(requiredFormingNum) + Number(item.requiredFormingNum);

          if (
            this.form.weightUnit == 'G' ||
            this.form.weightUnit == 'g' ||
            this.form.weightUnit == '克'
          ) {
            this.form.newWeightUnit = 'KG';
            _sumOrderWeight = this.form.newSumOrderWeight / 1000;
            // _sumOrderWeight =
            //   (this.form.salesOrders[0].requiredFormingNum *
            //     Number(this.form.salesOrders[0].productUnitWeight || 1)) /
            //   1000;
          } else {
            this.form.newWeightUnit = this.form.weightUnit;
            _sumOrderWeight = this.form.newSumOrderWeight;
            // _sumOrderWeight =
            //   this.form.salesOrders[0].requiredFormingNum *
            //   Number(this.form.salesOrders[0].productUnitWeight || 1);
          }

          productNum += Number(item.planProductNum);
        });
        this.form.productNum = productNum;
        this.form.productUnitWeight =
          this.form.salesOrders[0]?.productUnitWeight;
        this.form.newSumOrderWeight = _sumOrderWeight.toFixed(2);
        this.form.requiredFormingNum = requiredFormingNum;
        const collection = deepClone(this.form.salesOrders);
        const sortedCollection = collection.sort(
          (a, b) => new Date(b.reqMoldTime) - new Date(a.reqMoldTime)
        );

        let latestData = {};
        for (let i = 0; i < sortedCollection.length; i++) {
          const data = sortedCollection[i];
          if (
            !latestData.reqMoldTime ||
            new Date(data.reqMoldTime) >= new Date(latestData.reqMoldTime)
          ) {
            latestData = data;
          }
        }
        this.form.reqMoldTime = latestData.reqMoldTime;
      },

      sortTop(row) {
        row.priority = Number(row.priority) + 1;
        this.priorityChange(row);
      },
      sortBottom(row) {
        if (row.priority <= 1) {
          return;
        }
        row.priority = Number(row.priority) - 1;
        this.priorityChange(row);
      },

      priorityChange(row) {
        if (row.priority > 10) {
          row.priority = 10; // 如果大于 10，则设置为 10
        } else if (row.priority < 0) {
          row.priority = 0; // 如果小于 0，则设置为 0
        }

        this.priorityFn(row);
      },

      priorityFn: debounce(function (row) {}, 800),

      // 删除产品
      handleDeleteItem(index) {
        this.form.salesOrders.splice(index, 1);
        this.changeData();
      },
      addEquipment() {
        let query = this.$route.query;
        let orderType = query.orderType;
        let arr = this.form.salesOrders;
        if (arr && arr.length > 0) {
          if (!orderType && orderType !== '0') {
            orderType = arr[0].orderType;
          }
        }
        this.$refs.additionalRefs.open(orderType);
      },
      openVersion() {
        this.$refs.versionRefs.open();
      },
      changeProduct(data) {
        this.$set(this.form, 'produceRoutingName', data.name);
        this.$set(this.form, 'produceRoutingId', data.id);
        this.$set(this.form, 'produceVersionName', data.produceVersionName);
      },
      // 表格：模数、数量(方)、块数输入框 输入事件
      tableHandleKeyUp(row, index, e, name) {
        if (row.specification && this.clientEnvironmentId == '4') {
          let modelArr = row.specification.split('*');
          let modelLong = modelArr[0]; // model规格长度
          let modeWide = modelArr[1]; // model规格宽度
          let modeHight = modelArr[2].substr(0, modelArr[2].indexOf('cm')); // model规格高度
          modeHight = Number(modeHight);
          if (name === 'moCount') {
            // 模数
            row.moCount = e;
            // 计算块数的公式：
            // (一模6米长度 / model规格长度) * (一模1.2米宽度 / model规格宽度) = 每一模的块数
            // 每一模的块数*模数moCount = 总块数
            if (row.productName.includes('板材')) {
              row.blockCount =
                Math.floor(600 / modelLong) *
                Math.floor(120 / modeHight) *
                Math.floor(60 / modeWide) *
                row.moCount;
            } else if (row.productName.includes('砌块')) {
              let modelLongFixed = (600 / modelLong).toFixed(2);
              modelLongFixed = modelLongFixed.substring(
                0,
                modelLongFixed.length - 1
              );
              let modeWideFixed = (120 / modeWide).toFixed(2);
              modeWideFixed = modeWideFixed.substring(
                0,
                modeWideFixed.length - 1
              );
              let modeHightFixed = (60 / modeHight).toFixed(2);
              modeHightFixed = modeHightFixed.substring(
                0,
                modeHightFixed.length - 1
              );
              row.blockCount =
                Math.floor(modelLongFixed * modeWideFixed * modeHightFixed) *
                row.moCount;
            }

            row.planProductNum =
              Number((modelLong * modeWide * modeHight) / 1000000).toFixed(5) *
              row.blockCount;
          } else if (name === 'sum') {
            //方数
            row.planProductNum = e;

            row.blockCount = Math.floor(
              e / ((modelLong * modeWide * modeHight) / 1000000)
            );
            if (row.productName.includes('板材')) {
              row.moCount = Math.ceil(
                row.blockCount /
                  (Math.floor(600 / modelLong) *
                    Math.floor(120 / modeHight) *
                    Math.floor(60 / modeWide))
              );
            } else if (row.productName.includes('砌块')) {
              row.moCount = Math.ceil(
                row.blockCount /
                  Math.floor(
                    (600 / modelLong) * (120 / modeHight) * (60 / modeWide)
                  )
              );
            }
          } else if (name === 'blockCount') {
            //块数
            row.blockCount = e;

            if (row.productName.includes('板材')) {
              row.moCount = Math.ceil(
                row.blockCount /
                  (Math.floor(600 / modelLong) *
                    Math.floor(120 / modeHight) *
                    Math.floor(60 / modeWide))
              );
            } else if (row.productName.includes('砌块')) {
              row.moCount = Math.ceil(
                row.blockCount /
                  Math.floor(
                    (600 / modelLong) * (120 / modeHight) * (60 / modeWide)
                  )
              );
            }

            row.planProductNum =
              (Number(e) * modelLong * modeWide * modeHight) / 1000000;
          }
        }

        row.requiredFormingNum = Number(
          row.planProductNum * (this.form.marginCoefficient || 1)
        ).toFixed(5);
      },
      confirmChoose(list) {
        // 取出在弹窗中选中并且不在表格中的数据
        const result = list.filter(
          (i) => this.form.salesOrders.findIndex((p) => p.id === i.id) === -1
        );
        // 取出在表格中并且不在弹窗中选中的数据 即取消选中的数据
        const del = this.form.salesOrders.filter(
          (i) => list.findIndex((p) => p.id === i.id) === -1
        );
        for (let i = this.form.salesOrders.length - 1; i >= 0; i--) {
          for (let j in del) {
            if (this.form.salesOrders[i].id === del[j].id) {
              this.form.salesOrders.splice(i, 1);
            }
          }
        }
        let priority =
          this.form.salesOrders[this.form.salesOrders.length - 1]?.priority ||
          0;
        this.form.salesOrders = this.form.salesOrders.concat(
          result.map((item, index) => {
            item.priority = ++priority;

            item.planProductNum = item.lackNum;
            item.requiredFormingNum = item.lackNum;
            item.reqMoldTime = dayjs(
              new Date(item.deliveryTime).getTime() - 3600 * 1000 * 24 * 10
            ).format('YYYY-MM-DD');
            return item;
          })
        );
        this.changeData();
      },
      changeData() {
        var planProductNum = 0;
        var productWeight = 0;

        this.form.salesOrders.map((item, index) => {
          item.priority = index + 1;
          planProductNum = planProductNum + item.requiredFormingNum;
          productWeight = productWeight + Number(item.productSumWeight);
        });
        this.$set(this.form, 'codeNum', this.form.salesOrders.length);
        this.$set(this.form, 'contractNum', planProductNum);
        this.$set(this.form, 'sumOrderWeight', productWeight.toFixed(2));
      },

      async publishData(type) {
        const key = getRouteTabKey();
        let params = deepClone(this.form);
        params.categoryId = params.salesOrders[0]?.categoryId;
        if (this.$route.query.type != 'edit') {
          delete params.id;
        }

        if (type === 2) {
          this.$confirm('发布工单后不可撤回，确定发布吗？', '发布确认').then(
            async () => {
              const loading = this.$loading({
                lock: true,
                fullscreen: true,
                text: '工单发布中...'
              });
              try {
                const code = await getCode('product_order_code');
                const data = {
                  productionPlan: params,
                  workOrder: {
                    productionPlanCode: params.code,
                    code: code,
                    // formingNum: params.contractNum,
                    formingNum: this.form.requiredFormingNum,
                    formingWeight: params.sumOrderWeight,
                    produceRoutingId: params.produceRoutingId,
                    status: 4,
                    model: params.model,
                    brandNo: params.brandNo,
                    categoryId: params.categoryId,
                    productCode: params.productCode,
                    productName: params.productName,

                    newWeightUnit: this.form.newWeightUnit,
                    newSumOrderWeight: this.form.newSumOrderWeight
                  }
                };
                if (this.$route.query.type == 'edit') {
                  data.workOrder.productionPlanId = params.id;
                }
                await releaseSave(data)
                  .then((res) => {
                    if (res === 1) {
                      this.$message.success('工单已发布！');
                      this.$router.push({
                        path: '/productionPlan'
                      });
                    } else {
                      this.$confirm(
                        '生产计划创建成功，但工单发布失败。请前往【生产计划】列表【重新发布】工单',
                        '提示',
                        {
                          confirmButtonText: '返回',
                          cancelButtonText: '立即前往',
                          type: 'warning'
                        }
                      )
                        .then(() => {
                          this.$router.push({
                            path: '/productionPlan'
                          });
                        })
                        .catch(() => {
                          this.$router.go(-1);
                        });
                    }
                    removePageTab({ key });
                  })
                  .catch(() => {
                    this.$message.error('发布失败，请重新发布！');
                  });
              } catch (error) {}

              loading.close();
            }
          );
        } else {
          let request =
            this.$route.query.type == 'edit'
              ? updateSaleToPlan
              : saveSaleToPlan;

          request(params)
            .then(async (res) => {
              // 提交
              this.$router.push({
                path: '/productionPlan'
              });
              removePageTab({ key });
            })
            .catch(() => {
              this.$message.error('提交失败，请重新提交！');
            });
        }
      },

      // 打开工艺路线
      openDialog() {
        // this.selectIndex = index;
        this.$refs.processRouteRef.open();
      },
      // 选择工艺路线
      changeParent(item) {
        this.routingList = [];
        this.bomVersionList = [];
        this.$set(this.form, 'bomCategoryId', null);
        this.$set(this.form, 'model', '');
        this.$set(this.form, 'produceType', '');
        this.$set(this.form, 'produceRoutingName', item.name);
        this.$set(this.form, 'produceRoutingId', item.id);
        this.form.bomCategoryName = '';
        this.form.bomCategoryVersions = '';
        this.selectionRowShow = true;
      },
      // 【开始时间变化时】触发
      handleStartTimeChange(row) {
        this.checkEndTimeValid(row);
      },

      // 【结束时间变化时】触发
      handleEndTimeChange(row) {
        this.checkEndTimeValid(row);
      },

      checkEndTimeValid(row) {
        const { startTime: start, endTime: end } = row;
        if (!start || !end) return; // 开始/结束时间未填，跳过
        const startTime = new Date(start);
        const endTime = new Date(end);
        if (endTime < startTime) {
          row.endTime = new Date(startTime); // 修正为开始时间
          this.$message.info('结束时间不能早于开始时间，已自动设为开始时间');
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .ele-body {
    background: #fff;
  }

  .body-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .title-left {
    font-size: 20px;
    color: #333;
  }

  .formbox {
    margin: 20px auto;
  }

  .row-intro {
    border-bottom: 1px dashed #ccc;
    margin-bottom: 20px;
  }

  .add-product {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 30px;
    color: #1890ff;
    margin: 10px 0;
    cursor: pointer;
  }

  .table-item {
    margin-bottom: 0;
  }

  .header_required {
    position: relative;
  }

  .header_required:before {
    content: '*';
    color: #f56c6c;
    position: absolute;
    top: 11px;
    left: 26px;
  }

  .header_time_required {
    position: relative;
  }

  .header_time_required:before {
    content: '*';
    color: #f56c6c;
    position: absolute;
    top: 11px;
    left: 2px;
  }

  ::v-deep .product_info {
    .el-form-item--medium {
      .el-form-item__label {
        line-height: 26px;
      }
      .el-form-item__content {
        line-height: 26px;
      }
    }

    .product_code_name {
      .el-form-item__content {
        white-space: normal;
        word-break: break-all;
      }
    }
  }
</style>