saas_entrepot_admin/src/components/goodsList/index.vue

<template>
  <div id="">
    <el-dialog
      :visible.sync="dialogVisible"
      width="1088px"
      :show-close="false"
      :close-on-click-modal="false"
      destroy-on-close
      @closed="close"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">选择商品</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <search-box-new
        ref="searchBox"
        :formData="formData"
        :formList="formList"
        @search="search"
        @init="search(2)"
        :topType="topType"
      />
      <el-table
        ref="table"
        row-key="goodsId"
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%"
        @selection-change="selectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          reserve-selection
          :selectable="dis_active"
        >
        </el-table-column>
        <el-table-column
          align="center"
          type="index"
          :disabled="true"
        ></el-table-column>
        <template v-for="(item, index) in tableSet">
          <el-table-column
            header-align="center"
            :align="item.align ? item.align : 'center'"
            :prop="item.prop"
            :label="item.label"
            :width="item.width || ''"
            ><template slot-scope="scope"
              ><div v-if="item.scope === 'options'">
                <template v-for="(itemt, indext) in item.options">
                  <span v-if="itemt.value === scope.row[item.prop]">{{
                    itemt.label
                  }}</span>
                </template>
              </div>
              <span v-else-if="item.scope === 'leftCh'"
                >{{ item.ch }}{{ scope.row[item.prop] }}</span
              >
              <span v-else>{{ scope.row[item.prop] }}</span></template
            >
          </el-table-column>
        </template>
      </el-table>
      <div style="margin-top: 10px; text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTable" :loading="disbtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchBoxNew from "@/components/searchBoxNew";
export default {
  components: { searchBoxNew },
  data() {
    return {
      topType: true,
      disbtn: false,
      dialogVisible: false,
      //搜索
      formList: [
        {
          prop: "educationTypeId",
          placeholder: "教育类型",
          scope: "educationType",
        },
        {
          prop: "businessId",
          placeholder: "业务层次",
          scope: "businessLevel",
          edu: "educationTypeId",
        },
        {
          prop: "schoolId",
          placeholder: "院校",
          scope: "schoolList",
          edu: "educationTypeId",
        },
        {
          prop: "majorId",
          placeholder: "专业",
          scope: "Professional",
          edu: "educationTypeId",
        },
        {
          prop: "subjectId",
          placeholder: "科目",
          scope: "sujectType",
          edu: "educationTypeId",
        },
        {
          prop: "status",
          placeholder: "商品状态",
          scope: "select",
          noClear: false,
          options: [
            {
              label: "全部状态",
              value: "0,1",
            },
            {
              label: "有效",
              value: 1,
            },
            {
              label: "无效",
              value: 0,
            },
          ],
        },
        {
          prop: "goodsStatus",
          placeholder: "前台可售状态",
          scope: "select",
          options: [
            {
              label: "已上架",
              value: 1,
            },
            {
              label: "未上架",
              value: 0,
            },
          ],
        },
        {
          prop1: "validityStartTime",
          prop2: "validityEndTime",
          placeholder1: "商品有效期开始时间",
          placeholder2: "商品有效期结束时间",
          scope: "moreDataPicker",
        },
        // {
        //   prop: "orderGoodsStatus",
        //   placeholder: "退款状态",
        //   scope: "select",
        //   options: [
        //     {
        //       label: "已退款",
        //       value: 1,
        //     },
        //     {
        //       label: "退款中",
        //       value: 2,
        //     },
        //     {
        //       label: "拒绝退款",
        //       value: 3,
        //     },
        //   ],
        // },
        {
          prop: "goodsName",
          placeholder: "请输入商品名称",
        },
      ],
      formData: {
        goodsType: "",
        status: "0,1",
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet: [
        {
          label: "商品名称",
          prop: "goodsName",
          hidden: true,
        },
        {
          label: "商品编码",
          prop: "code",
          hidden: true,
        },
        {
          label: "科目",
          prop: "subjectNames",
          hidden: true,
        },
        {
          label: "学时",
          prop: "classHours",
          hidden: true,
        },
        {
          label: "商品价格",
          prop: "standPrice",
          hidden: true,
          scope: "leftCh",
          ch: "￥",
        },
        {
          label: "商品划线价",
          prop: "linePrice",
          hidden: true,
          scope: "leftCh",
          ch: "￥",
        },
        {
          label: "可售状态",
          prop: "goodsStatus",
          hidden: true,
          scope: "options",
          options: [
            {
              label: "正常",
              value: 1,
            },
            {
              label: "关闭",
              value: 0,
            },
          ],
        },
      ],
      tableData: [],
      loading: false,
      total: 0,
      outActive: [], //置灰列表
      active: [], //当前选中
    };
  },
  methods: {
    selectionChange(e) {
      this.active = e;
    },
    showBox(e) {
      if (e && e.length > 0) {
        this.outActive = e;
      }
      this.search(2);
      this.dialogVisible = true;
    },
    dis_active(e) {
      return this.outActive.includes(e.goodsId) ? false : true;
    },
    search(int) {
      if (int === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          goodsType: "",
          status: "0,1",
        };
      }
      if (int === 3) {
        this.formData.pageNum = 1;
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      if (this.formData.validityStartTime) {
        data.validityStartTime = data.validityStartTime / 1000;
      }
      if (this.formData.validityEndTime) {
        data.validityEndTime = data.validityEndTime / 1000;
      }
      this.loading = true;
      this.$api
        .inquireGoods(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    submitTable() {
      if (this.active.length === 0) {
        this.$message.warning("请勾选商品");
        return;
      }
      this.disbtn = true;
      const array = this.active.map((item) => {
        return {
          goodsId: item.goodsId,
          goodsName: item.goodsName,
          goodsPrice: item.standPrice,
          profitMax: "",
          profitType: 1,
          profitOne: "",
          profitTwo: "",
          profitThree: "",
        };
      });
      this.dialogVisible = false;
      this.$emit("backGoodsList", array);
    },
    close() {
      this.disbtn = false;
      this.$refs.table.clearSelection();
      this.outActive = [];
      this.active = [];
    },
    handleSizeChange(e) {
      this.formData.pageSize = e;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(e) {
      this.formData.pageNum = e;
      this.search();
    },
  },
};
</script>

<style lang="scss" scoped></style>