erp_fans/src/views/EHSD/productLibrary/companyProduct/index.vue

<template>
  <div class="box">
    <div class="tree">
      <treeList title="产品分类" submitType="1" :data="treeListData" v-model="sourceList.pagination.productClassifyId" @change="treeChange"
                @changeTreeList="getTreeList">
      </treeList>
    </div>
    <div class="content">
      <byTable :source="sourceList.data" :tableHeight="tableHeight" :pagination="sourceList.pagination" :config="config" :loading="loading"
               highlight-current-row :selectConfig="selectConfig" :action-list="[
               {
                text: '导出Excel',
                action: () => exportExcel(),
                disabled: false,
              },
              {
                text: '添加',
                action: () => openModal('add'),
                disabled: false,
              },]" @get-list="getList">
        <template #name="{ item }">
          <div>
            <span class="el-click">{{ item.name }}</span>
          </div>
        </template>
        <template #pic="{ item }">
          <div v-if="item.fileList.length > 0">
            <img :src="item.fileList[0].fileUrl" class="pic" @click="handleClickFile(item.fileList[0])" />
          </div>
          <div v-else></div>
        </template>
        <template #size="{ item }">
          <div v-if="item['length'] && item.width && item.height">
            <span>{{ item['length'] }}</span>*
            <span>{{ item.width }}</span>*
            <span>{{ item.height }}</span>
          </div>
          <div v-else></div>
        </template>
        <template #price="{ item }">
          <div v-if="item.price">
            <span> {{ moneyFormat(item.price ,2)}}</span>
          </div>
          <div v-else></div>
        </template>
      </byTable>
    </div>

    <el-dialog :title="modalType == 'add' ? '添加产品' : '编辑产品'" v-model="dialogVisible" width="80%" destroy-on-close>
      <div class="public_height_dialog">
        <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="formDom" v-loading="submitLoading">
          <template #nameEnglish>
            <div style="width: 100%">
              <el-input v-model="formData.data.nameEnglish" placeholder="请输入" onkeyup="value=value.replace(/[^\x00-\xff]/g, '')"></el-input>
            </div>
          </template>
          <template #productionFile>
            <div style="width: 100%">
              <span style="color:#409eff;cursor:pointer" @click="handleClickUpload('prodFilePath',true)"
                    v-if="!formData.data.prodFilePath">点击上传</span>
              <span style="color:#409eff;cursor:pointer" @click="handleClickUpload('prodFilePath',false)" v-else>点击查看</span>
            </div>
          </template>
          <template #productionFileOne>
            <div style="width: 100%">
              <el-button type="primary" plain @click="handleClickUpload('prodImgPath',true)" v-if="!formData.data.prodImgPath">点击上传</el-button>
              <el-button type="primary" plain @click="handleClickUpload('prodImgPath',false)" v-else>点击查看</el-button>
            </div>
          </template>

          <template #color>
            <div style="width: 100%">
              <el-form-item label="颜色" class="margin-b-0 wid100">
                <el-row style="width: 100%">
                  <el-col :span="12">
                    <el-form-item prop="color" label-width="0px" class="margin-b-0 wid100">
                      <el-input v-model="formData.data.color" placeholder="颜色" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="colorCardCode" label-width="0px" class="margin-b-0 wid100">
                      <el-input v-model="formData.data.colorCardCode" placeholder="色卡号" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
            </div>
          </template>
          <template #size>
            <div style="width: 100%">
              <el-form-item label="尺寸" class="margin-b-0 wid100" required>
                <el-row>
                  <el-col :span="8">
                    <el-form-item prop="length" label-width="0px" class="margin-b-0 wid100">
                      <el-input-number v-model="formData.data['length']" placeholder="长 （cm）" style="width: 100%" :precision="2" :controls="false"
                                       :min="0" onmousewheel="return false;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="width" label-width="0px" class="margin-b-0 wid100">
                      <el-input-number v-model="formData.data.width" placeholder="宽 （cm）" style="width: 100%" :precision="2" :controls="false"
                                       :min="0" onmousewheel="return false;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item prop="height" label-width="0px" class="margin-b-0 wid100">
                      <el-input-number v-model="formData.data.height" placeholder="高 （cm）" style="width: 100%" :precision="2" :controls="false"
                                       :min="0" onmousewheel="return false;" />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
            </div>
          </template>

          <template #materialDetail>
            <div style="width: 100%;padding-left:15px">
              <el-button type="primary" @click="clickOpenSelectMaterial(1)" plain>选择包材/配件/辅材</el-button>
              <el-table :data="formData.data.productBomDetailList" style="width: 100%; margin-top: 16px">
                <el-table-column prop="materialName" label="物料名称" min-width="130" />
                <el-table-column prop="materialCode" label="物料编码" width="150" />
                <el-table-column label="数量" width="150">
                  <template #default="{ row, $index }">
                    <div style="width: 100%">
                      <el-form-item :prop="'productBomDetailList.' + $index + '.quantity'" :rules="rules.quantity" :inline-message="true"
                                    class="margin-b-0 wid100">
                        <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%" :precision="0"
                                         :controls="false" :min="1" />
                      </el-form-item>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="60" align="center" fixed="right">
                  <template #default="{ $index }">
                    <el-button type="primary" link @click="handleRemove($index,1)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>

          <template #technology>
            <div style="width:100%">
              <div class="small-title">
                ① 工艺线路
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item prop="technologyId" label="工艺产线" class="wid100">
                    <el-select v-model="formData.data.technologyId" placeholder="请选择" style="width:100%">
                      <el-option v-for="item in technologyData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="small-title">
                ② LOGO
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item label="LOGO尺寸" class="wid100">
                    <el-row>
                      <el-col :span="8">
                        <el-form-item prop="logoLength" label-width="0px" class="margin-b-0 wid100">
                          <el-input-number v-model="formData.data.logoLength" placeholder="长 （cm）" style="width: 100%" :precision="2"
                                           :controls="false" :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="logoWidth" label-width="0px" class="margin-b-0 wid100">
                          <el-input-number v-model="formData.data.logoWidth" placeholder="宽 （cm）" style="width: 100%" :precision="2" :controls="false"
                                           :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item prop="logoHeight" label-width="0px" class="margin-b-0 wid100">
                          <el-input-number v-model="formData.data.logoHeight" placeholder="高 （cm）" style="width: 100%" :precision="2"
                                           :controls="false" :min="0" onmousewheel="return false;" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="colorCount" label="几色印刷" class="wid100">
                    <el-input-number v-model="formData.data.colorCount" placeholder="请输入" style="width: 100%" :precision="0" :controls="false"
                                     :min="1" onmousewheel="return false;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="small-title">
                ③ 折叠
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item prop="isFold" label="是否折叠" class="wid100">
                    <el-select v-model="formData.data.isFold" placeholder="请选择" style="width:100%">
                      <el-option :label="'否'" :value="0" />
                      <el-option :label="'是'" :value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="foldWay" label="折叠数" class="wid100" v-if="formData.data.isFold==1">
                    <el-select v-model="formData.data.foldWay" placeholder="请选择" style="width:100%">
                      <el-option v-for="item in foldWayData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="small-title">
                ④ 包装要求
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item prop="packAsk" label="包装要求" class="wid100">
                    <el-select v-model="formData.data.packAsk" placeholder="请选择" style="width:100%" multiple>
                      <el-option v-for="item in packAskData" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="small-title">
                ⑤ 是否定制
              </div>
              <el-row style="width:100%">
                <el-col :span="12">
                  <el-form-item prop="isCustomized" label="是否定制" class="wid100">
                    <el-select v-model="formData.data.isCustomized" placeholder="请选择" style="width:100%">
                      <el-option :label="'否'" :value="0" />
                      <el-option :label="'是'" :value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="width:100%">
                <el-form-item prop="technologyId" label="定制内容" class="wid100" v-if="formData.data.isCustomized==1">
                  <table style="width:100%" border class="table">
                    <tr>
                      <td style="width:20%">
                      </td>
                      <td style="width:40%">附件</td>
                      <td style="width:40%">备注</td>
                    </tr>
                    <tr v-for="(row,index) in formData.data.productCustomInfoList" :key="index">
                      <td>
                        <el-checkbox v-model="row.isCheckBox" label="" /> <span style="position:relative;top:-2px"> {{getLabel(row.type)}}</span>
                      </td>
                      <td>
                        <el-upload :file-list="row.fileList" :action="uploadUrl" :data="uploadData" :limit="1" :list-type="'text'"
                                   :before-upload="(file)=>handleBeforeUploadOne(file,index)" :on-success="()=>handleSuccessOne(index)"
                                   :on-remove="(file)=>handleRemoveFile(file,index)" :on-preview="onPreviewFile"
                                   :on-exceed="()=>msgTip(`上传文件数量不可大于1`, 2)">
                          <el-button text type="primary">上传附件</el-button>
                        </el-upload>
                      </td>
                      <td>
                        <el-form-item :prop="'productCustomInfoList.' + index + '.remark'" :rules="row.isCheckBox?rules.remark:''"
                                      class="margin-b-0 wid100">
                          <el-input v-model="row.remark" placeholder="请输入备注" />
                        </el-form-item>
                      </td>
                    </tr>
                  </table>
                </el-form-item>
              </el-row>
            </div>
          </template>

        </byForm>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false" size="defualt" v-debounce>取 消</el-button>
        <el-button type="primary" @click="submitForm()" size="defualt" v-debounce>确 定</el-button>
      </template>
    </el-dialog>

    <el-dialog :title="'BOM 配置'" v-model="bomDialog" width="900" destroy-on-close>
      <!-- <div class="public_height_dialog"> -->
      <byForm :formConfig="bomFormConfig" :formOption="bomFormOption" v-model="formData.bomData" :rules="bomRules" ref="bomFormDom"
              v-loading="submitLoading">
        <!-- <template #accessories>
          <div style="width: 100%">
            <el-button type="primary" @click="openSelectMaterial = true" plain>选择</el-button>
            <el-table :data="formData.bomData.productBomDetailList" style="width: 100%; margin-top: 16px" border>
              <el-table-column prop="materialName" label="物料名称" min-width="130" />
              <el-table-column prop="materialCode" label="物料编码" width="150" />
              <el-table-column label="数量" width="150">
                <template #default="{ row, $index }">
                  <div style="width: 100%">
                    <el-form-item :prop="'productBomDetailList.' + $index + '.quantity'" :rules="bomRules.quantity" :inline-message="true"
                                  class="margin-b-0 wid100">
                      <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%" :precision="0"
                                       :controls="false" :min="1" />
                    </el-form-item>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60" align="center" fixed="right">
                <template #default="{ $index }">
                  <el-button type="primary" link @click="handleRemove($index,1)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>

        <template #detail>
          <div style="width: 100%">
            <el-table :data="formData.bomData.processesList" style="width: 100%; " border>
              <el-table-column label="序号" type="index" width="80" />
              <el-table-column prop="code" label="工序编码" />
              <el-table-column prop="name" label="工序名称" />
            </el-table>
          </div>
        </template> -->

        <template #detail>
          <div style="width: 100%">
            <div style="text-align:center;margin-bottom:10px">
              【{{formData.bomData.name}} {{formData.bomData.code}}】BOM单
            </div>
            <table border class="table" style="width:100%">
              <tbody>
                <tr>
                  <td style="width:90px">原材料</td>
                  <td style="padding:10px">
                    <el-select v-model="formData.bomData.rawMaterialId" placeholder="请选择原材料" style="width:100%">
                      <el-option v-for="item in rawMaterialData" :key="item.value" :label="item.label" :value="item.value" filterable />
                    </el-select>
                  </td>
                </tr>
                <tr>
                  <td>
                    包材/配件/辅材
                  </td>
                  <td style="padding:20px 20px 20px">
                    <div style="text-align:left"><el-button type="primary" @click="clickOpenSelectMaterial(2)" plain>选择</el-button></div>
                    <el-table :data="formData.bomData.productBomDetailList" style="width: 100%;">
                      <el-table-column prop="materialName" label="物料名称" min-width="130" />
                      <el-table-column prop="materialCode" label="物料编码" width="150" />
                      <el-table-column label="数量" width="150">
                        <template #default="{ row, $index }">
                          <div style="width: 100%">
                            <el-form-item :prop="'productBomDetailList.' + $index + '.quantity'" :rules="bomRules.quantity" :inline-message="true"
                                          class="margin-b-0 wid100">
                              <el-input-number onmousewheel="return false;" v-model="row.quantity" placeholder="请输入" style="width: 100%"
                                               :precision="0" :controls="false" :min="1" />
                            </el-form-item>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="60" align="center" fixed="right">
                        <template #default="{ $index }">
                          <el-button type="primary" link @click="handleRemove($index,2)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </td>
                </tr>

                <tr>
                  <td>
                    生产工序
                  </td>
                  <td style="padding:0 20px 20px">
                    <el-table :data="formData.bomData.processesList" style="width: 100%; ">
                      <el-table-column label="序号" type="index" width="80" />
                      <el-table-column prop="code" label="工序编码" />
                      <el-table-column prop="name" label="工序名称" />
                    </el-table>
                  </td>
                </tr>
              </tbody>

            </table>
          </div>
        </template>

      </byForm>
      <!-- </div> -->
      <template #footer>
        <el-button @click="bomDialog = false" size="defualt" v-debounce>取 消</el-button>
        <el-button type="primary" @click="submitBomForm()" size="defualt" v-debounce>确 定</el-button>
      </template>
    </el-dialog>

    <el-dialog :title="'物料选择'" v-model="openSelectMaterial" width="90%" destroy-on-close>
      <SelectMaterial :isNeRawMaterial="'1'" @selectMaterial="selectMaterial"></SelectMaterial>
      <template #footer>
        <el-button @click="bomDialog = false" size="defualt" v-debounce>取 消</el-button>
      </template>
    </el-dialog>

    <el-dialog title="导入产品" v-model="openExcelDialog" width="400">
      <div v-loading="excelLoading">
        <el-upload :action="actionUrl + '/productInfo/excelImportByEhsd'" :headers="headers" :on-success="handleSuccess" :on-progress="handleProgress"
                   :show-file-list="false" :on-error="handleError" accept=".xlsx">
          <el-button type="primary">点击导入</el-button>
        </el-upload>
      </div>
      <template #footer>
        <el-button @click="openExcelDialog = false" size="default" v-debounce>取 消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import treeList from "@/components/product/treeList";
import SelectMaterial from "@/components/product/SelectMaterial.vue";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();
const actionUrl = import.meta.env.VITE_APP_BASE_API;
const loading = ref(false);
const submitLoading = ref(false);
const treeData = ref([]);
const treeDataOne = ref([]);
const treeListData = ref([]);
const technologyData = ref([]);
const companyData = ref([]);
const currencyData = computed(
  () => proxy.useUserStore().allDict["account_currency"]
);
const packAskData = computed(() => proxy.useUserStore().allDict["pack_ask"]);
const foldWayData = computed(() => proxy.useUserStore().allDict["fold_way"]);

const headers = ref({ Authorization: "Bearer " + getToken() });
const uploadData = ref({});
const tableHeight = ref(0);
const getTableHeight = () => {
  tableHeight.value = window.innerHeight - 245;
};
getTableHeight();
window.addEventListener("resize", () => {
  getTableHeight();
});
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
    type: "",
    productClassifyId: "",
    keyword: "",
    definition: "1",
    companyId: "",
  },
});
const dialogVisible = ref(false);
const openExcelDialog = ref(false);
const excelLoading = ref(false);
const modalType = ref("add");
const rules = ref({
  companyId: [{ required: true, message: "请选择归属公司", trigger: "change" }],
  productClassifyId: [
    { required: true, message: "请选择产品分类", trigger: "change" },
  ],
  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
  customCode: [{ required: true, message: "请输入产品编号", trigger: "blur" }],
  length: [{ required: true, message: "请输入长 （cm）", trigger: "blur" }],
  width: [{ required: true, message: "请输入宽 （cm）", trigger: "blur" }],
  height: [{ required: true, message: "请输入高 （cm）", trigger: "blur" }],
  technologyId: [
    { required: true, message: "请选择生产工艺", trigger: "change" },
  ],
  rawMaterialId: [
    { required: true, message: "请选择原材料", trigger: "change" },
  ],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
});
const props = defineProps({
  selectStatus: Boolean,
});
const selectConfig = computed(() => [
  {
    label: "业务公司",
    prop: "companyId",
    data: companyData.value,
  },
]);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "图片",
        slot: "pic",
        align: "center",
        width: 80,
      },
    },
    {
      attrs: {
        label: "业务公司",
        prop: "companyName",
        width: 150,
      },
    },
    {
      attrs: {
        label: "产品分类",
        prop: "classifyName",
        "min-width": 200,
      },
    },
    {
      attrs: {
        label: "产品编码",
        prop: "customCode",
        width: 180,
      },
    },
    {
      attrs: {
        label: "产品名称",
        slot: "name",
        "min-width": 200,
      },
    },
    // {
    //   attrs: {
    //     label: "产品英文名",
    //     prop: "nameEnglish",
    //     "min-width": 120,
    //   },
    // },
    // {
    //   attrs: {
    //     label: "产品规格",
    //     prop: "spec",
    //     width: 120,
    //   },
    // },
    {
      attrs: {
        label: "尺寸 (cm)",
        slot: "size",
        width: 130,
      },
    },
    {
      attrs: {
        label: "颜色",
        prop: "color",
        width: 100,
      },
    },
    {
      attrs: {
        label: "净重",
        prop: "netWeight",
        width: 100,
      },
      render(val) {
        if (val) {
          return val + " kg";
        }
      },
    },
    {
      attrs: {
        label: "销售价",
        prop: "price",
        width: 100,
      },
      render(val) {
        return proxy.moneyFormat(val, 2);
      },
    },
    // {
    //   attrs: {
    //     label: "海关编码",
    //     prop: "hsCode",
    //     width: 100,
    //   },
    // },
    {
      attrs: {
        label: "原材料编码",
        prop: "rawMaterialCode",
        width: 120,
      },
    },
    {
      attrs: {
        label: "原材料",
        prop: "rawMaterialName",
        "min-width": 300,
      },
    },
    {
      attrs: {
        label: "操作",
        width: "160",
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          //  {
          //     attrs: {
          //       label: "选择",
          //       type: "primary",
          //       text: true,
          //     },
          //     el: "button",
          //     click() {
          //       clickSelect(row);
          //     },
          //   }
          {
            attrs: {
              label: "BOM",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              bomSetting(row);
            },
          },
          {
            attrs: {
              label: "修改",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              getDtl(row);
            },
          },
          {
            attrs: {
              label: "删除",
              type: "danger",
              text: true,
            },
            el: "button",
            click() {
              proxy
                .msgConfirm()
                .then((res) => {
                  proxy
                    .post("/productInfo/delete", {
                      id: row.id,
                    })
                    .then((res) => {
                      proxy.msgTip("删除成功", 1);
                      getList();
                    });
                })
                .catch((err) => {});
            },
          },
        ];
      },
    },
  ];
});

const getPriceData = () => {
  if (
    formData.data["length"] &&
    formData.data.width &&
    formData.data.technologyId &&
    formData.data.rawMaterialId
  ) {
    proxy
      .post("/productInfo/getProductPrice", {
        id: formData.data.id || "",
        length: formData.data["length"],
        width: formData.data.width,
        technologyId: formData.data.technologyId,
        rawMaterialId: formData.data.rawMaterialId,
      })
      .then((res) => {
        formData.data.price = res.price;
      });
  }
};

const formData = reactive({
  data: {},
  bomData: {},
});
const formOption = reactive({
  disabled: false,
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
});
const formDom = ref(null);
const formConfig = computed(() => {
  return [
    {
      type: "title1",
      title: "基本信息",
    },
    {
      type: "treeSelect",
      prop: "companyId",
      label: "业务公司",
      data: treeDataOne.value,
      propsTreeLabel: "deptName",
      propsTreeValue: "deptId",
      itemWidth: 50,
    },
    {
      type: "treeSelect",
      prop: "productClassifyId",
      label: "产品分类",
      data: treeData.value,
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "input",
      prop: "name",
      label: "产品名称",
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "slot",
      slotName: "nameEnglish",
      label: "英文名",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "customCode",
      label: "产品编号",
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "number",
      prop: "price",
      label: "销售价",
      precision: 2,
      min: 0.01,
      controls: false,
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "uploadImg",
      // listType: "picture-card",
      // limit: 1,
      // accept: ".gif, .jpeg, .jpg, .png",
      prop: "fileList",
      imgProp: "imageUrl",
      label: "产品缩略图",
      itemWidth: 50,
    },
    {
      type: "input",
      prop: "hsCode",
      label: "海关编码",
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "slot",
      slotName: "productionFileOne",
      label: "产品原图",
      itemWidth: 100,
    },
    {
      type: "upload",
      listType: "text",
      accept: "",
      limit: 1,
      prop: "prodFileList",
      label: "生产文件",
    },
    // {
    //   type: "slot",
    //   slotName: "productionFile",
    //   label: "生产文件",
    //   itemWidth: 100,
    // },
    {
      type: "title1",
      title: "主材",
    },
    {
      type: "select",
      prop: "rawMaterialId",
      label: "原材料",
      itemWidth: 50,
      data: rawMaterialData.value,
      filterable: true,
      disabled: false,
      fn: (val) => {
        // let current = rawMaterialData.value.find((x) => x.value == val);
        // if (current) {
        //   formData.data.price = Number(
        //     parseFloat(
        //       current["length"] * current.width * current.price
        //     ).toFixed(2)
        //   );
        // }
        // getPriceData();
      },
    },

    // {
    //   type: "selectInput",
    //   prop: "price",
    //   selectProp: "currency",
    //   label: "销售价",
    //   itemWidth: 50,
    //   disabledSelect: true,
    //   data: currencyData.value,
    //   disabled: true,
    // },
    // {
    //   type: "select",
    //   prop: "technologyId",
    //   label: "生产工艺",
    //   itemWidth: 50,
    //   data: technologyData.value,
    //   filterable: true,
    //   disabled: false,
    //   fn: () => {
    //     // getPriceData();
    //   },
    // },
    // {
    //   type: "input",
    //   prop: "spec",
    //   label: "规格型号",
    //   itemWidth: 50,
    //   disabled: false,
    // },
    {
      type: "slot",
      slotName: "color",
      prop: "",
      label: "",
      itemWidth: 50,
      disabled: false,
    },
    {
      type: "slot",
      slotName: "size",
      prop: "",
      label: "",
      itemWidth: 50,
      disabled: false,
    },
    // {
    //   type: "select",
    //   prop: "innerPackMethod",
    //   label: "内包装方式",
    //   required: true,
    //   itemWidth: 50,
    //   multiple: true,
    //   data: innerMethon.value,
    //   filterable: true,
    //   placeholder: "内包装方式",
    //   style: {
    //     width: "100%",
    //   },
    //   disabled: false,
    // },
    // {
    //   type: "select",
    //   prop: "outerPackMethod",
    //   label: "外包装方式",
    //   required: true,
    //   itemWidth: 50,
    //   multiple: true,
    //   data: outsideMethon.value,
    //   filterable: true,
    //   placeholder: "外包装方式",
    //   style: {
    //     width: "100%",
    //   },
    //   disabled: false,
    // },
    {
      type: "number",
      prop: "netWeight",
      label: "净重（kg）",
      precision: 2,
      min: 0,
      controls: false,
      itemWidth: 50,
    },
    // {
    //   type: "input",
    //   itemType: "textarea",
    //   prop: "remark",
    //   label: "备注",
    //   itemWidth: 100,
    // },
    {
      type: "title1",
      title: "辅材",
    },
    {
      type: "slot",
      slotName: "materialDetail",
    },
    {
      type: "title1",
      title: "附加工艺要求",
    },
    {
      type: "slot",
      slotName: "technology",
    },
  ];
});

const getList = (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/productInfo/page", sourceList.value.pagination).then(
    (res) => {
      sourceList.value.data = res.rows.map((x) => ({
        ...x,
        fileList: [],
      }));
      sourceList.value.pagination.total = res.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
      let productIdList = res.rows.map((x) => x.id);
      // 请求文件数据并回显
      if (productIdList.length > 0) {
        // proxy.getFile(productIdList, sourceList.value.data, "id");
        proxy
          .post("/fileInfo/getList", { businessIdList: productIdList })
          .then((fileObj) => {
            for (let i = 0; i < sourceList.value.data.length; i++) {
              const ele = sourceList.value.data[i];
              for (const key in fileObj) {
                if (
                  ele.id == key &&
                  fileObj[ele.id] &&
                  fileObj[ele.id].length > 0
                ) {
                  ele.fileList = fileObj[ele.id].filter(
                    (x) => x.businessType == "0"
                  );
                }
              }
            }
          });
      }
    },
    (err) => {
      loading.value = false;
    }
  );
};

const getDict = () => {
  proxy
    .get("/tenantDept/list", {
      pageNum: 1,
      pageSize: 9999,
      keyword: "",
      tenantId: proxy.useUserStore().user.tenantId,
      type: 0,
    })
    .then((res) => {
      companyData.value = res.data.map((x) => ({
        ...x,
        label: x.deptName,
        value: x.deptId,
      }));
      treeDataOne.value = proxy.handleTree(res.data, "deptId");
    });
};
getDict();
const treeChange = (e) => {
  if (e.id != undefined) {
    sourceList.value.pagination.productClassifyId = e.id;
    getList({ productClassifyId: e.id });
  }
};
const productCustomInfoListData = ref([
  {
    type: 1,
    isCheck: 0,
    isCheckBox: false,
    fileList: [],
    remark: "",
  },
  {
    type: 2,
    isCheck: 0,
    isCheckBox: false,
    fileList: [],
    remark: "",
  },
  {
    type: 3,
    isCheck: 0,
    isCheckBox: false,
    fileList: [],
    remark: "",
  },
]);
const openModal = () => {
  dialogVisible.value = true;
  modalType.value = "add";
  formData.data = {
    definition: "1",
    fileList: [],
    currency: "",
    prodFileList: [],
    isFold: 0,
    isCustomized: 0,
    packAsk: [],
    productBomDetailList: [],
    productCustomInfoList: productCustomInfoListData.value,
  };
  // if (currencyData.value && currencyData.value.length > 0) {
  //   formData.data.currency = currencyData.value[0].dictKey;
  // }
};

const openExcel = () => {
  openExcelDialog.value = true;
};

const submitForm = () => {
  formDom.value.handleSubmit((valid) => {
    if (!formData.data.fileList.length > 0) {
      return proxy.msgTip("请上传图片", 2);
    }
    // if(!formData.data.productBomDetailList.length>0){

    // }
    // formData.data.fileList = formData.data.fileList.map((x) => ({
    //   id: x.id,
    //   fileName: x.fileName,
    //   fileUrl: x.fileUrl,
    // }));
    for (let i = 0; i < formData.data.productCustomInfoList.length; i++) {
      const ele = formData.data.productCustomInfoList[i];
      ele.isCheck = ele.isCheckBox ? 1 : 0;
      if (ele.isCheckBox) {
        if (!(ele.fileList && ele.fileList.length > 0)) {
          return proxy.msgTip(`请上传${getLabel(ele.type)}附件`, 2);
        }
      }
    }

    if (formData.data.packAsk && formData.data.packAsk.length > 0) {
      formData.data.packAsk = formData.data.packAsk.join(",");
    }
    submitLoading.value = true;
    proxy.post("/productInfo/" + modalType.value, formData.data).then(
      (res) => {
        proxy.msgTip("操作成功", 1);
        dialogVisible.value = false;
        submitLoading.value = false;
        getList();
      },
      (err) => {
        submitLoading.value = false;
        if (formData.data.packAsk) {
          formData.data.packAsk = formData.data.packAsk.split(",");
        }
      }
    );
  });
};
const getTreeList = () => {
  proxy
    .post("/productClassify/tree", { parentId: "", name: "", definition: "1" })
    .then((message) => {
      treeListData.value = [
        {
          id: "",
          label: "全部",
          parentId: "",
          children: message,
        },
      ];
      treeData.value = message;
    });
};
const getTechnologyData = () => {
  proxy.post("/technology/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    technologyData.value = res.rows;
  });
};
const getDtl = (row) => {
  modalType.value = "edit";
  proxy.post("/productInfo/detail", { id: row.id }).then((res) => {
    formData.data = res;
    formData.data.productBomDetailList =
      formData.data.productBomDetailList.filter((x) => x.type == 2);

    if (
      formData.data.productCustomInfoList &&
      formData.data.productCustomInfoList.length > 0
    ) {
      formData.data.productCustomInfoList.forEach((x) => {
        x.isCheckBox = x.isCheck == 1;
        if (!x.fileList) {
          x.fileList = [];
        } else {
          x.fileList = x.fileList.map((x) => ({
            ...x,
            url: x.fileUrl,
            name: x.fileName,
          }));
        }
      });
    }
    // let list = [];
    // for (let i = 0; i < productCustomInfoListData.value.length; i++) {
    //   const iele = productCustomInfoListData.value[i];
    //   let current = formData.data.productCustomInfoList.find(
    //     (x) => x.type == iele.type
    //   );
    //   if (current) {
    //     list.push({
    //       ...iele,
    //       ...current,
    //       isCheckBox: current.isCheck == 1,
    //       fileList: current.fileList.map((x) => ({
    //         ...x,
    //         url: x.fileUrl,
    //         name: x.fileName,
    //       })),
    //     });
    //   } else {
    //     list.push(iele);
    //   }
    // }
    // formData.data.productCustomInfoList = list;
    if (formData.data.packAsk) {
      formData.data.packAsk = formData.data.packAsk.split(",");
    }
    formData.data.fileList = row.fileList.map((x) => ({
      ...x,
      url: x.fileUrl,
      name: x.fileName,
    }));
    if (formData.data.fileList.length > 0) {
      formData.data.imageUrl = formData.data.fileList[0].fileUrl;
    }

    proxy
      .post("/fileInfo/getList", { businessIdList: [row.id] })
      .then((fileObj) => {
        if (fileObj[row.id] && fileObj[row.id].length > 0) {
          formData.data.prodFileList = fileObj[row.id]
            .filter((x) => x.businessType == "2")
            .map((item) => {
              return {
                ...item,
                name: item.fileName,
                url: item.fileUrl,
              };
            });
        } else {
          formData.data.prodFileList = [];
        }
      });

    dialogVisible.value = true;
  });
};
const rawMaterialData = ref([]);
const getRawMaterialData = () => {
  proxy.post("/productInfo/page", { productClassifyId: 100 }).then((res) => {
    rawMaterialData.value = res.rows.map((x) => ({
      ...x,
      label:
        x.name +
        "，" +
        x.customCode +
        "，" +
        `${x["length"]}*${x.width}*${x.height}（cm）` +
        "，" +
        x.color,
      value: x.id,
    }));
  });
};
getRawMaterialData();
const bomDialog = ref(false);
const bomFormDom = ref(null);
const bomFormOption = reactive({
  disabled: false,
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
});
const bomFormConfig = computed(() => {
  return [
    // {
    //   type: "title1",
    //   title: "BOM 信息",
    // },
    // {
    //   type: "select",
    //   prop: "rawMaterialId",
    //   label: "原材料",
    //   itemWidth: 100,
    //   data: rawMaterialData.value,
    //   filterable: true,
    //   disabled: false,
    // },
    // {
    //   type: "slot",
    //   slotName: "accessories",
    //   label: "包材辅料",
    //   itemWidth: 100,
    // },
    // {
    //   type: "title1",
    //   title: "生产工序",
    // },
    {
      type: "slot",
      slotName: "detail",
      label: "",
    },
  ];
});
const bomRules = ref({
  rawMaterialId: [
    { required: true, message: "请选择原材料", trigger: "change" },
  ],
  quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
});
const bomSetting = (row) => {
  bomDialog.value = true;
  proxy.post("/productBomInfo/detail", { id: row.id }).then((res) => {
    formData.bomData = {
      name: row.name,
      code: row.customCode,
      id: res.id,
      rawMaterialId: res.rawMaterialId,
      productBomDetailList: [],
      processesList: res.processesList,
    };
    if (res.productBomDetailList && res.productBomDetailList.length > 0) {
      formData.bomData.productBomDetailList = res.productBomDetailList.filter(
        (x) => x.type == 2
      );
    } else {
      formData.bomData.productBomDetailList = [];
    }
  });
};

const submitBomForm = () => {
  bomFormDom.value.handleSubmit((valid) => {
    if (!formData.bomData.productBomDetailList.length > 0) {
      return proxy.msgTip("请选择包材辅料", 2);
    }
    formData.bomData.productBomDetailList.push({
      materialId: formData.bomData.rawMaterialId,
      type: 1,
      quantity: 1,
    });
    submitLoading.value = true;
    proxy.post("/productBomInfo/edit", formData.bomData).then(
      (res) => {
        proxy.msgTip("操作成功", 1);
        getList();
        bomDialog.value = false;
        submitLoading.value = false;
      },
      (err) => {
        submitLoading.value = false;
      }
    );
  });
};
const openSelectMaterial = ref(false);
const openType = ref(-1);
const clickOpenSelectMaterial = (type) => {
  openType.value = type;
  openSelectMaterial.value = true;
};
const selectMaterial = (row) => {
  if (openType.value == 1) {
    let flag = formData.data.productBomDetailList.some(
      (x) => x.materialId == row.id
    );
    if (!flag) {
      formData.data.productBomDetailList.push({
        type: 2,
        materialName: row.name,
        materialCode: row.customCode,
        materialId: row.id,
        quantity: null,
      });
      proxy.msgTip("选择成功");
    } else {
      proxy.msgTip("该物料已选择", 2);
    }
  } else {
    let flag = formData.bomData.productBomDetailList.some(
      (x) => x.materialId == row.id
    );
    if (!flag) {
      formData.bomData.productBomDetailList.push({
        type: 2,
        materialName: row.name,
        materialCode: row.customCode,
        materialId: row.id,
        quantity: null,
      });
      proxy.msgTip("选择成功");
    } else {
      proxy.msgTip("该物料已选择", 2);
    }
  }
};
const handleRemove = (index, type) => {
  if (type == 1) {
    formData.data.productBomDetailList.splice(index, 1);
  } else {
    formData.bomData.productBomDetailList.splice(index, 1);
  }
};

const handleClickFile = (file) => {
  window.open(file.fileUrl, "_blank");
};
const handleProgress = () => {
  excelLoading.value = true;
};
const handleError = (err) => {
  proxy.msgTip(`${err}，请重试`, 2);
  openExcelDialog.value = false;
  excelLoading.value = false;
};
const handleSuccess = (res) => {
  if (res.code != 200) {
    return proxy.msgTip(`${err}，请重试`, 2);
  } else {
    proxy.msgTip(`导入成功`, 1);
    openExcelDialog.value = false;
    excelLoading.value = false;
    getList();
  }
};

const clickSelect = (item) => {
  proxy.$emit("selectProduct", item);
};

const handleClickUpload = async (att, flag) => {
  let res = null;
  let path = "";
  if (flag) {
    proxy.msgTip("请稍后", 2);
    res = await proxy.post("/fileService/createTempFolder");
    if (res && res.path) {
      formData.data[att] = res.path;
      path = res.path;
    }
  } else {
    path = formData.data[att];
  }
  let a = document.createElement("a");
  a.href = "printer://" + "ftp://121.37.194.75/" + path + "/";
  a.style.display = "none";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};
getTechnologyData();
getTreeList();
getList();

const exportExcel = () => {
  proxy.msgTip("正在导出，请稍后", 2);
  proxy
    .postTwo("/productInfo/exportExcel", sourceList.value.pagination)
    .then((res) => {
      proxy.downloadFile(res, "产品数据.xlsx");
    });
};

const handleBeforeUploadOne = async (file, index) => {
  const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
  file.id = res.id;
  file.fileUrl = res.fileUrl;
  uploadData.value = res.uploadBody;
  formData.data.productCustomInfoList[index].fileData = res;
  return true;
};

const handleSuccessOne = (index) => {
  if (
    formData.data.productCustomInfoList[index].fileData &&
    formData.data.productCustomInfoList[index].fileData.fileUrl
  ) {
    let file = formData.data.productCustomInfoList[index].fileData;
    formData.data.productCustomInfoList[index].fileList.push({
      id: file.id,
      fileName: file.fileName,
      name: file.fileName,
      url: file.fileUrl,
      fileUrl: file.fileUrl,
    });
    formData.data.productCustomInfoList[index].fileData = {};
  }
};

const handleRemoveFile = (file, index) => {
  let sonIndex = formData.data.productCustomInfoList[index].fileList.findIndex(
    (x) => x.id == file.id || x.id == file.raw.id
  );
  if (sonIndex > -1) {
    formData.data.productCustomInfoList[index].fileList.splice(sonIndex, 1);
  }
};

const onPreviewFile = (file) => {
  if (file && file.fileUrl) {
    window.open(file.fileUrl, "_blank");
  } else {
    window.open(file.raw.fileUrl, "_blank");
  }
};
let obj = {
  1: "定制刀模",
  2: "定制纹路",
  3: "定制模具",
};
const getLabel = (type) => {
  return obj[type];
};
</script>

<style lang="scss" scoped>
.box {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  .tree {
    width: 300px;
  }
  .content {
    width: calc(100% - 310px);
  }
}
.pic {
  object-fit: contain;
  width: 50px;
  height: 50px;
  cursor: pointer;
  vertical-align: middle;
}
.table {
  border-collapse: collapse;
  border-spacing: 0;

  td {
    text-align: center;
    padding: 2px 4px;
    // padding: 5px 10px;
  }
}
.small-title {
  padding-left: 15px;
  margin-bottom: 10px;
  color: #3366ff;
  font-size: 14px;
}
:deep(.el-checkbox) {
  margin-right: 0px;
}
</style>