diff --git a/src/views/product/components/add.vue b/src/views/product/components/add.vue
new file mode 100644
index 0000000..3b9d363
--- /dev/null
+++ b/src/views/product/components/add.vue
@@ -0,0 +1,152 @@
+<template>
+  <el-drawer
+    :title="controlWindows.addInfo.title"
+    direction="rtl"
+    size="40%"
+    :visible="controlWindows.add"
+    @opened="openDrawer"
+    :before-close="closeWindow"
+  >
+    <div class="add">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="炼厂名称" prop="refineryName">
+          <el-input
+            maxlength="50"
+            v-model="form.refineryName"
+            placeholder="请输入炼厂名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="炼厂类型" prop="refineryType">
+          <el-select v-model="form.refineryType" placeholder="请选择炼厂类型">
+            <el-option
+              v-for="(item, index) in refineryTypeEnum"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="启用状态" prop="enableMark">
+          <el-radio-group v-model="form.enableMark">
+            <el-radio label="ENABLE">启用</el-radio>
+            <el-radio label="DISABLE">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="炼厂等级" prop="refineryLevel">
+          <el-select v-model="form.refineryLevel" placeholder="请选择炼厂等级">
+            <el-option label="A" value="A"></el-option>
+            <el-option label="B" value="B"></el-option>
+            <el-option label="C" value="C"></el-option>
+            <el-option label="D" value="D"></el-option>
+            <el-option label="E" value="E"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="炼厂地址" prop="address">
+          <el-input
+            type="textarea"
+            :rows="5"
+            maxlength="255"
+            placeholder="请输入炼厂地址"
+            v-model="form.address"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="buttons">
+      <el-button @click="closeWindow">取消 </el-button>
+      <el-button @click="submit">确定</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import serve from "api/refineryInfo.js";
+export default {
+  props: {
+    controlWindows: Object,
+    refineryTypeEnum: Array,
+  },
+  data() {
+    return {
+      form: {},
+      rules: {
+        refineryName: [
+          { required: true, message: "请输入炼厂名称", trigger: "blur" },
+        ],
+        refineryType: [
+          { required: true, message: "请选择炼厂类型", trigger: "blur" },
+        ],
+        enableMark: [
+          { required: true, message: "请选择启用状态", trigger: "blur" },
+        ],
+        refineryLevel: [
+          { required: true, message: "请选择炼厂等级", trigger: "blur" },
+        ],
+        address: [
+          { required: true, message: "请输入炼厂地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    openDrawer() {
+      let { id } = this.controlWindows.addInfo;
+      if (id) {
+        //回显
+        this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo));
+      }
+    },
+    submit() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.judgeInterface(this.form).then((res) => {
+            if (res.code === 20000) {
+              this.$message.success(res.msg);
+              this.closeWindow();
+            }
+          });
+        }
+      });
+    },
+    judgeInterface(form) {
+      let { id } = this.controlWindows.addInfo;
+      if (id) return serve.update(form);
+      else return serve.save(form);
+    },
+    closeWindow() {
+      this.$emit("closeWindow");
+      this.$refs.form.clearValidate();
+      this.form = {};
+      this.controlWindows.addInfo = {};
+      this.controlWindows.add = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add {
+  padding: 20px;
+  .el-input,
+  .el-select,
+  .el-textarea {
+    width: 300px;
+  }
+}
+.buttons {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  padding-right: 40px;
+  width: 100%;
+  height: 80px;
+  line-height: 80px;
+  text-align: right;
+  border-top: 1px solid #f2f3f5;
+  .el-button {
+    text-align: right;
+    font-size: 14px;
+    border-radius: 5px;
+  }
+}
+</style>
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index 60265f6..1b6ce7f 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -1,7 +1,357 @@
-<template></template>
+<template>
+  <div class="order">
+    <div class="frame">
+      <el-select v-model="parameter.params.id" placeholder="炼厂名称" clearable>
+        <el-option
+          v-for="item in refineryList"
+          :key="item.id"
+          :label="item.refineryName"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <div class="buttons">
+        <el-button icon="el-icon-search" @click="handleCurrentChange(1)"
+          >查询</el-button
+        >
+        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
+      </div>
+    </div>
+    <div class="table">
+      <div class="operation">
+        <el-button icon="el-icon-upload2" @click="addition">新增产品</el-button>
+        <el-button icon="el-icon-upload2" @click="addition"
+          >批量启禁用</el-button
+        >
+        <el-button icon="el-icon-upload2" @click="addition">下单</el-button>
+      </div>
+      <el-table
+        v-if="tableHeight"
+        ref="multipleTable"
+        :height="tableHeight"
+        :data="tableData"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="refineryName"
+          label="炼厂名称"
+          show-overflow-tooltip
+        >
+        </el-table-column>
+        <el-table-column prop="orderSerialNumber" label="炼厂类型" width="90">
+          <template slot-scope="{ row }">
+            {{
+              refineryTypeEnum.find((item) => item.value === row.refineryType)
+                .label
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="refineryLevel" label="炼厂等级" width="90">
+        </el-table-column>
+        <el-table-column prop="address" 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="orderSerialNumber"
+          label="启用产品数量"
+          width="120"
+        >
+        </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 prop="orderSerialNumber" label="操作" width="150">
+          <template slot-scope="{ row }">
+            <el-link type="primary" :underline="false" @click="update(row)"
+              >修改</el-link
+            >
+            <el-link type="primary" :underline="false" @click="detail(row)"
+              >详情</el-link
+            >
+            <el-popconfirm
+              title="确定删除该条数据吗？"
+              icon-color="red"
+              @confirm="deleteRow(row)"
+            >
+              <el-link slot="reference" type="primary" :underline="false"
+                >删除</el-link
+              >
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="parameter.currentPage"
+        :page-size="parameter.pageSize"
+        :popper-append-to-body="false"
+        :page-sizes="[10, 20, 30, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <add
+      :controlWindows="controlWindows"
+      :refineryTypeEnum="refineryTypeEnum"
+      @closeWindow="handleCurrentChange(1)"
+    />
+
+    <el-drawer
+      title="详情"
+      direction="ltr"
+      size="60%"
+      :withHeader="false"
+      :visible="controlWindows.detail"
+    >
+      <general-details
+        title="详情"
+        :isHeader="true"
+        v-if="controlWindows.detail"
+        :sourceData="oilCompanyMatch"
+        :mappingData="mappingData"
+        @close="controlWindows.detail = false"
+      >
+      </general-details>
+    </el-drawer>
+  </div>
+</template>
 
 <script>
-export default {};
+import serve from "api/refineryInfo.js";
+
+import add from "./components/add.vue";
+import generalDetails from "components/generalDetails/index.vue";
+
+export default {
+  data() {
+    return {
+      controlWindows: {
+        add: false,
+        addInfo: {
+          title: "炼厂入驻",
+        },
+        detail: false,
+      },
+      refineryTypeEnum: [
+        {
+          label: "普通炼厂",
+          value: "COMMON",
+        },
+      ],
+      refineryList: [],
+      tableHeight: 0,
+      tableData: [],
+      total: 0,
+      parameter: {
+        currentPage: 1,
+        pageSize: 10,
+        params: {},
+      },
+      oilCompanyMatch: {},
+      mappingData: [
+        {
+          carTitle: "",
+          carItems: [
+            { label: "炼厂名称", value: "refineryName" },
+            { label: "炼厂类型", value: "refineryType" },
+            { label: "启用状态", value: "enableMark" },
+            { label: "炼厂等级", value: "refineryLevel" },
+            { label: "炼厂地址", value: "address" },
+            { label: "创建用户ID", value: "createUser" },
+            { label: "创建时间", value: "createTime" },
+            { label: "修改用户ID", value: "updateUser" },
+            { label: "修改时间", value: "updateTime" },
+          ],
+        },
+      ],
+    };
+  },
+  components: {
+    add,
+    generalDetails,
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.heightHandle();
+    });
+    window.addEventListener(
+      "resize",
+      this.$utils.debounce(this.heightHandle, 500)
+    );
+  },
+  created() {
+    this.findByEntity();
+    this.getByPage();
+  },
+  methods: {
+    // currentPage change
+    handleCurrentChange(page) {
+      this.parameter.currentPage = page;
+      this.getByPage();
+    },
+    // pageSize change
+    handleSizeChange(size) {
+      this.parameter.currentPage = 1;
+      this.parameter.pageSize = size;
+      this.getByPage();
+    },
+    //table list
+    getByPage() {
+      serve.getByPage(this.parameter).then((res) => {
+        this.tableData = res.data.list;
+        this.total = res.data.totalPage;
+      });
+    },
+    //炼厂list
+    findByEntity() {
+      serve.findByEntity().then((res) => {
+        this.refineryList = res.data;
+      });
+    },
+    //新增
+    addition() {
+      this.controlWindows.addInfo.title = "炼厂入驻";
+      this.controlWindows.add = true;
+    },
+    //修改
+    update(row) {
+      this.controlWindows.addInfo.title = "炼厂修改";
+      Object.assign(this.controlWindows.addInfo, row);
+      this.controlWindows.add = true;
+    },
+    //详情
+    detail(row) {
+      this.oilCompanyMatch = row;
+      this.controlWindows.detail = true;
+    },
+    //删除
+    deleteRow(row) {
+      serve
+        .deleteRow({
+          id: row.id,
+        })
+        .then((res) => {
+          this.$message.success(res.msg);
+          this.getByPage();
+        });
+    },
+    //启用禁用
+    switchTrigger(val, row) {
+      row.enableMark = row.enableMark;
+      serve
+        .update({
+          id: row.id,
+          enableMark: val,
+        })
+        .then((res) => {
+          if (res.code === 20000) {
+            this.getByPage();
+          } else this.$message.error(res.msg);
+        });
+    },
+    //重置
+    reset() {
+      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></style>
+<style lang="scss" scoped>
+.order {
+  .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-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-link {
+      margin-right: 10px;
+    }
+  }
+}
+</style>