refinery-admin/src/views/product/index.vue

<template>
  <div class="order">
    <div class="frame">
      <el-input
        class="mr20"
        v-model="parameter.params.productName"
        placeholder="产品名称"
        clearable
      ></el-input>
      <el-select
        v-model="parameter.params.productType"
        placeholder="产品类型"
        clearable
      >
        <el-option
          v-for="(item, index) in productTypeList"
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <!-- 炼厂名称 -->
      <autocomplete :params="parameter.params" :config="configAutocomplete" />
      <el-input
        v-model="parameter.params.belongLibrary"
        placeholder="所处炼厂库"
        clearable
      ></el-input>
      <el-select
        v-model="parameter.params.enableMark"
        placeholder="启用禁用"
        clearable
      >
        <el-option label="启用" value="ENABLE"> </el-option>
        <el-option label="禁用" value="DISABLE"> </el-option>
      </el-select>

      <div class="buttons">
        <el-button icon="el-icon-search" @click="search">查询</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="table">
      <div class="operation">
        <el-button @click="addition">新增产品</el-button>
        <el-button @click="batchHandler">批量启禁用</el-button>
        <el-button @click="createOrder">下单</el-button>
      </div>
      <el-table
        v-if="tableHeight"
        ref="multipleTable"
        :height="tableHeight"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="$utils.cellStyle"
        :cell-style="$utils.cellStyle"
      >
        >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="productName"
          label="产品名称"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column prop="productType" label="产品类型"> </el-table-column>

        <el-table-column
          prop="refineryName"
          label="炼厂名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="belongLibrary"
          label="所属炼厂库"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="orderSerialNumber" label="启用状态" width="80">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.enableMark"
              active-value="ENABLE"
              inactive-value="DISABLE"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="
                (val) => {
                  switchTrigger(val, row);
                }
              "
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="refineryLevel" label="成本价" width="110">
          <template slot-scope="{ row }">
            {{ row.floorPrice | toNumberFixed }}/{{ row.measurement }}
          </template>
        </el-table-column>
        <el-table-column prop="refineryLevel" label="企业销售价" width="110">
          <template slot-scope="{ row }">
            {{ row.salePrice2company | toNumberFixed }}/{{ row.measurement }}
          </template>
        </el-table-column>
        <el-table-column prop="refineryLevel" label="个人销售价" width="110">
          <template slot-scope="{ row }">
            {{ row.salePrice2personal | toNumberFixed }}/{{ row.measurement }}
          </template>
        </el-table-column>
        <el-table-column label="时间" width="235">
          <template slot-scope="{ row }">
            <p class="gray">
              创建时间 <span>{{ row.createTime }}</span>
            </p>
            <p class="gray">
              更新时间 <span>{{ row.updateTime || " - -" }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="210">
          <template slot-scope="{ row }">
            <span class="el-dropdown-link" @click="detail(row)">详情</span>
            <span class="el-dropdown-link special" @click="adjustPrice(row)"
              >调价</span
            >
            <el-dropdown
              @command="
                (val) => {
                  commandPrice(val, row);
                }
              "
            >
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="record">调价记录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span
              v-show="row.enableMark == 'ENABLE'"
              class="el-dropdown-link"
              @click="updateCreate(row)"
              >下单</span
            >
            <el-dropdown
              @command="
                (val) => {
                  commandMore(val, row);
                }
              "
            >
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="base">修改基础信息</el-dropdown-item>
                <el-dropdown-item command="settle"
                  >修改结算账户</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination :parameter="parameter" @searchAgain="getByPage" />
    </div>
    <!--新增产品  -->
    <add :controlWindows="controlWindows" @closeWindow="search" />
    <!-- 下单 -->
    <create  :controlWindows="controlWindows" @closeWindow="search" />
    <!-- 调价记录 -->
    <record :controlWindows="controlWindows" />
    <!-- 批量 -->
    <batch
      :controlWindows="controlWindows"
      :multipleRowList="multipleRowList"
      @closeWindow="search"
    />
    <!-- 调价 -->
    <adjust :controlWindows="controlWindows" @closeWindow="search" />
    <!-- 详情 -->
    <el-drawer
      title="详情"
      direction="ltr"
      size="60%"
      :withHeader="false"
      :visible.sync="controlWindows.detail"
    >
      <general-details
        title="详情"
        :isHeader="true"
        v-if="controlWindows.detail"
        :sourceData="oilCompanyMatch"
        :mappingData="mappingData"
        @close="controlWindows.detail = false"
      >
        <template #enableMark>
          <p>
            {{ oilCompanyMatch[0].enableMark === "ENABLE" ? "启用" : "禁用" }}
          </p>
        </template>
      </general-details>
    </el-drawer>
  </div>
</template>

<script>
import serve from "api/product.js";
import refineryInfoServe from "api/refineryInfo.js";

import add from "./components/add.vue";
import create from "./components/create.vue";
import record from "./components/record.vue";
import batch from "./components/batch.vue";
import adjust from "./components/adjust.vue";

import autocomplete from "components/autocomplete/index.vue";
import pagination from "components/pagination/index.vue";
import generalDetails from "components/generalDetails/index.vue";

export default {
  components: {
    add,
    create,
    record,
    batch,
    adjust,

    pagination,
    autocomplete,
    generalDetails,
  },
  filters: {
    toNumberFixed(val) {
      if (val) {
        return Number(val).toFixed(2);
      } else {
        return "暂无";
      }
    },
  },
  data() {
    return {
      controlWindows: {
        add: false,
        addInfo: {},
        detail: false,
        create: false,
        record: false,
        batch: false,
        adjust: false,
      },
      productTypeList: ["0#柴", "-10#柴", "92#汽", "95#汽"],
      configAutocomplete: {
        serveTarget: refineryInfoServe.findByEntity,
        autocompleteKey: "refineryName",
        labelKey: "refineryName",
        valueKey: "id",
        placeholder: "炼厂名称",
        querykey: "refineryId",
      },
      refineryList: [],
      multipleRowList: [],
      tableHeight: 0,
      tableData: [],
      parameter: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        params: {},
      },
      oilCompanyMatch: {},
      mappingData: [
        {
          carTitle: "",
          carItems: [
            { label: "炼厂id", value: "refineryId" },
            { label: "炼厂名称", value: "refineryName" },
            { label: "产品名称", value: "productName" },
            { label: "产品类型", value: "productType" },
            { label: "成本价", value: "floorPrice" },
            { label: "企业销售价", value: "salePrice2company" },
            { label: "个人销售价", value: "salePrice2personal" },
            { label: "计量单位", value: "measurement" },
            { label: "启用/禁用", value: "enableMark" },
            { label: "所属炼厂库名", value: "belongLibrary" },
            { label: "创建用户ID", value: "createUser" },
            { label: "创建时间", value: "createTime" },
            { label: "修改用户ID", value: "updateUser" },
            { label: "修改时间", value: "updateTime" },
          ],
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.heightHandle();
    });
    window.addEventListener(
      "resize",
      this.$utils.debounce(this.heightHandle, 500)
    );
  },
  created() {
    this.getByPage();
  },
  methods: {
    // 多选
    handleSelectionChange(val) {
      this.multipleRowList = val;
    },
    search() {
      this.parameter.currentPage = 1;
      this.getByPage();
    },
    //table list
    getByPage() {
      serve.getByPage(this.parameter).then((res) => {
        this.tableData = res.data.list;
        this.parameter.total = res.data.totalCount;
      });
    },

    //新增
    addition() {
      this.controlWindows.addInfo.title = "产品新增";
      this.controlWindows.add = true;
    },

    //下单
    createOrder(row) {
      this.controlWindows.addInfo = {};
      this.controlWindows.addInfo.title = "创建订单";
      this.controlWindows.create = true;
      console.log(this.controlWindows, "新增");
    },
    //修改订单
    updateCreate(row) {
      this.controlWindows.addInfo = {
        title: "创建订单",
        ...row,
      };
      this.controlWindows.create = true;
      console.log("修改");
    },
    //详情
    detail(row) {
      this.oilCompanyMatch = [row];
      this.controlWindows.detail = true;
    },
    //调价
    adjustPrice(row) {
      this.controlWindows.addInfo = { id: row.id };
      this.controlWindows.adjust = true;
    },
    //更多
    commandMore(val, row) {
      if (val === "base") {
        this.controlWindows.addInfo = {
          title: "产品修改",
          ...row,
        };
        this.controlWindows.add = true;
      }
    },
    //调价
    commandPrice(val, row) {
      if (val === "record") {
        this.controlWindows.addInfo = { id: row.id };
        this.controlWindows.record = true;
      }
    },
    //启用禁用
    switchTrigger(val, row) {
      row.enableMark = val === "ENABLE" ? "DISENABLE" : "ENABLE";
      // return;
      serve
        .updateBatchEnable([
          {
            id: row.id,
            enableMark: val,
          },
        ])
        .then((res) => {
          if (res.code === 20000) {
            this.getByPage();
          }
          // this.$message.success(res.msg);
          // this.closeWindow();
        });
      // serve
      //   .update({
      //     id: row.id,
      //     enableMark: val,
      //   })
      //   .then((res) => {
      //     if (res.code === 20000) {
      //       this.getByPage();
      //     } else this.$message.error(res.msg);
      //   });
    },
    //批量启用禁用
    batchHandler() {
      if (!this.multipleRowList.length) {
        this.$message.warning("请至少选择一条数据");
        return;
      }
      this.controlWindows.batch = true;
    },
    //重置
    reset() {
      Object.assign(this.parameter, {
        currentPage: 1,
        pageSize: 10,
        params: {},
      });
    },
    // table height
    heightHandle() {
      let bodyHeight = document.body.clientHeight;
      let frameHeight = this.obtainElement(".frame").clientHeight;
      let operationHeight = this.obtainElement(".operation").clientHeight;
      let paginationHeight = this.obtainElement(".el-pagination").clientHeight;
      this.tableHeight =
        bodyHeight - frameHeight - operationHeight - paginationHeight - 145;
    },
    obtainElement(className) {
      return document.documentElement.querySelector(className);
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  .pft14 {
    font-size: 14px;
  }
  .frame {
    margin: 20px;
    padding: 20px;
    // width: 100%;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    background: #fff;
    .el-input,
    .el-select {
      width: 183px;
      height: 40px;
    }
    .el-autocomplete + .el-input,
    .el-input + .el-autocomplete,
    .el-autocomplete + .el-select,
    .el-input + .el-input,
    .el-input + .el-select,
    .el-select + .el-select,
    .el-select + .el-input {
      margin-right: 20px;
      margin-bottom: 15px;
    }
    .mr20 {
      margin-right: 20px;
    }
    .buttons {
      text-align: right;
    }
  }

  .table {
    overflow: hidden;
    margin: 0 20px;
    padding-bottom: 20px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e3e3e5;
    > .operation {
      box-sizing: content-box;
      padding: 15px;
    }
    .gray {
      color: #999;
      span {
        color: #333;
      }
    }
    .el-table {
      margin-bottom: 20px;
      border-radius: 10px 10px 0px 0px;
    }

    .el-dropdown-link {
      margin-right: 10px;
      cursor: pointer;
      color: #409eff;
      &.special {
        margin-right: 0;
      }
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  }
}
</style>