123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405 |
- <template>
- <div id="PurchaseDemandList">
- <div v-if="isList">
- <el-form class="search_area" label-width="120px">
- <el-row :gutter="10">
- <el-col :span="1.5">
- <el-form-item label="单据编码">
- <el-select v-model="queryParams.code" 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.warehouse" 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.customer" 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.isProcess" 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.threeName" 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.demandPersonal" 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.goodsAllocation" 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.source" 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.billType" 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.demandDept" 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-input
- v-model="queryParams.demandDate"
- 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" @click="delItems">删除</el-button>
- <el-button type="primary" size="small">打印</el-button>
- </div>
- <el-table
- :data="tableList"
- fit
- max-height="350"
- @selection-change="handleSelectionChange"
- >
- <el-table-column type="selection" width="55" />
- <el-table-column label="编码" align="center" prop="code"/>
- <el-table-column label="需求日期" align="center" width="200" prop="demandDate" />
- <el-table-column label="单据状态" align="center" prop="status" />
- <!-- <el-table-column label="是否已处理需求" align="center" width="150" prop="isProcess" /> -->
- <el-table-column label="业务类型" align="center" width="150" prop="billType"/>
- <!-- <el-table-column label="是否特殊需求" align="center" width="150" prop="isSpeical" /> -->
- <el-table-column label="需求人员" align="center" width="150" prop="demandPersonalName" />
- <el-table-column label="需求客户" align="center" prop="customerName" />
- <el-table-column label="需求部门" align="center" width="150" prop="demandDeptName" />
- <!-- <el-table-column label="供应仓库" align="center" width="120" prop="warehouseName" /> -->
- <!-- <el-table-column label="供应货位" align="center" width="150" prop="goodsAllocationName" /> -->
- <el-table-column label="单据来源" align="center" width="150" prop="source" />
- <el-table-column label="组织" align="center" width="150" prop="orgName" />
- <el-table-column label="备注" align="center" width="150" prop="remark" />
- <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 {getDemandList, delDemand, downLoadDemand} from '@/api/purchase/purchaseDemand.js'
- export default {
- name: 'PurchaseDemandList',
- components: {
- Add,
- CollapseTransition
- },
- data() {
- return {
- expanded: false,
- // 页面配置
- isList: true,
- // 页面状态
- page: '',
- queryParams: {
- code: '',
- warehouse: '',
- customer: '',
- isProcess: '',
- threeName: '',
- demandPersonal: '',
- goodsAllocation: '',
- source: '',
- billType: '',
- demandDept: '',
- demandDate: '',
- remark: '',
- pageNum: 1,
- pageSize: 10
- },
- options: [{
- value: '1', label: '是',
- }, {
- value: '0', label: '否'
- }],
- tableList: [],
- total: 0,
- rowDetail: {},
- disable: false,
- ids: []
- }
- },
- created() {
- this.getList(this.queryParams)
- },
- methods: {
- getList(params){
- getDemandList(params).then(res => {
- if (res.code === 200) {
- this.tableList = res.rows
- this.total = res.total
- }
- })
- },
- handleSelectionChange(selection) {
- console.log('选中', selection)
- this.ids = selection.map(item => item.id)
- console.log('选中数组', this.ids.join())
- },
- handleCommand(command) {
- // alert(command)
- if(command == '模板下载') {
- downLoadDemand({}).then(res => {
- console.log('下载的文件流', res)
- const blob = new Blob([res], {
- type: "application/vnd.ms-excel;charset=UTF-8",
- });// 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
- const downloadElement = document.createElement("a"); //创建a标签
- const href = window.URL.createObjectURL(blob); // 创建下载的链接
- // var temp = res.headers["content-disposition"];
- // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码)
- // var name = fileName.split(";")[0]; //切割成文件名
- downloadElement.href = href; //下载地址
- downloadElement.download = '模板'; // 下载后文件名
- document.body.appendChild(downloadElement);
- downloadElement.click(); // 点击下载
- document.body.removeChild(downloadElement); // 下载完成移除元素
- window.URL.revokeObjectURL(href); // 释放blob对象
- })
- }
- },
- 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(() => {
- delDemand(row.id).then(res => {
- if (res.code === 200) {
- this.$modal.msgSuccess("删除成功");
- this.getList(this.queryParams)
- }
- })
- }).catch(() => {})
- },
- // 批量删除按钮
- delItems() {
- if(this.ids.length == 0) {
- this.$modal.msgWarning("请选中至少一条数据");
- } else {
- let param = this.ids.join()
- this.$modal.confirm('确认信息').then(() => {
- delDemand(param).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>
- #PurchaseDemandList {
- 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>
|