123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397 |
- <template>
- <div id="MaterialClassDivision">
- <div v-if="isList">
- <el-form class="search_area" label-width="130px">
- <el-row :gutter="10">
- <el-col :span="1.5">
- <el-form-item label="物料一级大类编码">
- <el-select v-model="queryParams.materialClassifyOne" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="物料一级大类名称">
- <el-select v-model="queryParams.materialClassifyOneName" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="物料二级大类编码">
- <el-select v-model="queryParams.materialClassifyTwo" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="物料二级大类名称">
- <el-select v-model="queryParams.materialClassifyTwoName" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="" label-width="20px">
- <el-button type="primary" size="small" icon="el-icon-search" plain>搜索</el-button>
- <el-button size="small" icon="el-icon-refresh" plain>重置</el-button>
- </el-form-item>
- </el-col>
- </el-row>
- <CollapseTransition>
- <div v-show="expanded">
- <el-row :gutter="10">
- <el-col :span="1.5">
- <el-form-item label="物料三级大类编码">
- <el-select v-model="queryParams.materialClassifyThree" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="物料三级大类名称">
- <el-select v-model="queryParams.materialClassifyThreeName" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="物料四级大类编码">
- <el-select v-model="queryParams.materialClassifyFour" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="物料四级大类名称">
- <el-select v-model="queryParams.materialClassifyFourName" size="small" style="width: 200px" clearable placeholder="请选择">
- <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 :gutter="10">
- <el-col :span="1.5">
- <el-form-item label="物料编码">
- <el-select v-model="queryParams.material" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="物料名称">
- <el-select v-model="queryParams.materialName" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="订单员">
- <el-select v-model="queryParams.orderPersonal" size="small" style="width: 200px" clearable placeholder="请选择">
- <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-col :span="1.5">
- <el-form-item label="采购员">
- <el-select v-model="queryParams.buyer" size="small" style="width: 200px" clearable placeholder="请选择">
- <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 :gutter="10">
- <el-col :span="1.5">
- <el-form-item label="生产厂家">
- <el-input
- v-model="queryParams.manufacturer"
- size="small"
- placeholder=""
- clearable
- style="width: 200px"
- />
- </el-form-item>
- </el-col>
- <el-col :span="1.5">
- <el-form-item label="备注">
- <el-input
- v-model="queryParams.remark"
- size="small"
- placeholder=""
- clearable
- style="width: 200px"
- />
- </el-form-item>
- </el-col>
- </el-row>
- </div>
- </CollapseTransition>
- </el-form>
- <el-divider class="lines"><i style="cursor: pointer;" :class="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click="drop"></i></el-divider>
- <el-card>
- <div class="btn_grooup">
- <el-button type="primary" size="small" @click="addDivision">新增</el-button>
- <el-dropdown size="small" @command="handleCommand">
- <el-button size="small" type="primary" style="margin-left: 10px;">
- 导入<i class="el-icon-arrow-down el-icon--right"></i>
- </el-button>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="数据导入">数据导入</el-dropdown-item>
- <el-dropdown-item command="模板下载">模板下载</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- <el-dropdown size="small" @command="handleCommand">
- <el-button size="small" type="primary" style="margin: 0 10px;">
- 导出<i class="el-icon-arrow-down el-icon--right"></i>
- </el-button>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="Excel导出">Excel导出</el-dropdown-item>
- <el-dropdown-item command="导出明细">导出明细</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- <el-button type="primary" size="small">同步分配</el-button>
- <el-button type="primary" size="small">删除</el-button>
- <el-button type="primary" size="small">打印</el-button>
- </div>
- <el-table
- :data="tableList"
- fit
- max-height="680"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55" />
- <el-table-column label="物料分类编码" align="center" prop="materialClassify"/>
- <el-table-column label="物料分类名称" align="center" width="200" prop="materialClassifyName" />
- <el-table-column label="一级分类名称" align="center" prop="materialClassifyOneName" />
- <el-table-column label="二级分类名称" align="center" width="150" prop="materialClassifyTwoName" />
- <el-table-column label="三级分类名称" align="center" width="150" prop="materialClassifyThreeName"/>
- <el-table-column label="四级分类名称" align="center" width="150" prop="materialClassifyFourName" />
- <el-table-column label="物料编码" align="center" width="150" prop="material" />
- <el-table-column label="物料名称" align="center" prop="materialName" />
- <el-table-column label="生产厂商" align="center" width="150" prop="manufacturer" />
- <el-table-column label="所属组织" align="center" width="120" prop="orgName" />
- <el-table-column label="订单员" align="center" width="150" prop="orderPersonalName" />
- <el-table-column label="采购员" align="center" width="150" prop="buyerName" />
- <el-table-column label="订单部门" align="center" width="150" prop="orderDeptName" />
- <el-table-column label="部门" align="center" width="150" prop="puDeptName" />
- <el-table-column label="创建人" align="center" width="150" prop="createdByName" />
- <el-table-column label="创建时间" align="center" width="150" prop="createdTime" />
- <el-table-column label="修改人" align="center" width="150" prop="updatedByName" />
- <el-table-column label="修改时间" align="center" width="150" prop="updatedTime" />
- <el-table-column
- fixed="right"
- label="操作"
- align="center"
- width="150"
- >
- <template slot-scope="scope">
- <el-button type="text" size="small" @click="check(scope.row)">查看</el-button>
- <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
- <el-button type="text" size="small" @click="deleteids(scope.row)">删除</el-button>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="1"
- :page-sizes="[5, 10, 15, 20]"
- :page-size="100"
- layout="total, sizes, prev, pager, next, jumper"
- :total=total>
- </el-pagination>
- </el-card>
- </div>
- <Add v-model="isList" v-if="!isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList"/>
- </div>
- </template>
- <script>
- import Add from './add.vue'
- import CollapseTransition from '@/components/MyCollapse/collapse.vue'
- import {getDivisionList, delDivision} from '@/api/purchase/basic.js'
- export default {
- name: 'MaterialClassDivision',
- components: {
- Add,
- CollapseTransition
- },
- data() {
- return {
- expanded: false,
- // 页面配置
- isList: true,
- // 页面状态
- page: '',
- queryParams: {
- materialClassifyOne: '',
- materialClassifyOneName: '',
- materialClassifyTwo: '',
- materialClassifyTwoName: '',
- materialClassifyThree: '',
- materialClassifyThreeName: '',
- materialClassifyFour: '',
- materialClassifyFourName: '',
- material: '',
- materialName: '',
- orderPersonal: '',
- buyer: '',
- manufacturer: '',
- remark: '',
- pageNum: 1,
- pageSize: 10
- },
- options: [{
- value: 0, label: '仓库1'
- }],
- tableList: [],
- total: 0,
- rowDetail: {},
- disable: false
- }
- },
- created() {
- this.getList(this.queryParams)
- },
- methods: {
- getList(params){
- getDivisionList(params).then(res => {
- if (res.code === 200) {
- this.tableList = res.rows
- this.total = res.total
- }
- })
- },
- handleSelectionChange() {},
- handleCommand(command) {
- alert(command)
- },
- addDivision() {
- this.isList = false
- this.page = 'add'
- this.disable = false
- },
- check(row) {
- this.isList = false
- this.page = 'check'
- this.rowDetail = row
- this.disable = true
- },
- edit(row) {
- this.isList = false
- this.page = 'edit'
- this.rowDetail = row
- this.disable = false
- },
- deleteids(row) {
- console.log('row', row)
- this.$modal.confirm('确认信息').then(() => {
- delDivision(row.id).then(res => {
- if (res.code === 200) {
- this.$modal.msgSuccess("删除成功");
- this.getList(this.queryParams)
- }
- })
- }).catch(() => {})
- },
- handleSizeChange(val) {
- console.log(`每页 ${val} 条`);
- this.queryParams.pageSize = val
- this.getList(this.queryParams)
- },
- handleCurrentChange(val) {
- console.log(`当前页: ${val}`);
- this.queryParams.pageNum = val
- this.getList(this.queryParams)
- },
- drop() {
- this.expanded = !this.expanded
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- #MaterialClassDivision {
- height: calc(100vh - 84px);
- padding: 12px;
- box-sizing: border-box;
- }
- .btn_grooup {
- margin-bottom: 10px;
- display: flex;
- justify-content: flex-end;
- }
- .lines {
- margin-top: 0;
- }
- </style>
|