123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381 |
- <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>
|