erp_wdly/src/components/product/SelectGoods.vue

<template>
  <div>
    <byTable
      ref="table"
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      highlight-current-row
      :selectConfig="selectConfig"
      :table-events="{
        //element talbe事件都能传
        select: select,
      }"
      :action-list="[]"
      @get-list="getList"
    >
    </byTable>
    <div>
      <div>已选择货品</div>
      <div style="margin: 10px 0px">
        <el-tag
          style="margin-right: 10px"
          type="info"
          closable
          v-for="(good, index) in goodList"
          :key="good.id"
          @close="handleRemove(index)"
          >{{ good.name }}</el-tag
        >
      </div>
      <div style="text-align: center">
        <el-button @click="handleCancel" size="large">取消</el-button>
        <el-button type="primary" @click="handleSubmit" size="large">
          确 定
        </el-button>
      </div>
    </div>
  </div>
</template>
  
<script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import treeList from "@/components/product/treeList";
import { computed, defineComponent, ref, watch } from "vue";
const loading = ref(false);
const submitLoading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
    type: "",
    productClassifyId: "",
    keyword: "",
    definition: "1",
  },
});
let dialogVisible = ref(false);
let openExcelDialog = ref(false);

let modalType = ref("add");
let rules = ref({
  productClassifyId: [
    { required: true, message: "请选择产品分类", trigger: "change" },
  ],
  type: [{ required: true, message: "请选择产品类型", trigger: "change" }],
  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
  unit: [{ required: true, message: "请选择单位", trigger: "change" }],
});
const { proxy } = getCurrentInstance();
const selectConfig = reactive([
  {
    label: "物品类型",
    prop: "definition",
    isShowAll: false, //不显示全部搜索
    data: [
      {
        label: "产品",
        value: "1",
      },
      {
        label: "物料",
        value: "2",
      },
    ],
  },
  {
    label: "所属分类",
    prop: "productClassifyId",
    data: [],
  },
]);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "货品类型",
        prop: "type",
      },
      render(type) {
        return sourceList.value.pagination.definition == 1 ? "产品" : "物料";
      },
    },
    {
      attrs: {
        label: "所属分类",
        prop: "classifyName",
      },
    },
    {
      attrs: {
        label: "货品编码",
        prop: "code",
      },
    },
    {
      attrs: {
        label: "货品名称",
        prop: "name",
      },
    },

    {
      attrs: {
        label: "规格",
        prop: "spec",
      },
    },
    {
      attrs: {
        label: "单位",
        prop: "unit",
      },
      render(unit) {
        return proxy.dictValueLabel(unit, productUnit.value);
      },
    },
    {
      attrs: {
        label: "操作",
        width: "60",
        align: "center",
        fixed: "right",
      },
      // 渲染 el-button，一般用在最后一列。
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "选择",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              handleSelect(row);
            },
          },
        ];
      },
    },
  ];
});

let formData = reactive({
  data: {},
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const byform = ref(null);
const treeListData = ref([]);
const formConfig = computed(() => {
  return [
    {
      type: "treeSelect",
      prop: "productClassifyId",
      label: "产品分类",
      data: [],
    },
    {
      type: "select",
      prop: "type",
      label: "产品类型",
      required: true,
      data: [
        {
          label: "成品",
          id: "1",
        },
        {
          label: "半成品",
          id: "2",
        },
      ],
    },
    {
      type: "input",
      prop: "name",
      label: "产品名称",
    },
    {
      type: "input",
      prop: "spec",
      label: "规格",
    },
    {
      type: "select",
      prop: "unit",
      label: "单位",
      required: true,
      data: [
        {
          label: "个",
          id: "个",
        },
        {
          label: "双",
          id: "双",
        },
      ],
    },
    {
      type: "slot",
      slotName: "productPic",
      prop: "fileList",
      label: "产品图片",
    },
    {
      type: "input",
      prop: "remark",
      label: "备注",
      itemType: "textarea",
    },
  ];
});

const lastDefinition = ref("");
const getList = async (req = {}) => {
  for (const key in req) {
    sourceList.value.pagination[key] = req[key];
    if (key === "definition") {
      if (lastDefinition.value !== req[key]) {
        getTreeList();
        lastDefinition.value = req[key];
        // 如果选择的物品分类不一致，则分类默认选中全部
        return table.value.searchItemSelct("all", selectConfig[1]);
      }
    }
  }
  sourceList.value.pagination = {
    ...sourceList.value.pagination,
    ...req,
  };
  loading.value = true;
  proxy
    .post("/productInfo/page", sourceList.value.pagination)
    .then((message) => {
      sourceList.value.data = message.rows.map((x) => ({ ...x, fileList: [] }));
      sourceList.value.pagination.total = message.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);

      const productIdList = message.rows.map((x) => x.id);
      // 请求文件数据并回显
      if (productIdList.length > 0) {
        proxy
          .post("/fileInfo/getList", { businessIdList: productIdList })
          .then((fileObj) => {
            for (let i = 0; i < sourceList.value.data.length; i++) {
              const e = sourceList.value.data[i];
              for (const key in fileObj) {
                if (e.id === key) {
                  e.fileList = fileObj[key];
                }
              }
            }
          });
      }
    });
};

const getTreeList = () => {
  proxy
    .post("/productClassify/tree", {
      parentId: "",
      name: "",
      definition: sourceList.value.pagination.definition,
    })
    .then((message) => {
      selectConfig[1].data = message.map((x) => ({
        label: x.label,
        value: x.id,
      }));
    });
};

const goodList = ref([]);
const handleSelect = (row) => {
  const flag = goodList.value.some((x) => x.id === row.id);
  if (flag)
    return ElMessage({
      message: "该产品已选择",
      type: "info",
    });
  goodList.value.push({
    ...row,
    goodType: sourceList.value.pagination.definition,
  });
  return ElMessage({
    message: "选择成功",
    type: "success",
  });
};

const handleRemove = (index) => {
  goodList.value.splice(index, 1);
  return ElMessage({
    message: "删除成功",
    type: "success",
  });
};

const handleSubmit = () => {
  if (!goodList.value.length > 0)
    return ElMessage({
      message: "请添加货品",
      type: "info",
    });
  proxy.$emit("pushGoods", goodList.value);
  goodList.value = [];
};

const handleCancel = () => {
  goodList.value = [];
  proxy.$emit("cancel");
};

const table = ref(null);

const searchItemSelct = () => {
  // 默认选中的方法
  table.value.searchItemSelct(selectConfig[0].data[0], selectConfig[0]);
};
const productUnit = ref([]);
const getDict = () => {
  proxy.getDictOne(["unit"]).then((res) => {
    productUnit.value = res["unit"].map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
  });
};
getDict();

onMounted(() => {
  searchItemSelct();
});
</script>
  
<style lang="scss" scoped>
.user {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .tree {
    width: 300px;
  }
  .content {
    width: calc(100% - 320px);
  }
}
.pic {
  object-fit: contain;
  width: 50px;
  height: 50px;
  cursor: pointer;
  vertical-align: middle;
}
</style>