byte-sailing-vue/src/views/product-material/material/index.vue

<template>
  <div class="video-setting">
    <el-row :gutter="8">
      <el-col :span="6">
        <tree @treeClick="reload"></tree>
      </el-col>
      <el-col :span="18" class="right">
        <el-card class="top">
          <el-button type="primary" size="small" @click="materialAdd">{{
            $t("product_material.material.materialAdd")
          }}</el-button>
        </el-card>
        <el-card class="bottom">
          <query
            :selectConfig="selectConfig"
            :req="req"
            :isShowMore="true"
            @handleQuery="handleQuery"
            @handleMore="
              () => {
                queryDialog = true;
              }
            "
          ></query>
          <el-table :data="tableList" v-loading="loading">
            <el-table-column
              :label="$t('product_material.material.materialType')"
              align="center"
            />
            <el-table-column
              :label="$t('product_material.material.materialCode')"
              align="center"
            />
            <el-table-column
              :label="$t('product_material.material.materialName')"
              align="center"
              prop="materialName"
            />
            <el-table-column
              :label="$t('product_material.material.materialUnit')"
              align="center"
              prop="materialUnit"
            />
            <el-table-column
              :label="$t('product_material.material.deptId')"
              align="center"
              prop="deptId"
            />
            <el-table-column
              :label="$t('product_material.material.description')"
              align="center"
              prop="description"
            />

            <el-table-column
              :label="$t('operation')"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="handleEdit(scope.row)"
                  >{{ $t("edit") }}
                </el-button>
                <el-button type="text" @click="handleDelete(scope.row)"
                  >{{ $t("delete") }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            :title="
              titleText === 'add'
                ? $t('product_material.material.materialAdd')
                : $t('product_material.material.materialEdit')
            "
            :visible.sync="open"
            v-if="open"
            width="50%"
            top="60px"
          >
            <add-material
              :form="form"
              @submit="handleSubmit"
              @cancel="handleCancel"
              ref="addMaterial"
            ></add-material>
          </el-dialog>
          <el-dialog
            :title="$t('seniorQuery')"
            v-if="queryDialog"
            :visible.sync="queryDialog"
            width="50%"
            top="60px"
          >
            <div class="search-box">
              <el-form :form="req" label-position="top" label-width="100px">
                <el-row>
                  <el-col :span="6">
                    <el-form-item
                      :label="$t('product_material.material.materialType')"
                    >
                      <el-select
                        v-model="req.type"
                        :placeholder="$t('pleaseSelect')"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    <el-form-item
                      :label="$t('product_material.material.deptId')"
                    >
                      <el-select
                        v-model="req.deptId"
                        :placeholder="$t('pleaseSelect')"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="6">
                    <el-form-item
                      :label="$t('product_material.material.materialCode')"
                    >
                      <el-input
                        v-model="req.code"
                        :placeholder="$t('pleaseInput')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item
                  :label="$t('product_material.material.materialName')"
                >
                  <el-input
                    v-model="req.name"
                    :placeholder="$t('pleaseInput')"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div style="text-align: center; margin-top: 15px">
              <el-button size="small" @click="handleReset"
                >{{ $t("reset") }}
              </el-button>
              <el-button type="primary" size="small" @click="handleQuery">
                {{ $t("submit") }}</el-button
              >
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tree from "./tree.vue";
import byTable from "@/components/by-table/index.js";
import test from "@/components/form-test/index.vue";
import query from "@/components/query/index.vue";
import addMaterial from "./addMaterial.vue";

import * as API from "@/api/product-material/material/index.js";

export default {
  name: "material",
  components: {
    tree,
    byTable,
    test,
    query,
    addMaterial,
  },
  data() {
    return {
      req: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        classifyId: "",
      },
      tableList: [],
      total: 0,
      loading: false,
      selectConfig: [
        {
          label: this.$t("product_material.material.materialType"),
          prop: "type",
          data: [
            { label: "原料", value: 1 },
            { label: "辅料", value: 2 },
            { label: "配件", value: 3 },
            { label: "包材", value: 4 },
            { label: "其他", value: 5 },
          ],
        },
      ],
      open: false,
      titleText: "",

      form: {
        classifyId: "",
        type: "",
        code: "",
        name: "",
        unit: "",
        introduce: "",
        deptId: "",
      },
      queryDialog: false,
    };
  },
  created() {
    API.materialTree({
      type: "2",
      name: "",
    }).then(
      (res) => {
        this.dialogForm.classifyId.data = res.data.data;
        this.loading = false;
      },
      (err) => {
        console.log("materialTree: " + err);
        this.loading = false;
      }
    );
    this.getList();
  },
  methods: {
    handleReset() {
      this.req = {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
        classifyId: "",
        deptId: "",
      };
    },
    handleQuery() {
      console.log(this.req, "sss");
      this.getList();
    },
    getList() {
      this.loading = true;
      API.materialList(this.req).then(
        (res) => {
          this.tableList = res.data.data;
          this.loading = false;
        },
        (err) => {
          console.log("materialList: " + err);
          this.loading = false;
        }
      );
      API.materialCount(this.req).then(
        (res) => {
          this.total = res.data.data.count;
        },
        (err) => {
          console.log("materialCount: " + err);
        }
      );
    },
    materialAdd() {
      this.titleText = "add";
      this.open = true;
    },
    handleEdit(row) {
      this.titleText = "edit";
      this.dialogParams = row;
      this.open = true;
    },
    handleDelete(row) {
      this.$confirm(this.$t("askDeleteData"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      })
        .then(() => {
          API.materialDel({ id: row.id, type: "1" }).then(() => {
            this.msgSuccess(this.$t("deleteSuccess"));
            this.getList();
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reload(row) {
      this.req.pageNum = 1;
      this.req.classifyId = row.id;
      this.getList();
    },
    handleCancel() {
      this.form = {
        classifyId: "",
        type: "",
        code: "",
        name: "",
        unit: "",
        introduce: "",
        deptId: "",
      };
      this.open = false;
    },
    handleSubmit() {
      if (this.form.id) {
        API.materialAdd(this.form).then(
          () => {
            this.msgSuccess(this.$t("addSuccess"));
            this.$refs.addProduct.loading = false;
            this.open = false;
            this.getList();
          },
          (err) => {
            console.log("materialAdd: " + err);
            this.$refs.addProduct.loading = false;
          }
        );
      } else {
        API.materialEdit(this.form).then(
          () => {
            this.msgSuccess(this.$t("editSuccess"));
            this.open = false;
            this.$refs.addProduct.loading = false;
            this.getList();
          },
          (err) => {
            console.log("materialEdit: " + err);
            this.$refs.addProduct.loading = false;
          }
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  height: calc(100vh - 280px);
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
}
.right {
  height: calc(100vh - 110px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .top {
    // padding: 10px;
    margin-bottom: 8px;
  }
  .bottom {
    flex: 1;
  }
}
</style>