sd-new-vue/src/views/group/product/management/index.vue

<template>
  <div>
    <el-card :class="props.selectStatus ? 'select-card' : 'box-card'">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        :searchConfig="searchConfig"
        :defaultExpandAll="props.selectStatus"
        highlight-current-row
        :action-list="[
          props.selectStatus
            ? {}
            : {
                text: '添加产品',
                action: () => clickModal(),
              },
          props.selectStatus
            ? {}
            : {
                text: '批量修改',
                action: () => batchModification(),
              },
          // {
          //   text: '操作日志',
          //   action: () => viewLogs(),
          // },
        ]"
        @get-list="getList"
        @clickReset="clickReset">
        <template #typeExpand="{ item }">
          <div style="padding: 0px 20px; box-sizing: border-box" v-if="item.skuSpecList && item.skuSpecList.length > 0">
            <div
              v-for="spec in item.skuSpecList"
              :key="spec.id"
              style="display: flex; padding: 8px 16px; align-items: center; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); margin-bottom: 8px">
              <div style="width: 80px">
                <div v-if="spec.specImgUrl">
                  <img
                    style="width: 40px; height: 40px; object-fit: contain; vertical-align: middle; border: none; cursor: pointer"
                    :src="spec.specImgUrl"
                    @click="openFile(spec.specImgUrl)" />
                </div>
                <div
                  v-else
                  class="el-icon-picture-outline"
                  style="width: 40px; height: 40px; font-size: 36px; line-height: 40px; text-align: center; color: rgb(229 228 228)"></div>
              </div>
              <div style="width: 180px">
                {{ spec.code }}
              </div>
              <div style="flex: 1">
                {{ spec.name }}
              </div>
              <div style="width: 180px">
                {{ `${spec.length}  *  ${spec.width}  *  ${spec.height}（cm³）` }}
              </div>
              <div style="width: 60px; text-align: center" v-if="props.selectStatus">
                <el-button type="primary" text @click="selectProduct(spec, item)" v-preReClick>选择</el-button>
              </div>
            </div>
          </div>
        </template>
        <template #name="{ item }">
          <div>
            <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickName(item)">{{ item.name }}</a>
          </div>
        </template>
      </byTable>
    </el-card>

    <el-dialog :title="modalTitle" v-if="openDialog" v-model="openDialog" width="90%">
      <MakeSKU :rowData="rowData" :detailStatus="detailStatus" @clickCancel="clickCancel"></MakeSKU>
    </el-dialog>

    <el-dialog title="操作日志" v-if="openLogs" v-model="openLogs" width="50%">
      <byTable
        :source="logsList.data"
        :pagination="logsList.pagination"
        :config="configLogs"
        :loading="loadingLogs"
        highlight-current-row
        @get-list="getLogsList">
      </byTable>
      <template #footer>
        <el-button @click="openLogs = false" size="large">关 闭</el-button>
      </template>
    </el-dialog>

    <el-dialog title="批量修改" v-if="openModification" v-model="openModification" width="96%">
      <Modification :type="0" @clickCancel="clickModificationCancel"></Modification>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "/src/components/byTable/index";
import MakeSKU from "/src/components/makeProduct/index";
import Modification from "/src/components/makeProduct/modification/index";

const { proxy } = getCurrentInstance();
const props = defineProps({
  selectStatus: Boolean,
});
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    name: "",
    code: "",
    specCode: "",
    specName: "",
    type: 0,
    brand: "",
  },
});
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "code",
      label: "群组品号",
    },
    {
      type: "input",
      prop: "name",
      label: "群组品名",
    },
    {
      type: "input",
      prop: "specCode",
      label: "品号",
    },
    {
      type: "input",
      prop: "specName",
      label: "品名",
    },
    {
      type: "select",
      prop: "brand",
      dictKey: "wlnBrand",
      label: "品牌",
    },
  ];
});
const config = computed(() => {
  return [
    {
      type: "expand",
      attrs: {
        label: " ",
        slot: "typeExpand",
        width: 50,
      },
    },
    {
      attrs: {
        label: "群组品号",
        prop: "code",
        width: 180,
      },
    },
    {
      attrs: {
        label: "群组品名",
        slot: "name",
        "min-width": 240,
      },
    },
    {
      attrs: {
        label: "产品来源",
        prop: "source",
        width: 120,
      },
      render(val) {
        return val == 1 ? "MES" : "万里牛";
      },
    },
    {
      attrs: {
        label: "品牌",
        prop: "brand",
        width: 120,
      },
      render(val) {
        return proxy.dictKeyValue(val, proxy.useUserStore().allDict["wlnBrand"]);
      },
    },
    {
      attrs: {
        label: "型号",
        prop: "modelNumber",
        width: 200,
      },
    },
    {
      attrs: {
        label: "材质",
        prop: "material",
        width: 200,
      },
    },
    props.selectStatus
      ? {
          attrs: { width: 1 },
        }
      : {
          attrs: {
            label: "操作",
            width: 80,
            align: "center",
            fixed: "right",
          },
          renderHTML(row) {
            return [
              {
                attrs: {
                  label: "编辑",
                  type: "primary",
                  text: true,
                },
                el: "button",
                click() {
                  clickUpdate(row);
                },
              },
            ];
          },
        },
  ];
});
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
      type: 0,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/sku/page", sourceList.value.pagination).then((res) => {
    sourceList.value.data = res.rows;
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const modalTitle = ref("添加SKU");
const openDialog = ref(false);
const rowData = ref({});
const detailStatus = ref(false);
const clickModal = () => {
  modalTitle.value = "添加SKU";
  rowData.value = {};
  detailStatus.value = false;
  openDialog.value = true;
};
const clickUpdate = (row) => {
  modalTitle.value = "编辑SKU";
  rowData.value = row;
  detailStatus.value = false;
  openDialog.value = true;
};
const clickCancel = (status) => {
  openDialog.value = false;
  if (status) {
    getList();
  }
};
const openFile = (path) => {
  window.open(path);
};
const clickName = (row) => {
  modalTitle.value = "SKU详情";
  rowData.value = row;
  detailStatus.value = true;
  openDialog.value = true;
};
const openLogs = ref(false);
const loadingLogs = ref(false);
const logsList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});
const type = ref([
  { dictKey: "1", dictValue: "新增" },
  { dictKey: "2", dictValue: "修改" },
  { dictKey: "3", dictValue: "删除" },
]);
const configLogs = computed(() => {
  return [
    {
      attrs: {
        label: "操作时间",
        prop: "createTime",
        width: 160,
        align: "center",
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "operator",
        align: "center",
      },
    },
    {
      attrs: {
        label: "SKU品号",
        prop: "code",
        align: "center",
      },
    },
    {
      attrs: {
        label: "行为",
        prop: "type",
        width: 100,
        align: "center",
      },
      render(val) {
        return proxy.dictKeyValue(val, type.value);
      },
    },
  ];
});
const viewLogs = () => {
  logsList.value.data = [];
  logsList.value.pagination.total = 0;
  openLogs.value = true;
  getLogsList({ pageNum: 1, pageSize: 10 });
};
const getLogsList = async (req) => {
  logsList.value.pagination = { ...logsList.value.pagination, ...req };
  loadingLogs.value = true;
  proxy.post("/bomOperatingLog/page", logsList.value.pagination).then((res) => {
    logsList.value.data = res.rows;
    logsList.value.pagination.total = res.total;
    setTimeout(() => {
      loadingLogs.value = false;
    }, 200);
  });
};
const emit = defineEmits(["selectProduct"]);
const selectProduct = (spec, item) => {
  emit("selectProduct", spec, item);
};
const openModification = ref(false);
const batchModification = () => {
  openModification.value = true;
};
const clickModificationCancel = (status) => {
  openModification.value = false;
  if (status) {
    getList();
  }
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.select-card {
  height: calc(100vh - 184px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>