crm_extend/src/pages/indent-manage/indent/components/info.vue

<template>
  <div class="component-edit-indent-info">
    <el-dialog
      v-model="show"
      class="custom-edit-indent-info-dialog"
      :title="visible === 1 ? '录入报价信息' : '录入报价信息'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="close"
      width="1300px"
    >
      <div style="color: #ef4135">* 为了报价单的内容，请填写英文信息</div>

      <div class="form-table">
        <div class="flex items-stretch form-header">
          <div class="first-label"></div>
          <div class="second-label">操作</div>
          <div
            v-for="(item, index) in forms"
            :key="index"
            class="input-area flex justify-center items-center"
          >
            <el-button
              v-show="forms.length > 1"
              size="small"
              type="danger"
              link
              plain
              @click="deleteForm(index)"
            >
              {{ $t('btn_delete') }}
            </el-button>
          </div>
        </div>
        <div class="flex items-stretch">
          <div class="first-label flex justify-center items-center">
            {{ $t(prefix + 'label_supplier') }}
          </div>
          <div class="flex flex-col items-stretch">
            <div class="flex items-center">
              <div class="second-label required">
                {{ $t(prefix + 'label_company_name') }}
              </div>
              <el-form
                v-for="(item, index) in forms"
                :ref="($e) => getFormRef($e, `vendor_id_${index}`)"
                :key="index"
                :show-message="false"
                :model="item"
              >
                <div class="input-area">
                  <el-form-item
                    prop="vendor_id"
                    :rules="{ required: true, validator: commonCheck }"
                  >
                    <el-select
                      v-model="item.vendor_id"
                      :remote-method="($e: any) => queryVenderList($e, index)"
                      filterable
                      allow-create
                      remote
                      style="width: 100%"
                      placeholder="请选择供应商"
                      @change="($e) => changeVenderSelect($e, index)"
                    >
                      <el-option
                        v-for="option in vendorList[index]"
                        :key="option.id"
                        :value="option.id"
                        :label="option.name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <div
                    v-if="index < forms.length - 1"
                    class="btn-copy"
                    @click.self="commonCopyFormItem(index, 'vendor_id')"
                  >
                    &gt;&gt;&gt;
                  </div>
                </div>
              </el-form>
            </div>

            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_supplier_type') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.vendor_type"
                  placeholder="请输入供应商类型"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'vendor_type')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>

            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_wangwang_year') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.vendor_wangwang_old"
                  placeholder="请输入旺旺年份"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'vendor_wangwang_old')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>

            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_contact') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.vendor_contact"
                  placeholder="请输入联系人"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'vendor_contact')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>

            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_phone') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.vendor_phone"
                  placeholder="请输入电话"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'vendor_phone')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex items-stretch">
          <div class="first-label flex justify-center items-center">
            {{ $t(prefix + 'label_product_info') }}
          </div>

          <div class="flex flex-col items-stretch">
            <div class="flex items-stretch">
              <div class="second-label required">
                {{ $t(prefix + 'label_product_name') }}
              </div>
              <el-form
                v-for="(item, index) in forms"
                :ref="($e) => getFormRef($e, `product_name_${index}`)"
                :key="index"
                :show-message="false"
                :model="item"
              >
                <div class="input-area">
                  <el-form-item
                    prop="product_name"
                    :rules="{
                      required: true,
                      trigger: 'change',
                      validator: commonCheck,
                    }"
                  >
                    <el-input
                      v-model="item.product_name"
                      placeholder="请输入产品名称"
                    ></el-input>
                  </el-form-item>
                  <div
                    v-if="index < forms.length - 1"
                    class="btn-copy"
                    @click.self="commonCopyFormItem(index, 'product_name')"
                  >
                    &gt;&gt;&gt;
                  </div>
                </div>
              </el-form>
            </div>

            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_product_url') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_url"
                  placeholder="请输入产品链接"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'product_url')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_product_image') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <image-upload
                  v-model:list="productImageList[index]"
                  width="100px"
                  height="100px"
                  :disable-preview="true"
                ></image-upload>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'productImageList')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_size') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_size"
                  placeholder="请输入尺寸"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'product_size')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_product_hd') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_hd"
                  placeholder="请输入厚度"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'product_hd')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_capacity') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_capacity"
                  placeholder="请输入容量"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'product_capacity')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_material') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_material"
                  placeholder="请输入材质"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'product_material')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_battery') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_battery"
                  placeholder="是否带电池"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'product_battery')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_print_require') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_require_print"
                  placeholder="请输入要求"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="
                    commonCopyFormItem(index, 'product_require_print')
                  "
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_color') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_color"
                  placeholder="请输入颜色"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'product_color')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_color_require') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_require_color"
                  placeholder="请输入颜色定制要求"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="
                    commonCopyFormItem(index, 'product_require_color')
                  "
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_other') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.product_other"
                  placeholder="其他信息"
                  type="textarea"
                  :rows="3"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'product_other')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flex items-stretch">
          <div class="first-label flex justify-center items-center">
            {{ $t(prefix + 'label_factory_price') }}
          </div>
          <div class="flex flex-col items-stretch">
            <div class="flex items-stretch">
              <div class="second-label required">
                {{ $t(prefix + 'label_number_table') }}
              </div>
              <el-form
                v-for="(item, index) in forms"
                :ref="($e) => getFormRef($e, `number_${index}`)"
                :key="index"
                :show-message="false"
                :model="item"
              >
                <div class="input-area">
                  <div class="sub-table">
                    <div class="sub-table-head flex items-center">
                      <div class="sub-table-number">数量</div>
                      <div class="sub-table-price">单价(RMB)</div>
                      <div class="sub-table-days">天数</div>
                    </div>

                    <div
                      v-for="(i, subIndex) in item.number"
                      :key="subIndex"
                      class="sub-table-row flex items-center"
                    >
                      <div class="sub-table-number">
                        <el-form-item
                          :prop="'number.' + subIndex"
                          :rules="{
                            required: true,
                            validator: commonCheck,
                          }"
                        >
                          <el-input v-model="item.number[subIndex]"></el-input>
                        </el-form-item>
                      </div>

                      <div class="sub-table-price">
                        <el-form-item
                          :prop="'price.' + subIndex"
                          :rules="{
                            required: true,
                            validator: commonCheck,
                          }"
                        >
                          <el-input v-model="item.price[subIndex]"></el-input>
                        </el-form-item>
                      </div>

                      <div class="sub-table-days">
                        <el-form-item
                          :prop="'days.' + subIndex"
                          :rules="{
                            required: true,
                            validator: commonCheck,
                          }"
                        >
                          <el-input v-model="item.days[subIndex]"></el-input>
                        </el-form-item>
                      </div>
                      <div class="sub-table-btn-delete">
                        <div
                          v-show="item.number.length > 1"
                          @click="numberTableDeleteRow(index, subIndex)"
                        >
                          <el-icon size="18">
                            <CircleCloseFilled></CircleCloseFilled>
                          </el-icon>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="sub-table-btn-add">
                    <el-button
                      size="small"
                      @click="numberTableAddRow(index)"
                    >
                      + 添加价格信息
                    </el-button>
                  </div>
                  <div
                    v-if="index < forms.length - 1"
                    class="btn-copy"
                    style="bottom: 4px; top: unset"
                    @click.self="commonCopyFormItem(index, 'numberItem')"
                  >
                    &gt;&gt;&gt;
                  </div>
                </div>
              </el-form>
            </div>

            <div class="flex items-stretch">
              <div class="second-label required">
                {{ $t(prefix + 'label_extra_fee') }}
              </div>

              <el-form
                v-for="(item, index) in forms"
                :ref="($e) => getFormRef($e, `cost_${index}`)"
                :key="index"
                :show-message="false"
                :model="item"
              >
                <div class="input-area">
                  <div class="sub-table">
                    <div class="sub-table-head flex items-center">
                      <div class="sub-table-cost-name">项目</div>
                      <div class="sub-table-cost-price">价格(RMB)</div>
                    </div>
                    <div
                      v-for="(i, subIndex) in item.cost_name"
                      :key="subIndex"
                      class="sub-table-row flex items-center"
                    >
                      <div class="sub-table-cost-name">
                        <el-form-item
                          :prop="'cost_name.' + subIndex"
                          :rules="{
                            required: true,
                            validator: commonCheck,
                          }"
                        >
                          <el-select
                            v-model="item.cost_name[subIndex]"
                            size="small"
                          >
                            <el-option
                              v-for="option in costOptions"
                              :key="option.label"
                              :label="option.label"
                              :value="option.value"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </div>

                      <div class="sub-table-cost-price">
                        <el-form-item
                          :prop="'cost_price.' + subIndex"
                          :rules="{
                            required: true,
                            validator: commonCheck,
                          }"
                        >
                          <el-input
                            v-model="item.cost_price[subIndex]"
                          ></el-input>
                        </el-form-item>
                      </div>

                      <div class="sub-table-btn-delete">
                        <el-button
                          :disabled="item.cost_name.length < 2"
                          type="danger"
                          size="small"
                          plain
                          @click="costTableDeleteRow(index, subIndex)"
                        >
                          {{ $t('btn_delete') }}
                        </el-button>
                      </div>
                    </div>
                  </div>

                  <div class="sub-table-btn-add">
                    <el-button
                      size="small"
                      @click="costTableAddRow(index)"
                    >
                      + 添加价格信息
                    </el-button>
                  </div>
                  <div
                    v-if="index < forms.length - 1"
                    class="btn-copy"
                    style="bottom: 4px; top: unset"
                    @click.self="commonCopyFormItem(index, 'cost')"
                  >
                    &gt;&gt;&gt;
                  </div>
                </div>
              </el-form>
            </div>
          </div>
        </div>

        <div class="flex items-stretch">
          <div class="first-label flex justify-center items-center">
            {{ $t(prefix + 'label_package_info') }}
          </div>

          <div class="flex flex-col items-stretch">
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_package') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.package_info"
                  placeholder="请输入产品包装信息"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'package_info')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>

            <div class="flex flex-col items-stretch">
              <div class="flex items-stretch">
                <div class="second-label required">
                  {{ $t(prefix + 'label_gross_weight') }}(KG)
                </div>

                <el-form
                  v-for="(item, index) in forms"
                  :ref="($e) => getFormRef($e, `package_weight_${index}`)"
                  :key="index"
                  :show-message="false"
                  :model="item"
                >
                  <div class="input-area">
                    <el-form-item
                      prop="package_weight"
                      :rules="{ required: true, validator: commonCheck }"
                    >
                      <el-input
                        v-model="item.package_weight"
                        placeholder="请输入每箱毛重"
                      ></el-input>
                    </el-form-item>
                    <div
                      v-if="index < forms.length - 1"
                      class="btn-copy"
                      @click.self="commonCopyFormItem(index, 'package_weight')"
                    >
                      &gt;&gt;&gt;
                    </div>
                  </div>
                </el-form>
              </div>

              <div class="flex items-stretch">
                <div class="second-label required">
                  {{ $t(prefix + 'label_package_size') }}(CM)
                </div>
                <el-form
                  v-for="(item, index) in forms"
                  :ref="($e) => getFormRef($e, `package_size_${index}`)"
                  :key="index"
                  :show-message="false"
                  :model="item"
                >
                  <div class="input-area flex justify-center items-center">
                    <el-form-item
                      prop="package_size_length"
                      :rules="{
                        required: true,
                        trigger: 'change',
                        validator: commonCheck,
                      }"
                    >
                      <el-input
                        v-model="item.package_size_length"
                        style="width: 74px"
                        placeholder="长"
                      ></el-input>
                    </el-form-item>
                    <el-icon size="18">
                      <Close></Close>
                    </el-icon>
                    <el-form-item
                      prop="package_size_width"
                      :rules="{
                        required: true,
                        trigger: 'change',
                        validator: commonCheck,
                      }"
                    >
                      <el-input
                        v-model="item.package_size_width"
                        style="width: 74px"
                        placeholder="宽"
                      ></el-input>
                    </el-form-item>
                    <el-icon size="18">
                      <Close></Close>
                    </el-icon>
                    <el-form-item
                      prop="package_size_height"
                      :rules="{
                        required: true,
                        trigger: 'change',
                        validator: commonCheck,
                      }"
                    >
                      <el-input
                        v-model="item.package_size_height"
                        style="width: 74px"
                        placeholder="高"
                      ></el-input>
                    </el-form-item>
                    <span>&nbsp;CM</span>
                    <div
                      v-if="index < forms.length - 1"
                      class="btn-copy"
                      @click.self="commonCopyFormItem(index, 'package_size')"
                    >
                      &gt;&gt;&gt;
                    </div>
                  </div>
                </el-form>
              </div>

              <div class="flex items-stretch">
                <div class="second-label required">
                  {{ $t(prefix + 'label_pcs') }}(PCS)
                </div>

                <el-form
                  v-for="(item, index) in forms"
                  :ref="($e) => getFormRef($e, `in_package_${index}`)"
                  :key="index"
                  :show-message="false"
                  :model="item"
                >
                  <div class="input-area">
                    <el-form-item
                      prop="in_package"
                      :rules="{
                        required: true,
                        trigger: 'change',
                        validator: commonCheck,
                      }"
                    >
                      <el-input
                        v-model="item.in_package"
                        placeholder="PCS"
                      ></el-input>
                    </el-form-item>
                    <div
                      v-if="index < forms.length - 1"
                      class="btn-copy"
                      @click.self="commonCopyFormItem(index, 'in_package')"
                    >
                      &gt;&gt;&gt;
                    </div>
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </div>

        <div class="flex items-stretch">
          <div class="first-label flex justify-center items-center">
            {{ $t(prefix + 'label_example') }}
          </div>
          <div class="flex flex-col items-stretch">
            <div class="flex items-stretch">
              <div class="second-label required">
                {{ $t(prefix + 'label_example_days') }}(Days)
              </div>

              <el-form
                v-for="(item, index) in forms"
                :ref="($e) => getFormRef($e, `demo_days_${index}`)"
                :key="index"
                :show-message="false"
                :model="item"
              >
                <div class="input-area">
                  <el-form-item
                    prop="demo_days"
                    :rules="{
                      required: true,
                      trigger: 'change',
                      validator: commonCheck,
                    }"
                  >
                    <el-input
                      v-model="item.demo_days"
                      placeholder="天数"
                    ></el-input>
                  </el-form-item>
                  <div
                    v-if="index < forms.length - 1"
                    class="btn-copy"
                    @click.self="commonCopyFormItem(index, 'demo_days')"
                  >
                    &gt;&gt;&gt;
                  </div>
                </div>
              </el-form>
            </div>

            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_example_cost') }}(￥)
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.demo_cost"
                  placeholder="请输入打样费用"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'demo_cost')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_can_refund') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.demo_return"
                  placeholder="请输入退费信息"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'demo_return')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex items-stretch">
          <div class="first-label flex justify-center items-center"></div>
          <div class="flex flex-col items-stretch">
            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_cert') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.cert"
                  placeholder="证书"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'cert')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>

            <div class="flex items-stretch">
              <div class="second-label">
                {{ $t(prefix + 'label_comment') }}
              </div>
              <div
                v-for="(item, index) in forms"
                :key="index"
                class="input-area"
              >
                <el-input
                  v-model="item.notes"
                  placeholder="请输入内容"
                  type="textarea"
                  :rows="3"
                ></el-input>
                <div
                  v-if="index < forms.length - 1"
                  class="btn-copy"
                  @click.self="commonCopyFormItem(index, 'notes')"
                >
                  &gt;&gt;&gt;
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        v-show="canAddForm"
        class="btn-add-indent-info flex justify-center flex-col items-center"
        @click="addFormColumn"
      >
        <el-icon
          size="42"
          class="el-icon-circle-plus-outline"
        >
          <CirclePlus></CirclePlus>
        </el-icon>
        <div>
          {{ $t(prefix + 'btn_add_info') }}
        </div>
      </div>
      <template #footer>
        <div class="flex justify-center items-center">
          <!-- v-show="$showAuthBtn(429)" -->
          <el-button
            type="primary"
            size="small"
            @click="checkForm"
          >
            {{ $t('btn_save') }}
          </el-button>
          <el-button
            type=""
            size="small"
            @click="close"
          >
            {{ $t('btn_close') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch, computed, nextTick, inject } from 'vue'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElDialog,
  ElNotification,
  ElMessage,
  ElIcon,
} from 'element-plus'
import { CirclePlus, Close, CircleCloseFilled } from '@element-plus/icons-vue'
import debounce from 'lodash.debounce'
import cloneDeep from 'lodash.clonedeep'
import { $t } from '@/i18n/index'
import imageUpload from '@/components/ImageUpload.vue'
// 用来对oss的图片、视频等媒体数据的url进行匹配替换
import { getVendorList, createQuote } from '@/api/indent'

defineComponent({
  name: 'EditInfo',
})
const $emit = defineEmits(['update:visible', 'create'])
const {
  visible = 0,
  alreadyHasIndentCount = 0,
  parentId = 0,
  dataForEdit = { vendor_name: '' } as any,
} = defineProps<{
  visible: number
  alreadyHasIndentCount?: number
  parentId?: number | string
  dataForEdit?: object
}>()
const $mediaRegExp = inject('mediaRegExp') as RegExp
const prefix = 'order.indent_edit_info.'
const show = ref(false)
const costOptions = [
  {
    label: $t('text_please_select'),
    value: '',
  },
  {
    label: '样品费用',
    value: '样品费用',
  },
  {
    label: '印刷费用',
    value: '印刷费用',
  },
  {
    label: '模具费用',
    value: '模具费用',
  },
  {
    label: '制版费用',
    value: '制版费用',
  },
  {
    label: '染色费用',
    value: '染色费用',
  },
  {
    label: '其他费用',
    value: '其他费用',
  },
]
const formDemo = {
  // 供应商
  vendor_name: '',
  vendor_id: '',
  vendor_type: '',
  vendor_wangwang_old: '',
  vendor_contact: '',
  vendor_phone: '',

  // 产品信息
  product_name: '',
  product_url: '',
  product_image: '',
  product_size: '',
  product_hd: '',
  product_capacity: '',
  product_material: '',
  product_battery: '',
  product_require_print: '',
  product_color: '',
  product_require_color: '',
  product_other: '',

  // 出厂价
  number: [''],
  price: [''],
  days: [''],
  cost_name: [''],
  cost_price: [''],

  // 包装信息
  package_info: '',
  package_size_length: '',
  package_size_width: '',
  package_size_height: '',
  package_weight: '',
  in_package: '', // 一箱个数

  // 打样情况
  demo_days: '',
  demo_cost: '',
  demo_return: '',

  cert: '',
  notes: '',
}
const forms = ref<any[]>([])
const canAddForm = computed(() => {
  return 100 - alreadyHasIndentCount - forms.value.length > 0
})
const productImageList = ref([] as any[][])
const vendorList = ref([] as any[][])
const manualVendor = ref({} as any)

const commonCopyFormItem = function (index: number, key: string) {
  if (['vendor_id', 'vendor_name', 'vendor_phone'].includes(key)) {
    vendorList.value.splice(index + 1, 1, cloneDeep(vendorList.value[index]))
    forms.value[index + 1].vendor_name = forms.value[index].vendor_name
    forms.value[index + 1].vendor_phone = forms.value[index].vendor_phone
    forms.value[index + 1].vendor_id = forms.value[index].vendor_id
  } else if (key === 'productImageList') {
    productImageList.value.splice(
      index + 1,
      1,
      cloneDeep(productImageList.value[index]),
    )
  } else if (key === 'cost') {
    // 额外费用
    forms.value[index + 1].cost_name = cloneDeep(forms.value[index].cost_name)
    forms.value[index + 1].cost_price = cloneDeep(forms.value[index].cost_price)
  } else if (key === 'numberItem') {
    // 数量 单价
    forms.value[index + 1].number = cloneDeep(forms.value[index].number)
    forms.value[index + 1].price = cloneDeep(forms.value[index].price)
    forms.value[index + 1].days = cloneDeep(forms.value[index].days)
  } else if (key === 'package_size') {
    // 外箱规格
    forms.value[index + 1].package_size_length = cloneDeep(
      forms.value[index].package_size_length,
    )
    forms.value[index + 1].package_size_width = cloneDeep(
      forms.value[index].package_size_width,
    )
    forms.value[index + 1].package_size_height = cloneDeep(
      forms.value[index].package_size_height,
    )
  } else {
    forms.value[index + 1][key] = forms.value[index][key]
  }
}
const costTableDeleteRow = function (index: number, subIndex: number) {
  forms.value[index].cost_name.splice(subIndex, 1)
  forms.value[index].cost_price.splice(subIndex, 1)
}
const costTableAddRow = function (index: number) {
  forms.value[index].cost_name.push('')
  forms.value[index].cost_price.push('')
}
const numberTableDeleteRow = function (index: number, subIndex: number) {
  forms.value[index].number.splice(subIndex, 1)
  forms.value[index].price.splice(subIndex, 1)
  forms.value[index].days.splice(subIndex, 1)
}
const numberTableAddRow = function (index: number) {
  forms.value[index].number.push('')
  forms.value[index].price.push('')
  forms.value[index].days.push('')
}
// 仅编辑报价信息时需要初始化
const initData = function () {
  // 查询供应商候选列表, 不然下拉框无数据匹配, 下拉框界面上会显示成供应商的id
  queryVenderList(dataForEdit.vendor_name, 0)

  const temp = cloneDeep(dataForEdit)

  productImageList.value.push([])
  if (Array.isArray(temp.product_image) && temp.product_image.length) {
    nextTick(() => {
      productImageList.value.splice(
        0,
        1,
        temp.product_image.map((img: string) => {
          return {
            url: $mediaRegExp.test(img)
              ? img
              : import.meta.env.VITE_APP_OSS_PREFIX + img,
          }
        }),
      )
    })
  }

  if (temp.cost_list && temp.cost_list.length > 2) {
    const t = JSON.parse(temp.cost_list)
    temp.cost_name = []
    temp.cost_price = []

    t.forEach((item: any) => {
      temp.cost_name.push(item.cost_name)
      temp.cost_price.push(item.cost_price)
    })
  } else {
    // 如果cost_list字符串长度小于2, 说明该数组为空, 删除temp的对应字段, 避免覆盖掉formDemo的克隆值.
    delete temp.cost_name
    delete temp.cost_price
  }

  if (temp.price_list && temp.price_list.length > 2) {
    const t = JSON.parse(temp.price_list)
    temp.number = []
    temp.price = []
    temp.days = []

    t.forEach((item: any) => {
      temp.number.push(item.number)
      temp.price.push(item.price)
      temp.days.push(item.days)
    })
  } else {
    // 如果 price_list 字符串长度小于2, 说明该数组为空, 删除temp的对应字段, 避免覆盖掉formDemo的克隆值.
    delete temp.cost_name
    delete temp.cost_price
  }

  temp.entity_id = temp.id

  // 删除无用字段避免接口报错
  delete temp.id
  // delete temp.parent_id
  delete temp.create_time
  delete temp.update_time
  delete temp.creator
  delete temp.admin_id

  forms.value.push(Object.assign({}, cloneDeep(formDemo), temp))
}
const deleteForm = function (index: number) {
  forms.value.splice(index, 1)
  productImageList.value.splice(index, 1)
  vendorList.value.splice(index, 1)
}
const addFormColumn = function () {
  if (canAddForm.value) {
    forms.value.push(
      Object.assign(cloneDeep(formDemo), { parent_id: parentId }),
    )
    productImageList.value.push([])
    vendorList.value.push([])
  }
}
watch(
  () => visible,
  () => {
    forms.value = []
    productImageList.value = []
    vendorList.value = []

    if (visible > 1) {
      initData()
    } else if (visible > 0) {
      addFormColumn()
    }
    show.value = visible > 0
  },
)
const queryVenderList = function (keywords: string, index: number) {
  getVendorList({ keywords }).then((response: any) => {
    if (Array.isArray(response.result)) {
      if (manualVendor.value.id) {
        vendorList.value.splice(
          index,
          1,
          [manualVendor.value].concat(response.result || []),
        )
      } else {
        vendorList.value.splice(index, 1, response.result || [])
      }
    }
  })
}
const changeVenderSelect = function (value: string | number, index: number) {
  if (value) {
    const temp = vendorList.value[index].filter((i) => i.id === value)
    if (temp.length) {
      forms.value[index].vendor_name = temp[0].name
      forms.value[index].vendor_phone = temp[0].phone || temp[0].Phone || ''
      manualVendor.value = {
        name: '',
        id: '',
      }
    } else {
      forms.value[index].vendor_name = value || ''
      forms.value[index].vendor_phone = ''
      forms.value[index].vendor_type = ''
      manualVendor.value = {
        name: value || '',
        id: value || '',
      }
    }
  }
}
const createQuoteFunc = function () {
  const params = {
    file: '', // 疑似永远为空
  } as any
  if (parentId) {
    params.parent_id = parentId
  }

  let temp = cloneDeep(forms.value)
  temp = temp.map((item, index) => {
    const result = { ...item }
    result.price_list = []
    result.number.forEach((v: any, i: number) => {
      result.price_list.push({
        number: `${result.number[i]}`,
        price: `${result.price[i]}`,
        days: `${result.days[i]}`,
      })
    })

    result.cost_list = []
    result.cost_name.forEach((v: any, i: number) => {
      result.cost_list.push({
        cost_name: `${result.cost_name[i]}`,
        cost_price: `${result.cost_price[i]}`,
      })
    })
    result.product_image = productImageList.value[index]
      .map((i) => {
        return i.url.replace($mediaRegExp, '/')
      })
      .join(',')
    return result
  })

  //  组装接口数据
  Object.assign(params, { lists: temp })

  createQuote(params).then((response: any) => {
    if (response.code !== 1) return

    ElNotification({
      title: '成功',
      message: '提交成功',
      type: 'success',
      duration: 3000,
    })

    $emit('create', response.result)
    close()
  })
}
// 用来动态绑定ref, 便于调用表单验证
const formRef = ref({} as any)
const getFormRef = (el: any, key: string) => {
  formRef.value[`${key}`] = el
}
const checkForm = function () {
  const key = [
    'vendor_id',
    'product_name',
    'number',
    'cost',
    'package_weight',
    'package_size',
    'in_package',
    'demo_days',
  ]
  let length = forms.value.length
  const target = [] as any[]
  do {
    key.forEach((i) => {
      target.push(`${i}_${length - 1}`)
    })
    length--
  } while (length >= 1)

  // 表单校验结果
  let result = true
  target.forEach((i: string) => {
    const r: any = formRef.value[`${i}`]
    if (typeof r.validate === 'function') {
      r.clearValidate()
      r.validate((valid: boolean) => {
        if (!valid) {
          messageError('请检查表单必填项')
          result = false
          return
        }
      })
    } else {
      result = false
    }
  })
  if (result) createQuoteFunc()
}
const messageError = debounce(function (info) {
  ElMessage.error(info)
}, 100)
const commonCheck = (rule: any, value: any, cb: any) => {
  if (typeof value === 'number') {
    if (value >= 0) {
      cb()
    } else {
      cb(new Error('数字校验出错'))
    }
    return
  }

  if (value && value.trim().length) {
    cb()
  } else {
    cb(new Error('字符串校验出错'))
  }
}
const close = (done = {} as any) => {
  $emit('update:visible', 0)
  if (typeof done === 'function') done()
}
</script>
<style lang="scss">
.component-edit-indent-info {
  .custom-edit-indent-info-dialog {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100vh;
    .el-dialog__body {
      max-height: 87vh;
      overflow-y: scroll;
      overflow-x: auto;
      padding-top: 8px;
    }
    .el-dialog__header {
      border-bottom: 1px solid #dcdfe6;
    }
    .el-dialog__footer {
      padding-bottom: 10px;
    }
  }
}
</style>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.form-table {
  margin: 24px 0;
  & > div {
    &::after {
      // 占位符. 让表格右侧在横向滚动的时候能再滚动20px
      content: '.';
      width: 20px;
      padding-left: 20px;
      height: 1px;
      background-color: transparent;
      color: transparent;
    }
  }
}
.first-label {
  text-align: center;
  width: 120px;
  min-width: 120px;
  border: 1px solid #dcdfe6;
  border-top: none;
  border-right: none;
}
.second-label {
  width: 170px;
  min-width: 170px;
  line-height: 55px;
  min-height: 55px;
  text-align: left;
  padding: 0 10px;
  border: 1px solid #dcdfe6;
  border-top: none;

  &.required {
    color: #ef4135;
    &::before {
      content: '*';
      display: inline-block;
      color: #ef4135;
      font-size: 14px;
      width: 8px;
      height: 8px;
    }
  }
}
.input-area {
  position: relative;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-top: none;
  min-height: 55px;
  height: 100%;
  padding: 7px 8px;
  width: 300px;
  min-width: 300px;
  &:hover .btn-copy {
    display: block;
  }
  .btn-copy {
    display: none;
    cursor: pointer;
    background-color: #fff;
    line-height: 26px;
    padding: 0 4px;
    position: absolute;
    z-index: 2;
    top: calc((100% - 26px) / 2);
    right: -16px;
  }
  .el-form-item {
    margin-bottom: 0;
  }

  .sub-table {
    border: 1px solid #dcdfe6;
    border-left: none;
  }
  .sub-table-head {
    text-align: center;
    line-height: 24px;
    height: 24px;
    background-color: #efefef;
  }
  .sub-table-row {
    border-top: 1px solid #dcdfe6;
  }
  .sub-table-head,
  .sub-table-row {
    position: relative;
    & > div {
      border-left: 1px solid #dcdfe6;
      padding: 2px 4px;
    }
    &:hover .sub-table-btn-delete {
      border-left: 0;
      padding: 0;
      display: block;
    }
  }

  .sub-table-price {
    width: 120px;
  }
  .sub-table-days {
    width: 90px;
  }
  .sub-table-number {
    width: 90px;
  }
  .sub-table-cost-name {
    width: 140px;
  }
  .sub-table-cost-price {
    width: 140px;
  }
  .sub-table-btn-delete {
    display: none;
    line-height: 1;
    font-size: 20px;
    color: #ef4135;
    position: absolute;
    right: -6px;
    top: 0;
    z-index: 2;
  }
  .sub-table-btn-add {
    margin: 12px 0 8px;
  }
}
.form-header {
  .first-label,
  .input-area,
  .second-label {
    border-top: 1px solid #dcdfe6;
    min-height: auto;
    height: 40px;
    line-height: 40px;
  }
  .el-button {
    color: #ef4135;
  }
}
.btn-add-indent-info {
  background-color: #fff;
  z-index: 2;
  width: 74px;
  height: 84px;
  border: 1px solid #009688;
  position: absolute;
  right: 40px;
  bottom: 40px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  .el-icon-circle-plus-outline {
    color: #009688;
  }
  &:hover {
    color: #333;
    font-weight: 500;
    border-color: #00bb88;
    .el-icon-circle-plus-outline {
      color: #00bb88;
    }
  }
}
</style>