gitlab上面的wms转移到公司git

charles

2024-08-06 5ecb7958c96d3f0b6d47b79aff7eb306c2cf690f

 src/components/makepager/CommonFormTableView.vue

@@ -1,605 +1,1253 @@
<template>
  <div class="page-view" :class="{ setHeight: isinventory || islistingrules }">
    <el-form
      ref="form"
      :model="tableList"
      :show-message="false"
      label-position="right"
      :class="{ setHeight: isinventory || islistingrules }"
    >
      <el-table
        :data="tableList.tableData"
        border
        style="width: 100%"
        :height="'calc(100% - 0px)'"
        :class="{ setHeight: isinventory || islistingrules }"
        :header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
        :row-class-name="tableRowClassName"
        @row-click="tableRowClick"
      >
        <el-table-column v-if="tableList.selectBox" type="selection" width="40" align="center"> </el-table-column>
        <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column>
        <el-table-column
          v-for="(item, i) in tableList.tableColumn"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.min"
          align="center"
    <div class="page-view" :class="{ setHeight: isinventory || islistingrules || isReorder }">
        <el-form
                ref="form"
                :model="tableList"
                :show-message="false"
                label-position="right"
                :class="{ setHeight: isinventory || islistingrules || isReorder }"
        >
          <!-- 表头样式 -->
          <template slot="header">
            <span v-if="item.isRequird" style="color: #f56c6c">*</span>
            <span>{{ item.label }}</span>
          </template>
          <!-- column样式 -->
          <template slot-scope="scope">
            <template v-if="!detailEnter">
              <el-form-item
                v-if="item.input"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
            <el-table
                    :data="tableList.tableData"
                    border
                    style="width: 100%"
                    :height="'calc(100% - 0px)'"
                    :class="{ setHeight: isinventory || islistingrules || isReorder }"
                    :header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
                    :row-class-name="tableRowClassName"
                    @row-click="tableRowClick"
                    @selection-change="selectProductArray"
            >
                <el-table-column v-if="tableList.selectBox" type="selection" width="40"
                                 align="center"></el-table-column>
                <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"></el-table-column>
                <el-table-column
                        v-for="(item, i) in tableList.tableColumn"
                        :key="i"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width"
                        :min-width="item.min"
                        align="center"
                >
                    <!-- 表头样式 -->
                    <template slot="header">
                        <span v-if="item.isRequird" style="color: #f56c6c">*</span>
                        <span>
              {{ item.label }}
              <span></span>
              <el-popover
                      placement="top"
                      width="240"
                      trigger="click"
                      v-if="item.isScanCode"
                      @show="startScanCode"
                      :popper-append-to-body="false"
              >
                <el-input
                  v-model.trim="scope.row[item.prop]"
                  maxlength="50"
                  size="mini"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row)
                    }
                  "
                ></el-input>
              </el-form-item>
              <el-form-item
                v-else-if="item.productName"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
              >
                <div class="custom-name">
                  <el-select
                    v-model="scope.row[item.prop]"
                    placeholder="请选择"
                    size="mini"
                    style="width: 80%"
                    @change="
                <el-input placeholder="请输入条码"
                          v-model="scanCode" ref="input"
                          @keyup.enter.native="handlerEnter"
                />
                <span class="scan-code" slot="reference">
                  <img src="@/assets/saoma.png" width="20px">
                  <span style="color:lawngreen">扫码</span>
                </span>
              </el-popover>
            </span>
                    </template>
                    <!-- column样式 -->
                    <template slot-scope="scope">
                        <template v-if="!detailEnter">
                            <el-form-item
                                    v-if="item.input"
                                    label=" "
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                                    :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
                            >
                                <div @click.stop="commoInput">
                                    <el-input
                                            v-model.trim="scope.row[item.prop]"
                                            maxlength="50"
                                            size="mini"
                                            @change="
                      (val) => {
                        selProductNameClick(val)
                        commonInputChange(val, item.prop, scope.row)
                      }
                    "
                  >
                    <el-option
                      v-for="item in productNameOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="{ value: item.id, label: item.name, amount: item.amount, unit: item.unit }"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item
                v-else-if="item.date"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                <el-date-picker v-else v-model="scope.row[item.prop]" type="date" size="mini" style="width: 100%">
                </el-date-picker>
              </el-form-item>
              <el-form-item
                v-else-if="item.inputNumber"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <el-input-number
                  v-model="scope.row[item.prop]"
                  placeholder=""
                  :min="0"
                  :controls="false"
                  size="mini"
                  style="width: 100%; margin-right: 5px"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row)
                    }
                  "
                ></el-input-number>
              </el-form-item>
              <el-form-item
                v-else-if="item.inputFloat"
                label=" "
                :prop="'tableData.' + scope.$index + '.' + item.prop"
                :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
              >
                <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                <el-input-number
                  v-else
                  v-model="scope.row[item.prop]"
                  placeholder=""
                  :precision="2"
                  :controls="false"
                  size="mini"
                  style="width: 100%; margin-right: 5px"
                  @change="
                    (val) => {
                      commonInputChange(val, item.prop, scope.row)
                    }
                  "
                ></el-input-number>
              </el-form-item>
              <el-form-item v-else-if="item.select" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <el-select
                    v-model="scope.row[item.prop]"
                    placeholder="请选择"
                    size="mini"
                    style="width: 63%"
                    @change="selCommonClick"
                  >
                    <el-option v-for="item in selOptions" :key="item.id" :label="item.name" :value="item"> </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <!-- 位置 -->
              <el-form-item v-else-if="item.location" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row[item.prop] }}</span>
                  <el-select
                    v-else
                    v-model="scope.row[item.prop]"
                    placeholder="请选择"
                    size="mini"
                    style="width: 80%"
                    @change="
                      (val) => {
                        selLocationClick(val, item.prop)
                                    ></el-input>
                                </div>
                            </el-form-item>
                            <!-- <el-form-item
                              v-else-if="item.productName"
                              label=" "
                              :prop="'tableData.' + scope.$index + '.' + item.prop"
                            >
                              <div class="custom-name">
                                <SimpleSearchInput
                                  :echoValue="scope.row[item.prop]"
                                  :echoName="scope.row[item.prop]"
                                  checkedNum="1"
                                  :clearable="true"
                                  @select-user="selProductNameClick"
                                >
                                </SimpleSearchInput>
                              </div>
                            </el-form-item> -->
                            <el-form-item
                                    v-else-if="item.productName"
                                    label=" "
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                            >
                                <div class="custom-name">
                                    <el-autocomplete
                                            v-model="scope.row[item.prop]"
                                            :fetch-suggestions="
                      (queryString, callback) => {
                        querySearchAsync(queryString, callback, 'product')
                      }
                    "
                  >
                    <el-option
                      v-for="(item, index) in selLocationOptions"
                      :key="index"
                      :label="item.name"
                      :value="{ value: item.id, label: item.name }"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <!-- 产品 -->
              <el-form-item v-else-if="item.product" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row[item.prop] }}</span>
                  <el-select
                    v-else
                    v-model="scope.row[item.prop]"
                    placeholder="请选择"
                    size="mini"
                    style="width: 80%"
                    @change="
                                            value-key="name"
                                            :disabled="!isOperate"
                                            size="mini"
                                            @select="
                      (val) => {
                        selProductClick(val)
                        handleSelectClient(val, item.prop, scope.row,scope)
                      }
                    "
                  >
                    <el-option
                      v-for="item in productNameOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="{
                        value: item.id,
                        label: item.name,
                        amount: item.amount,
                        unit: item.unit,
                        categoryId: item.categoryId,
                        categoryName: item.categoryName
                                    ></el-autocomplete>

                                    <div
                                            v-if="scope.row[item.prop] && scope.row[item.prop].length > 0 && isOperate"
                                            class="common-select-btn"
                                            @click="handleEditClient(scope, item.prop)"
                                    >
                                        <i class="el-icon-edit" title="编辑"></i>
                                    </div>
                                    <div
                                            v-if="scope.row[item.prop] && scope.row[item.prop].length > 0 && isOperate"
                                            class="common-select-btn"
                                            @click="clearupClient(scope)"
                                    >
                                        <i class="el-icon-remove-outline" title="清除"></i>
                                    </div>
                                    <div class="common-select-btn" v-else @click="selClientClick(scope, item.prop)">
                                        <i class="el-icon-circle-plus-outline" title="选择"></i>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item
                                    v-else-if="item.date"
                                    label=" "
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                                    :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
                            >
                                <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                                <el-date-picker v-else v-model="scope.row[item.prop]" type="date" size="mini"
                                                style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item
                                    v-else-if="item.inputNumber"
                                    label=" "
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                                    :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
                            >
                                <div @click.stop="commoInput">
                                    <el-input-number
                                            v-model="scope.row[item.prop]"
                                            placeholder=""
                                            :min="0"
                                            :controls="false"
                                            size="mini"
                                            style="width: 100%; margin-right: 5px"
                                            @change="
                      (val) => {
                        commonInputChange(val, item.prop, scope.row)
                      }"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <!-- 用户 -->
              <el-form-item v-else-if="item.user" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span>{{ "管理员" }}</span>
                  <!-- <el-select
                    v-else
                    v-model="scope.row[item.prop]"
                    placeholder="请选择"
                    size="mini"
                    style="width: 80%"
                    @change="selCommonClick"
                  >
                    <el-option v-for="item in memberOptions" :key="item.id" :label="item.name" :value="item.name">
                    </el-option>
                  </el-select> -->
                </div>
              </el-form-item>
              <!-- 公司 -->
              <el-form-item v-else-if="item.company" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                <div class="custom-name">
                  <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                  <el-select v-else v-model="scope.row[item.prop]" placeholder="请选择" size="mini" style="width: 80%">
                    <el-option v-for="item in companyOptions" :key="item.id" :label="item.name" :value="item">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <slot name="tableButton" />
      </el-table>
    </el-form>
    <div v-if="!detailEnter && !isinventory && !islistingrules" style="margin: 10px">
      <el-button size="small" type="primary" @click="add">添加明细行</el-button>
      <!-- <el-button size="small" type="primary" @click="empty">清空</el-button> -->
                                    ></el-input-number>
                                </div>
                            </el-form-item>
                            <el-form-item
                                    v-else-if="item.inputFloat||item.inputFloatValue"
                                    label=" "
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                                    :rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
                            >
                                <span v-if="scope.row.isEdit||(item.inputFloatValue&&!scope.row[item.isInputFloat])">{{ scope.row[item.prop] }}</span>
                                <div v-else @click.stop="commoInput">
                                    <el-input-number
                                            v-model="scope.row[item.prop]"
                                            placeholder=""
                                            :precision="2"
                                            :controls="false"
                                            size="mini"
                                            style="width: 100%; margin-right: 5px"
                                            :min="item.prop === 'minInventory' ? 0 : 0"
                                            @change="
                      (val) => {
                        commonInputChange(val, item.prop, scope.row)
                      }
                    "
                                    ></el-input-number>
                                </div>
                            </el-form-item>
                            <el-form-item v-else-if="item.select" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                                    <el-select
                                            v-model="scope.row[item.prop]"
                                            placeholder="请选择"
                                            size="mini"
                                            style="width: 63%"
                                            @change="selCommonClick"
                                    >
                                        <el-option v-for="(item, index) in selOptions" :key="index" :label="item.name"
                                                   :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <!-- 位置 -->
                            <el-form-item v-else-if="item.location" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{
                    scope.row[item.prop]?.label ?? scope.row[item.prop]
                  }}</span>
                                    <el-select
                                            v-else
                                            v-model="scope.row[item.prop]"
                                            placeholder="请选择"
                                            size="mini"
                                            filterable
                                            style="width: 80%"
                                            @change="
                      (val) => {
                        selLocationClick(val, item.prop,scope.row,1)
                      }
                    "
                                    >
                                        <el-option
                                                v-for="(item, index) in selLocationOptions"
                                                :key="index"
                                                :label="item.jointName"
                                                :value="{ value: item.id, label: item.jointName }"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <!-- 产品到达位置 -->
                            <el-form-item v-else-if="item.toLocation" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{
                    scope.row[item.prop]?.label ?? scope.row[item.prop]
                  }}</span>
                                    <el-select
                                            v-else
                                            v-model="scope.row[item.prop]"
                                            placeholder="请选择"
                                            size="mini"
                                            filterable
                                            style="width: 80%"
                                            @change="
                      (val) => {
                        selLocationClick(val, item.prop, scope.row,scope.$index)
                      }
                    "
                                    >
                                        <el-option
                                                v-for="(item, index) in selToLocationOptions"
                                                :key="index"
                                                :label="item.jointName"
                                                :value="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <!-- 子位置 -->
                            <el-form-item
                                    v-else-if="item.sonLocation"
                                    label=" "
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                            >
                                <div class="custom-name">
                  <span v-if="scope.row.isEdit || scope.row.editable">{{
                    scope.row[item.prop]?.label ?? scope.row[item.prop]
                  }}</span>
                                    <el-select
                                            v-else
                                            v-model="scope.row[item.prop]"
                                            placeholder="请选择"
                                            size="mini"
                                            style="width: 80%"
                                            @change="
                      (val) => {
                        selSonLocationClick(val, item.prop,scope.row,scope)
                      }
                    "
                                    >
                                        <el-option
                                                v-for="(item, index) in selSonLocationOptions"
                                                :key="index"
                                                :label="item.jointName"
                                                :value="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <!-- 重订货规则-位置 -->
                            <el-form-item
                                    v-else-if="item.defaultLocation"
                                    label=" "
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                            >
                                <div class="custom-name">
                                    <el-select
                                            v-if="!scope.row.isEdit && scope.row.isOrder"
                                            v-model="locacionName"
                                            placeholder="请选择"
                                            size="mini"
                                            filterable
                                            style="width: 80%"
                                            @change="
                      (val) => {
                        selLocationClick(val, item.prop, scope.row,3)
                      }
                    ">
                                        <el-option
                                                v-for="(ite, index) in selLocationOptions"
                                                :key="index"
                                                :label="ite.name"
                                                :value="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                    <span v-else-if="scope.row.isEdit || scope.row.editable">{{
                    scope.row[item.prop]?.label ?? scope.row[item.prop]
                  }}</span>
                                </div>
                            </el-form-item>
                            <!-- 产品 -->
                            <el-form-item v-else-if="item.product" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                                    <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row.productName }}</span>
                                    <template v-else>
                                        <SimpleSearchInput
                                                v-model="scope.row[item.prop]"
                                                :echoValue="scope.row[item.prop]"
                                                :echoName="scope.row[item.prop]"
                                                checkedNum="1"
                                                :clearable="true"
                                                @select-user="
                                                (val) => {
                                                  selProductClick(val, scope.row)
                                                }">
                                        </SimpleSearchInput>
                                    </template>
                                </div>
                            </el-form-item>
                            <!-- 从 -->
                            <el-form-item
                                    v-else-if="item.formLocation"
                                    label=" "
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                            >
                                <div class="custom-name">
                                    <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row.formLocation }}</span>
                                    <el-autocomplete
                                            v-else
                                            style="width: 100%"
                                            v-model="scope.row.productCategory"
                                            @focus="productTypeFocus"
                                            :fetch-suggestions="(queryString, callback) => {
                        querySearchAsync(queryString, callback, 'formLocation')
                      }"
                                            value-key="name"
                                            @select="handleSelectClient('formLocation', $event)"
                                    ></el-autocomplete>
                                </div>
                            </el-form-item>
                            <!-- 产品类别 -->
                            <el-form-item
                                    v-else-if="item.productType"
                                    label=""
                                    :prop="'tableData.' + scope.$index + '.' + item.prop"
                            >
                                <div class="custom-name">
                                    <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row.productCategory }}</span>
                                    <el-autocomplete
                                            v-else
                                            style="width: 100%"
                                            v-model="scope.row.productCategory"
                                            @focus="productTypeFocus"
                                            :fetch-suggestions="
                      (queryString, callback) => {
                        querySearchAsync(queryString, callback, 'productType')
                      }
                    "
                                            value-key="name"
                                            @select="handleSelectClient('productType', $event)"
                                    ></el-autocomplete>
                                </div>
                            </el-form-item>
                            <!-- 用户 -->
                            <el-form-item v-else-if="item.user" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                                    <span>{{ "管理员" }}</span>
                                    <!-- <el-select
                                      v-else
                                      v-model="scope.row[item.prop]"
                                      placeholder="请选择"
                                      size="mini"
                                      style="width: 80%"
                                      @change="selCommonClick"
                                    >
                                      <el-option v-for="item in memberOptions" :key="item.id" :label="item.name" :value="item.name">
                                      </el-option>
                                    </el-select> -->
                                </div>
                            </el-form-item>
                            <!-- 路线 -->
                            <el-form-item v-else-if="item.route" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                                    <span v-if="scope.row.isEdit">{{ scope.row[item.prop]?.label ?? scope.row[item.prop] }}</span>
                                    <el-select
                                            v-else
                                            v-model="scope.row[item.prop]"
                                            placeholder="请选择"
                                            size="mini"
                                            style="width: 80%"
                                            @change="
                      (val) => {
                        selRouteClick(val, item.prop)
                      }
                    "
                                    >
                                        <el-option
                                                v-for="(item, index) in selRouteOptions"
                                                :key="index"
                                                :label="item.name"
                                                :value="{ value: item.id, label: item.name }"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <!-- 公司 -->
                            <el-form-item v-else-if="item.company" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                                    <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                                    <el-select v-else v-model="scope.row[item.prop]" placeholder="请选择" size="mini"
                                               style="width: 80%">
                                        <el-option v-for="(item, index) in companyOptions" :key="index"
                                                   :label="item.name" :value="item">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <!-- 备注 -->
                            <el-form-item v-else-if="item.editInput" label=" "
                                          :prop="'tableData.' + scope.$index + '.' + item.prop">
                                <div class="custom-name">
                                    <span v-if="scope.row.isEdit">{{ scope.row[item.prop] }}</span>
                                    <el-input v-else v-model="scope.row[item.prop]" placeholder="请输入" size="mini"
                                              style="width: 80%"></el-input>
                                </div>
                            </el-form-item>
                            <!-- 产品名称 -->
                            <span v-else>{{ scope.row[item.prop] }}</span>
                        </template>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
                <slot name="tableButton"/>
            </el-table>
        </el-form>
        <div v-if="!detailEnter && !isinventory && !isReorder&&isOperateAdd" style="margin: 10px">
            <el-button size="small" type="primary" @click="add">新增</el-button>
            <el-button size="small" type="primary" @click="empty">清空</el-button>
            <el-button size="small" type="primary" @click="deleteItems">删除</el-button>
        </div>
        <!-- 产品名称 -->
        <SelectCommonDialog
                v-if="editSelCommonConfig.editVisible"
                :edit-common-config="editSelCommonConfig"
                :selectBoxList="tableList.tableData"
                :quotationNumber="quotationNumber"
                @selClient="selClient"
                :warehouseId="warehouseId"
                @getSelectArray="getSelectArray"/>
    </div>
    <!-- 产品名称 -->
    <!-- <SelectCommonDialog
      v-if="editSelCommonConfig.editVisible"
      :edit-common-config="editSelCommonConfig"
      :sign="sign"
      @selClient="selClient"
    /> -->
  </div>
</template>

<script>
import { getProductList } from "@/api/product/product"
import { getLocationList } from "@/api/warehouseManage/warehouse"
import { getCompanyList } from "@/api/common/other"
import { getRuleList } from "@/api/operate/inventoryAdjustment"
// import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog"
export default {
  name: "CommmonFormTableView",
  components: {},
  props: {
    detailEnter: {
      type: Boolean,
      default: false
    },
    sign: {
      type: String,
      default: ""
    },
    productTableList: {
      type: Object,
      default: () => {
        return {
          selectBox: false,
          selectIndex: false,
          tableData: [], // 接口返回数据
          tableColumn: [
            // table表单
            { label: "", prop: "", min: 200, tooltip: true }
          ]
        }
      }
    },
    isinventory: {
      type: Boolean,
      default: false
    },
    islistingrules: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      total: 0,
      productList: [],
      tableList: [],
      editSelCommonConfig: {
        editVisible: false,
        title: "",
        infomation: {}
      },
      productIndex: 0,
      productNameOptions: [],
      memberOptions: [{ id: 1, name: "管理员" }],
      selOptions: [
        { id: 1, name: "件" },
        { id: 2, name: "打" }
      ],
      selLocationOptions: [], // 位置
      companyOptions: [] // 公司
    }
  },
  created() {
    if (this.isinventory) {
      this.getRuleList()
    } else {
      this.getProductList()
    }
    if (this.islistingrules) {
      this.getLocationList()
      // this.getCompanyList()
    }
    this.tableList = this.productTableList
  },
  computed: {},
  watch: {
    productTableList() {
      this.tableList = this.productTableList
    }
  },
  methods: {
    // 产品名称
    async getProductList() {
      await getProductList({
        page: 1,
        pageSize: 100
      }).then((res) => {
        // console.log(res.data)
        if (res.code === 200) {
          if (res.data && res.data.length > 0) {
            this.productNameOptions = res.data
          }
        }
      })
    },
    // 库存调整获取位置和产品
    async getRuleList() {
      await getRuleList({
        locationId: 0,
        productId: ""
      }).then((res) => {
        console.log(res)
        if (res.code === 200) {
          const list = res.data ? res.data : []
          this.selLocationOptions = list.locationList
          this.productNameOptions = list.productList
        }
      })
    },
    // 位置
    async getLocationList() {
      await getLocationList({
        keyword: "",
        page: 1,
        pageSize: 100
      }).then((res) => {
        if (res.code === 200) {
          const list = res.data ? res.data : []
          this.selLocationOptions = list
        }
      })
    },
    // 获取公司列表
    async getCompanyList() {
      await getCompanyList().then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.companyOptions = res.data.data
        }
      })
    },
    selProductNameClick(item) {
      this.tableList.tableData.map((ite) => {
        if (ite.productName.label === item.label) {
          ite.productId = item.value
          ite.productName = item.label
          ite.amount = item.amount
          ite.unit = item.unit
        }
      })
      console.log(this.tableList.tableData)
    },
    // 选择产品
    selProductClick(item) {
      console.log(item)
      this.tableList.tableData.map((ite) => {
        if (ite.productName.label === item.label) {
          ite.productId = item.value
          ite.productName = item.label
          ite.categoryId = item.categoryId
          ite.productCategory = item.categoryName
          ite.amount = item.amount
          ite.unit = item.unit
        }
      })
      if (this.isinventory) {
        getRuleList({
          locationId: 0,
          productId: item.value
        }).then((res) => {
          console.log(res)
          if (res.code === 200) {
            const list = res.data ? res.data : []
            this.selLocationOptions = list.locationList
          }
        })
      }
      console.log(this.tableList.tableData)
      this.$emit("selProductClick", item)
    },
    // 选择位置
    selLocationClick(item, prop) {
      console.log(item)
      console.log(this.tableList.tableData)
      if (this.isinventory) {
        getRuleList({
          locationId: item.value,
          productId: ""
        }).then((res) => {
          console.log(res)
          if (res.code === 200) {
            const list = res.data ? res.data : []
            // this.selLocationOptions = list.locationList
            this.productNameOptions = list.productList
          }
        })
      }
      this.$emit("selLocationClick", item, prop)
    },
    // 选择单位/用户
    selCommonClick(item) {
      console.log(item)
    },
    handleReserve(row) {
      return row._id ? row._id : row.id
    },
    handleSelectionChange(val) {
      this.$emit("getSelectArray", val)
    },
    import {getProductList, getProductDetailsByBarCodeApi} from "@/api/product/product"
    import {getLocationList} from "@/api/warehouseManage/warehouse"
    import {getCompanyList} from "@/api/common/other"
    import {getRuleList} from "@/api/operate/inventoryAdjustment"
    import {getProductCategoryList} from "@/api/product/productCategory"
    import SimpleSearchInput from "@/components/makepager/SimpleSearchInput"
    import {getAmountAndPrediction} from "@/api/product/reorderRules"
    import SelectCommonDialog from "@/views/other/commonDialog/SelectCommonDialog"
    export default {
        name: "CommmonFormTableView",
        components: {SimpleSearchInput, SelectCommonDialog},
        props: {
            warehouseId:{
              type:Number,
              default:0
            },
            detailEnter: {
                type: Boolean,
                default: false
            },
            sign: {
                type: String,
                default: ""
            },
            productTableList: {
                type: Object,
                default: () => {
                    return {
                        selectBox: false,
                        selectIndex: false,
                        tableData: [], // 接口返回数据
                        tableColumn: [
                            // table表单
                            {label: "", prop: "", min: 200, tooltip: true}
                        ]
                    }
                }
            },
            isinventory: {
                type: Boolean,
                default: false
            },
            islistingrules: {
                type: Boolean,
                default: false
            },
            isReorder: {
                type: Boolean,
                default: false
            },
            // 根据报价单查询产品
            quotationNumber: {
                type: [String, Number],
                default: ""
            },
            // 列表新增是否多选
            addTypeIdMultiple: {
                type: Boolean,
                default: false
            },
            // 是否可以操作 添加等
            isOperate: {
                type: Boolean,
                default: true
            },
            // 是否有新增和清空操作
            isOperateAdd: {
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                scanCode: '',
                total: 0,
                productList: [],
                tableList: [],
                editSelCommonConfig: {
                    editVisible: false,
                    isSelectBox: false,
                    title: "",
                    infomation: {}
                },
                productIndex: 0,
                productNameOptions: [],
                productTypeNameOptions: [],
                memberOptions: [{id: 1, name: "管理员"}],
                selOptions: [
                    {id: 1, name: "件"},
                    {id: 2, name: "打"}
                ],
                selLocationOptions: [], // 位置
                selSonLocationOptions: [], //子位置
                selToLocationOptions: [], // 产品到达位置
                companyOptions: [], // 公司
                selRouteOptions: [{id: 1, name: "制造"}], // 路线
                locacionName: "",
                locacionId: 0,
                productName: "",
                productId: "",
                initialPosition: "",
                formLocationList: [],
                toLocationList: []
            }
        },
        created() {
            if (this.isinventory) {
                this.getRuleList()
            } else if (this.isReorder) {
                this.getProductList()
                //this.getLocationList()
            } else {
                this.getProductList()
                this.getProductCategoryList()
            }
            /*if (this.islistingrules) {
                this.getToLocationList()
                // this.getCompanyList()
            }*/
            this.tableList = this.productTableList
        },
        computed: {},
        watch: {
            productTableList() {
                // this.showcol = this.productTableList.showcol
                this.getTableInfo()
            },
            scanCode: {
                handler(newValue, oldValue) {
                    //1.输入不会触发，需要扫入条形码触发
                    if (newValue&&(newValue.length - oldValue.length > 1)) {
                        const codeNum=this.scanCode;
                        this.scanCode="";
                         this.queryProduct(codeNum);
                    }
                }
            }
        },
        methods: {
            deleteItems(){
              this.$emit('deleteItems');
            },
            selectProductArray(val){
                this.$emit('selectProductArray',val);
            },
            handlerEnter() {
                if (this.scanCode.length > 0) {
                    const codeNum=this.scanCode;
                    this.scanCode="";
                    this.queryProduct(codeNum);
                }
            },
            async queryProduct(codeNum) {
                const {code, data, msg} = await getProductDetailsByBarCodeApi(codeNum);
                if (code === 200) {
                    this.$emit("getSelectArray", [data]);
                    this.$message.success(`扫码成功,${data.name}数量加1`);
                } else {
                    this.$message.error(msg);
                }
               // this.scanCode = "";
            },
            startScanCode() {
                this.$nextTick(() => {
                    this.$refs.input[0].focus();
                });
            },
            getTableInfo() {
                this.tableList = this.productTableList
                if (this.tableList.tableData.length === 1 && this.tableList.tableData[0].name === "") {
                    this.isRecalculate = false
                } else {
                    this.isRecalculate = true
                }
            },
            // 产品名称
            async getProductList() {
                await getProductList({
                    page: 1,
                    pageSize: 100
                }).then((res) => {
                    if (res.code === 200) {
                        if (res.data && res.data.length > 0) {
                            this.productNameOptions = res.data
                        }
                    }
                })
            },
            // 下拉搜索
            async handleSelectClient(value, item, row, scope) {
                this.$emit("selProductClick", value, item, row, scope)
                if (value === "product") {
                    if (item.categoryId === 0 || item.categoryName === "") {
                        this.productTypeNameOptions = []
                        this.tableList.tableData[this.tableList.rowClickIndex].productCategory = ""
                    } else {
                        await getProductCategoryList({
                            categoryId: item.categoryId,
                            keyWord: item.categoryName,
                            page: 1,
                            pageSize: 15
                        }).then((res) => {
                            if (res.code === 200) {
                                const list = res.data ? res.data : [];
                                this.productTypeNameOptions = list;
                                this.tableList.tableData[this.tableList.rowClickIndex].productCategory = list[0].name
                            }
                        })
                    }
                } else if (value === "productType") {
                    console.log("产品类型选中")
                }
            },
            querySearchAsync(queryString, cb, value) {
                let restaurants = ""
                if (value === "product") {
                    restaurants = this.productNameOptions
                } else if (value === "productType") {
                    restaurants = this.productTypeNameOptions;
                } else if (value === "formLocation") {
                    restaurants = this.selLocationOptions
                }
                var results = (queryString && restaurants) ? restaurants.filter(this.createStateFilter(queryString, value)) : restaurants
                cb(results)
                if (results.length === 0) {
                    this.productTypeNameOptions = []
                }
                this.$emit("querySearchData", queryString, results, value)
            },
            createStateFilter(queryString) {
                return (state) => {
                    return state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
                }
            },
            // 新增
            selClientClick(scope, prop) {
                console.log(scope, prop)
                this.productIndex = scope.$index
                this.editSelCommonConfig.title = "产品名称"
                this.editSelCommonConfig.isSelectBox = true
                this.editSelCommonConfig.editVisible = true
            },
            // 编辑
            handleEditClient(scope, prop) {
                console.log(scope, prop)
                this.productIndex = scope.$index
                this.editSelCommonConfig.title = "产品名称"
                this.editSelCommonConfig.isSelectBox = false
                this.editSelCommonConfig.editVisible = true
            },
            // 清除选中产品
            setValueNull(val) {
                console.log(val, "看看val")
            },

    // 数字换行为金额显示格式
    number_format(number, decimals, dec_point, thousands_sep) {
      decimals = 2 //这里默认设置保留两位小数，也可以注释这句采用传入的参数
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       * */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "")
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point
      var s = n.toString().split(".")
      var re = /(-?\d+)(\d{3})/
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2")
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || ""
        s[1] += new Array(prec - s[1].length + 1).join("0")
      } else {
        s[1] = s[1].substring(0, prec) //小数点位数超出长度时截取前面的位数
      }
      return s.join(dec)
    },
    // 新增
    add() {
      this.$emit("addProductClick")
    },
    commonInputChange(val, prop, row) {
      console.log(val, prop)
      console.log(row)
      this.$emit("inputContent", val, prop, row)
    },
    // 清空
    empty() {
      this.$emit("emptyProductClick")
    },
    // 清除已选择用户
    clearupClient(row, scope) {
      this.productIndex = scope.$index
      this.tableList.tableData.map((ite, index) => {
        console.log(scope.$index)
        if (scope.$index && scope.$index >= 0) {
          if (index === this.productIndex) {
            ite.name = ""
            ite.amount = 1
            ite.number = ""
            ite.purchasePrice = 0
            ite.unit = ""
            ite.deliveryTime = 0
            ite.shippingDuration = 0
          }
        } else {
          ite.name = ""
          ite.amount = 1
          ite.number = ""
          ite.purchasePrice = 0
          ite.unit = ""
          ite.deliveryTime = 0
          ite.shippingDuration = 0
            // 库存调整获取位置和产品
            async getRuleList() {
                await getRuleList({
                    locationId: 0,
                    productId: ""
                }).then((res) => {
                    if (res.code === 200) {
                        const list = res.data ? res.data : []
                        this.selLocationOptions = list.locationList
                        this.selSonLocationOptions = list.locationList
                        this.productNameOptions = list.productList
                    }
                })
            },
            // 获取产品类型列表
            async getProductCategoryList() {
                await getProductCategoryList({
                    categoryId: 0,
                    keyWord: "",
                    page: 1,
                    pageSize: 15
                }).then((res) => {
                    if (res.code === 200) {
                        const list = res.data ? res.data : []
                        this.productTypeNameOptions = list
                    }
                })
            },

            // 位置
            async getLocationList() {
                this.locacionName = ""
                await getLocationList({
                    // keyword: "",
                    type: 3,
                    jointName: this.initialPosition ? this.initialPosition : null,
                    productId: this.queryProductId ? this.queryProductId : null,
                    productCategoryId: this.categoryId ? this.categoryId : null,
                    page: 1,
                    pageSize: 100
                }).then((res) => {
                    if (res.code === 200) {
                        const list = res.data ? res.data : []
                        this.selLocationOptions = list
                        this.selSonLocationOptions = list
                        if (this.isReorder) {
                            this.locacionName = list[0]?.name
                            this.locacionId = list[0]?.id
                            this.$emit("selLocationClick", list[0], "locacionName")
                        }
                    }
                })
            },
            // 产品到达位置
            async getToLocationList() {
                await getLocationList({
                    // keyword: "",
                    type: 3,
                    page: 1,
                    pageSize: 100
                }).then((res) => {
                    if (res.code === 200) {
                        const list = res.data ? res.data : []
                        this.selToLocationOptions = list
                        this.selSonLocationOptions = list
                        if (this.isReorder) {
                            this.locacionName = list[0]?.name
                            this.locacionId = list[0]?.id
                            this.$emit("selLocationClick", list[0], "locacionName")
                        }
                    }
                })
            },
            // 设置子位置/源位置
            async setLocationList(jointName, tag) {
                if (tag === "fromLocation") {
                    /*await getLocationList({
                        warehouseId: jointName,
                        page: 1,
                        pageSize: 100
                    }).then((res) => {
                        if (res.code === 200) {
                            this.selSonLocationOptions = res.data;
                        }
                    })*/
                    this.selSonLocationOptions = jointName;
                } else if (tag === "toLocation") {
                    /*await getLocationList({
                        page: 1,
                        pageSize: 100
                    }).then((res) => {
                        if (res.code === 200) {
                            this.selToLocationOptions = res.data
                        }
                    })*/
                    this.selToLocationOptions = jointName;
                } else {
                    /*await getLocationList({
                        warehouseId: jointName,
                        page: 1,
                        pageSize: 100
                    }).then((res) => {
                        if (res.code === 200) {
                            this.selSonLocationOptions = res.data;
                        }
                    })*/
                    this.selSonLocationOptions = jointName;
                }
            },
            // 获取公司列表
            async getCompanyList() {
                await getCompanyList().then((res) => {
                    if (res.code === 200) {
                        this.companyOptions = res.data
                    }
                })
            },
            selProductNameClick(item) {
                this.productIndex = this.tableList.tableData.length - 1
                this.tableList.tableData.map((ite, index) => {
                    if (index === this.productIndex) {
                        ite.productId = item.id
                        ite.productName = item.name
                        ite.amount = item.amount
                        ite.unit = item.unit
                    }
                })
            },
            // 选择产品
            selProductClick(item, row) {
                console.log("选择产品", row, item)
                if (this.isReorder) {
                    this.productId = item.id
                    this.productName = item.name
                    this.getAmountAndPrediction(item, "product", row)
                } else {
                    let selIndex = 0
                    this.tableList.tableData.map((ite, index) => {
                        // ite.id 是上架规则的, ite.productId是库存调整的
                        if (ite.id === row.id && ite.id != undefined && row.id != undefined) {
                            selIndex = index
                            ite.productId = item.id
                            ite.productName = item.name
                            ite.categoryId = item.categoryId
                            ite.productCategory = item.categoryName
                            ite.amount = item.amount
                            ite.unit = item.unit
                        } else if (ite.productId === row.productId) {
                            selIndex = index
                            ite.productId = item.id
                            ite.productName = item.name
                            ite.categoryId = item.categoryId
                            ite.productCategory = item.categoryName
                            // ite.amount = item.amount
                            ite.unit = item.unit
                        }
                    })
                    this.$emit("selProductClick", "product", this.tableList.tableData[selIndex])
                }
                if (this.isinventory) {
                    getRuleList({
                        locationId: 0,
                        productId: item.value
                    }).then((res) => {
                        if (res.code === 200) {
                            const list = res.data ? res.data : []
                            this.selLocationOptions = list.locationList
                            this.selSonLocationOptions = list.locationList
                        }
                    })
                }

                // this.$emit("selProductClick", item)
            },
            // 选择产品类型
            selProductTypeClick(item) {
                this.tableList.tableData.map((ite) => {
                    if (ite.productCategory.label === item.label) {
                        ite.productCategoryId = item.value
                        ite.productCategory = item.label
                    }
                })
                if (this.isinventory) {
                    this.getProductCategoryList()
                }
                // this.$emit("selProductTypeClick", item)
            },
            // 产品类型获取焦点
            productTypeFocus() {
                getProductCategoryList({
                    categoryId: 0,
                    keyWord: "",
                    page: 1,
                    pageSize: 15
                }).then((res) => {
                    if (res.code === 200) {
                        const list = res.data ? res.data : []
                        this.productTypeNameOptions = list
                    }
                })
            },
            // 选择位置
            selLocationClick(item, prop, row,index) {
                console.log("位置选择1", item,prop ,row);
                if (prop === "areaName") {
                    getLocationList({
                        jointName: item.label,
                        page: 1,
                        pageSize: 100
                    }).then((res) => {
                        if (res.code === 200) {
                            const list = res.data ? res.data : []
                            this.selSonLocationOptions = list
                        }
                    })
                } else if (prop === 'locationName') {
                    console.log("locationName")
                }
                if (this.isReorder) {
                    this.locacionId = item.value
                    this.productId = row.productId
                    if (this.productId.length !== 0) {
                        this.getAmountAndPrediction(row, "location", item)
                    }
                }
                if (this.isinventory) {
                    getRuleList({
                        locationId: item.value,
                        productId: ""
                    }).then((res) => {
                        if (res.code === 200) {
                            const list = res.data ? res.data : []
                            this.productNameOptions = list.productList
                        }
                    })
                }
                this.$emit("selLocationClick", item, prop,index);
            },
            // 选择子位置
            selSonLocationClick(item, prop, row, scope) {
                this.$emit("selSonLocationClick", item, prop, row, scope)
            },
            // 获取在库与预测数量
            getAmountAndPrediction(item, val, ite) {
                let selIndex = 0;
                getAmountAndPrediction({
                    locationId: val === "product" ? this.locacionId : ite.value,
                    productId: val === "product" ? item.id : this.productId
                }).then((res) => {
                    if (res.code === 200) {
                        this.tableList.tableData.map((ite, index) => {
                            if (val === "product") {
                                if (index === 0) {
                                    selIndex = index
                                    ite.amount = res.data.amount
                                    ite.prediction = res.data.prediction
                                    ite.productId = item.id
                                    ite.productName = item.name
                                    ite.unit = item.unit
                                }
                            } else {
                                if (ite.id === item.id) {
                                    selIndex = index
                                    ite.amount = res.data.amount
                                    ite.prediction = res.data.prediction
                                }
                            }
                        })
                        this.$emit("selProductClick", this.tableList.tableData[selIndex])
                    }
                })
            },
            // 选择路线
            selRouteClick(item, prop) {
                this.$emit("selRouteClick", item, prop)
            },
            // 选择单位/用户
            selCommonClick(item) {
                console.log(item)
            },
            handleReserve(row) {
                return row._id ? row._id : row.id
            },
            handleSelectionChange(val) {
                this.productIndex = this.tableList.tableData.length;
                this.$emit("getSelectArray", val)
            },

            // 数字换行为金额显示格式
            number_format(number, decimals, dec_point, thousands_sep) {
                decimals = 2 //这里默认设置保留两位小数，也可以注释这句采用传入的参数
                /*
                 * 参数说明：
                 * number：要格式化的数字
                 * decimals：保留几位小数
                 * dec_point：小数点符号
                 * thousands_sep：千分位符号
                 * */
                number = (number + "").replace(/[^0-9+-Ee.]/g, "")
                var n = !isFinite(+number) ? 0 : +number,
                    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                    sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
                    dec = typeof dec_point === "undefined" ? "." : dec_point
                var s = n.toString().split(".")
                var re = /(-?\d+)(\d{3})/
                while (re.test(s[0])) {
                    s[0] = s[0].replace(re, "$1" + sep + "$2")
                }
                if ((s[1] || "").length < prec) {
                    s[1] = s[1] || ""
                    s[1] += new Array(prec - s[1].length + 1).join("0")
                } else {
                    s[1] = s[1].substring(0, prec) //小数点位数超出长度时截取前面的位数
                }
                return s.join(dec)
            },
            // 新增
            add() {
                if(this.warehouseId||this.$route.query.workType){
                    if(this.$route.query.workType==3&&!this.warehouseId){
                        this.$message.warning('请先选择调拨地址');
                        return ;
                    }
                    if (this.addTypeIdMultiple) {
                        this.productIndex = this.tableList.tableData.length
                        this.editSelCommonConfig.title = "产品名称"
                        this.editSelCommonConfig.isSelectBox = true
                        this.editSelCommonConfig.editVisible = true
                    } else {
                        this.$emit("addProductClick")
                    }
                }else{
                    this.$message.warning('请先选择仓库')
                }
            },
            commonInputChange(val, prop, row) {
                this.$emit("inputContent", val, prop, row)
            },
            // 清空
            empty() {
                this.$emit("emptyProductClick")
            },
            // 清除已选择用户
            clearupClient(scope) {
                this.productIndex = scope.$index;
                this.tableList.tableData.map((ite, index) => {
                    if (index === this.productIndex) {
                        ite.productName = ""
                        ite.id = ""
                        ite.name = ""
                        ite.amount = 1
                        ite.number = ""
                        ite.model = ""
                        ite.specs = ""
                        ite.unit = ""
                        ite.deliveryTime = 0
                        ite.shippingDuration = 0
                    }
                })
                this.$emit("clearupProduct", this.tableList.tableData)
            },
            deleteClient(row, scope) {
                if (this.tableList.tableData.length == 1) {
                    this.$message.error("至少保留一条，不能刪除了！")
                    return true
                }
                this.tableList.tableData.splice(scope.$index, 1)
            },
            // 行点击
            tableRowClick(row) {
                if (this.isReorder) {
                    this.locacionName = row.location.name
                }
                this.$emit("tableRowClick", row, row.index)
            },
            // 单选行相关
            tableRowClassName({row, rowIndex}) {
                row.index = rowIndex
            },
            setFormItem(val) {
                console.log(val)
            },
            commoInput() {
            },
            selClient(item) {
                let list = this.tableList.tableData.map((item) => item.id)
                if (list.findIndex((v) => v == item.id) == -1) {
                    this.isRecalculate = true
                    // this.editConfig.infomation.client_name = row.name
                    this.tableList.tableData.map((ite, index) => {
                        if (index === this.productIndex) {
                            ite.productName = item.name
                            ite.productId = item.id
                            ite.name = item.name
                            ite.amount = 1
                            ite.number = item.id
                            ite.specs = item.specs
                            ite.model = item.model
                            // ite.price = item.price
                            // ite.total = item.amount ? item.amount * item.price : 1 * item.price
                            ite.unit = item.unit
                        }
                    })
                } else {
                    this.$message.error("不能选择重复的产品， 请重新选择")
                }
            },
            getSelectArray(val) {
                this.$emit("getSelectArray", val, this.productIndex)
            }
        }
      })
      this.$emit("clearupProduct", this.tableList.tableData)
    },
    deleteClient(row, scope) {
      if (this.tableList.tableData.length == 1) {
        this.$message.error("至少保留一条，不能刪除了！")
        return true
      }
      this.tableList.tableData.splice(scope.$index, 1)
    },
    // 行点击
    tableRowClick(row) {
      this.$emit("tableRowClick", row, row.index)
    },
    // 单选行相关
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.setHeight {
  height: 100%;
}
.page-view {
  min-width: 100px;

  .el-form-item {
    margin-bottom: 0;
    .custom-name {
      display: flex;
      justify-content: center;
      font-size: 12px;
      line-height: 17px;
      font-family: PingFangSC;
      .common-select-btn {
        margin-left: 5px;
        font-size: 13px;
    .scan-code {
        cursor: pointer;
      }
        margin-left: 10px;
        img, span {
            position: relative;
        }
        img {
            top: 5px;
        }
        span: {
            top: -10px;
        }
    }
  }
}
::v-deep {
  .el-form-item__label {
    display: none;
  }
  .el-form-item__content {
    // height: 28px; /* 设置高度 */
    line-height: 22px; /* 设置行高 */
  }
  .el-table__footer-wrapper tbody td.el-table__cell {
    background-color: #fff;
    // text-align: right;
    font-weight: bold;
  }
  .el-table .cell,
  .el-table th.el-table__cell > .cell {
    padding: 0 5px;
  }
  // .el-input__inner {
  //   text-align: left;
  // }
}

::v-deep .el-table .cell {
  font-size: 12px;
  line-height: 17px;
  font-family: PingFangSC;
  color: rgba(0, 0, 0, 0.9);
  .el-button--text {
    width: auto;
    height: auto;
    font-family: PingFangSC-Medium, sans-serif;
  }
}
::v-deep .el-table .el-table__cell {
  padding: 6px 0 !important;
  height: 35px;
  text-align: center;
}
    .setHeight {
        height: 100%;
    }

    .page-view {
        min-width: 100px;

        .el-form-item {
            margin-bottom: 0;
            .custom-name {
                display: flex;
                justify-content: center;
                font-size: 12px;
                line-height: 17px;
                font-family: PingFangSC;
                .common-select-btn {
                    margin-left: 5px;
                    font-size: 13px;
                    cursor: pointer;
                }
            }
        }
    }

    ::v-deep {
        .el-autocomplete {
            height: 28px;
            .el-input {
                height: 28px;
                .el-input__inner {
                    height: 28px;
                }
            }
        }
        .el-form-item__label {
            display: none;
        }
        .el-form-item__content {
            // height: 28px; /* 设置高度 */
            line-height: 22px; /* 设置行高 */
        }
        .el-table__footer-wrapper tbody td.el-table__cell {
            background-color: #fff;
            // text-align: right;
            font-weight: bold;
        }
        .el-table .cell,
        .el-table th.el-table__cell > .cell {
            padding: 0 5px;
        }
        // .el-input__inner {
        //   text-align: left;
        // }
    }

    ::v-deep .el-table .cell {
        font-size: 12px;
        line-height: 17px;
        font-family: PingFangSC;
        color: rgba(0, 0, 0, 0.9);
        .el-button--text {
            width: auto;
            height: auto;
            font-family: PingFangSC-Medium, sans-serif;
        }
    }

    ::v-deep .el-table .el-table__cell {
        padding: 6px 0 !important;
        height: 35px;
        text-align: center;
    }

    ::v-deep .el-table__body-wrapper {
        height: unset !important;
    }
</style>