| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="app-container stock-container"> |
| | | <el-container> |
| | | <el-card class="box-card" style="width: 100%" shadow="never"> |
| | | <!--搜索条件--> |
| | |
| | | <el-row style="margin-top: 15px"> |
| | | <el-col> |
| | | <!--列表--> |
| | | <my-button name="新增" @click="addtable" site="tools" size="medium" /> |
| | | <my-button name="导入" @click="importSetting.dialogShow = true" site="tools" size="medium" /> |
| | | <div class="table-tool-bar" style="margin-bottom: 15px"> |
| | | <my-button name="新增" @click="handleAdd" site="tools" size="medium" /> |
| | | <my-button name="导入" @click="importSetting.dialogShow = true" site="tools" size="medium" /> |
| | | </div> |
| | | <div :style="{ 'overflow-y': 'auto', height: `${clientHeight - 320}px` }" v-loading="loading"> |
| | | <el-row class="card" :gutter="5"> |
| | | <el-col v-for="(item, index) in list" :key="index" class="cm-item"> |
| | |
| | | <div class="card-header-left"> |
| | | <span>入库单号:</span> |
| | | <span class="value">{{ item.businessFormCode }}</span> |
| | | <div class="states" :class="item.states==1?'':'states-income'">{{ item.states == 1 ? '待入库' : '已入库' }}</div> |
| | | <div class="states" :class="item.states == 1 ? '' : 'states-success'"> |
| | | {{ item.states == 1 ? '待入库' : '已入库' }} |
| | | </div> |
| | | </div> |
| | | <div class="card-header-right"> |
| | | <template v-if="item.states == 1"> |
| | |
| | | <div class="one-hed"> |
| | | <div class="box"><span class="span-two">机构:</span>{{ item.agencyId }}</div> |
| | | <div class="box"><span class="span-two">操作人:</span>{{ item.buyerName }}</div> |
| | | <div class="box"><span class="span-two">出库时间:</span>{{ item.procureTime }}</div> |
| | | <div class="box"><span class="span-two">入库时间:</span>{{ item.procureTime }}</div> |
| | | <div class="box"> |
| | | <span class="span-two">采购时间:</span>{{ item.procureTime | formatTime }} |
| | | </div> |
| | | <div class="box"> |
| | | <span class="span-two">入库时间:</span>{{ item.incomeTime | formatTime }} |
| | | </div> |
| | | </div> |
| | | <div class="card-end"> |
| | | <div v-for="(just, index) in item.models" :key="index" class="item"> |
| | | <div class="name">{{ just.baseGoodsModelsId }}</div> |
| | | <div v-for="(just, index) in item.fromProcureTemplateInfoList" :key="index" class="item"> |
| | | <div class="name">{{ just.goodsTemplateName }}</div> |
| | | <div class="value-box"> |
| | | <div class="value-box-item"> |
| | | <span class="label">数量:</span> |
| | | <span class="value">{{ just.counts }}</span> |
| | | </div> |
| | | <div class="value-box-item"> |
| | | <span class="label">金额:</span> |
| | | <span class="value">{{ just.price }}</span> |
| | | <span class="value">{{ just.count }}</span> |
| | | <span class="unit">{{ just.unit }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </el-card> |
| | | </el-container> |
| | | <!--添加/编辑弹窗--> |
| | | <edit ref="editRef"></edit> |
| | | <detail ref="detailRef"></detail> |
| | | <edit |
| | | v-if="editSetting.show" |
| | | :setting="editSetting" |
| | | ref="editRef" |
| | | @close="editSetting.show = false" |
| | | @search="refreshData" |
| | | ></edit> |
| | | <detail |
| | | v-if="detailSetting.show" |
| | | :setting="detailSetting" |
| | | @close="detailSetting.show = false" |
| | | ref="detailRef" |
| | | ></detail> |
| | | <my-import |
| | | :import-setting="importSetting" |
| | | :dialog-show="importSetting.dialogShow" |
| | |
| | | |
| | | <script> |
| | | import { procureList, procureDel, procureIncome } from '@/api/stock/procure/purchaseOrder'; |
| | | import { getTree } from '@/api/baseSetting/finsystenant'; |
| | | import MyButton from '@/components/myButton/myButton'; |
| | | import SettingIplatform from '@/utils/settingIplatform'; |
| | | import myImport from '@/views/components/myImport'; |
| | | import edit from './edit'; |
| | | import detail from './detail'; |
| | | import { getBaseUrl } from '@/utils/base'; |
| | | import * as DateFormatter from '@/utils/DateFormatter'; |
| | | |
| | | export default { |
| | | name: 'index', |
| | |
| | | loading: false, |
| | | adddialog: false, |
| | | list: [], |
| | | formData: { |
| | | tableData: [ |
| | | { |
| | | projectName: '555', |
| | | }, |
| | | { |
| | | projectName: '444', |
| | | }, |
| | | ], |
| | | }, |
| | | // 搜索框 |
| | | items: [ |
| | | { |
| | |
| | | defaultValue: '', |
| | | }, |
| | | { |
| | | type: 'select', |
| | | dataIndex: 'name', |
| | | type: 'cascader', |
| | | dataIndex: 'agencyId', |
| | | label: '机构', |
| | | placeholder: '请选择', |
| | | optionsConfig: { url: '/pc/fin/sys/tenant/select/tree_fin_tenant', props: null }, |
| | | defaultValue: '', |
| | | options: [], |
| | | }, |
| | |
| | | }, |
| | | { |
| | | type: 'date-picker', |
| | | dataIndex: 'val1', |
| | | dataIndex: 'incomeTimeStart', |
| | | label: '入库时间', |
| | | defaultValue: '', |
| | | }, |
| | | { |
| | | type: 'date-picker', |
| | | dataIndex: 'val2', |
| | | dataIndex: 'incomeTimeEnd', |
| | | label: '至', |
| | | defaultValue: '', |
| | | }, |
| | |
| | | orgId: '', |
| | | show: false, |
| | | }, |
| | | detailSetting: { |
| | | title: '详情', |
| | | id: '', |
| | | show: false, |
| | | }, |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | total: 0, |
| | |
| | | computed: { |
| | | clientHeight() { |
| | | return document.documentElement.clientHeight; |
| | | }, |
| | | }, |
| | | filters: { |
| | | formatTime(time) { |
| | | if (!time) return; |
| | | return DateFormatter.LongToDateTime(time); |
| | | }, |
| | | }, |
| | | created() { |
| | |
| | | console.log(this.list); |
| | | }); |
| | | }, |
| | | |
| | | //导入 |
| | | importOrg() { |
| | | this.importSetting.dialogShow = true; |
| | |
| | | }; |
| | | }, |
| | | // 导出 |
| | | handleExport() { |
| | | |
| | | }, |
| | | handleExport() {}, |
| | | // 新增 |
| | | addtable() { |
| | | this.$refs.editRef.open(); |
| | | handleAdd() { |
| | | this.editSetting.id = null; |
| | | this.editSetting.info = null; |
| | | this.editSetting.title = '新增'; |
| | | this.editSetting.show = true; |
| | | }, |
| | | // 编辑 |
| | | handleEdit(row) { |
| | | this.$refs.editRef.open(row.id); |
| | | this.editSetting.id = row.id; |
| | | this.editSetting.info = null; |
| | | this.editSetting.title = '编辑'; |
| | | this.editSetting.show = true; |
| | | }, |
| | | // 详情 |
| | | handleDetail(row) { |
| | | this.$refs.detailRef.open(row.id); |
| | | this.detailSetting.id = row.id; |
| | | this.detailSetting.show = true; |
| | | }, |
| | | // 入库 |
| | | handleIncome(row) { |
| | | this.$confirm(`您确定 单号:${row.businessFormCode} 入库吗?`, '采购入库') |
| | | .then(function () { |
| | | procureIncome({ id: row.id }).then((res) => { |
| | | this.$confirm(`您确定 单号:${row.businessFormCode} 入库吗?`, '采购入库').then(() => { |
| | | procureIncome({ id: row.id }) |
| | | .then((res) => { |
| | | this.$message.success('入库成功!'); |
| | | }); |
| | | }) |
| | | .then((res) => { |
| | | this.search(); |
| | | }) |
| | | .catch(() => {}); |
| | | this.search(); |
| | | }) |
| | | .catch(() => {}); |
| | | }); |
| | | }, |
| | | del(row) { |
| | | this.$modal |
| | | .confirm('是否确认删除入库单号为"' + row.businessFormCode + '"的数据吗?') |
| | | .then(function () { |
| | | procureDel({ id: row.id }).then((res) => {}); |
| | | }) |
| | | .then((res) => { |
| | | this.$message.success('删除成功!'); |
| | | this.search(); |
| | | }) |
| | | .catch(() => {}); |
| | | this.$modal.confirm('是否确认删除入库单号为"' + row.businessFormCode + '"的数据吗?').then( () => { |
| | | procureDel({ id: row.id }) |
| | | .then((res) => { |
| | | this.$message.success('删除成功!'); |
| | | this.search(); |
| | | }) |
| | | .catch(() => {}); |
| | | }); |
| | | }, |
| | | // 分页 |
| | | handleSizeChange(pageSize) { |
| | | this.pageSize = pageSize; |
| | | this.search({ pageNum: 1 }); |
| | | this.search(1); |
| | | }, |
| | | handleCurrentChange(pageNum) { |
| | | this.myTable.paging.page.pageNum = pageNum; |
| | | this.search({ pageNum: pageNum }); |
| | | this.pageNum = pageNum; |
| | | this.search(pageNum); |
| | | }, |
| | | // 查询table列表 |
| | | search(pageNum) { |
| | | if (pageNum) { |
| | | this.pageNum = pageNum; |
| | | } |
| | | this.fetchData(); |
| | | }, |
| | | refreshData() { |
| | | this.pageNum = 1; |
| | | this.pageSize = 10; |
| | | this.search(); |
| | | }, |
| | | fifterForm(params) { |
| | | this.filterFrom = Object.assign(this.filterFrom, params); |
| | | if (this.filterFrom.incomeTimeStart) { |
| | | this.filterFrom.incomeTimeStart = this.filterFrom.incomeTimeStart.replace(/\-/g, ''); |
| | | } |
| | | if (this.filterFrom.incomeTimeEnd) { |
| | | this.filterFrom.incomeTimeEnd = this.filterFrom.incomeTimeEnd.replace(/\-/g, ''); |
| | | } |
| | | if (this.filterFrom.agencyId.length) { |
| | | this.filterFrom.agencyId = this.filterFrom.agencyId[this.filterFrom.agencyId.length - 1]; |
| | | } |
| | | this.search(1); |
| | | }, |
| | | }, |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .ml-20 { |
| | | margin-left: 20px; |
| | | } |
| | | .card { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin: 0px !important; |
| | | .cm-item { |
| | | width: 100%; |
| | | } |
| | | .cm-item ::v-deep .el-card__body { |
| | | padding-bottom: 5px; |
| | | } |
| | | } |
| | | .card-data { |
| | | position: relative; |
| | | margin-top: 8px; |
| | | .card-container { |
| | | .card-header { |
| | | height: 48px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | background: #f3f9fe; |
| | | padding: 0 32px 0 15px; |
| | | box-sizing: border-box; |
| | | } |
| | | .card-header-left { |
| | | display: flex; |
| | | align-items: center; |
| | | color: #999999; |
| | | font-family: 'Microsoft YaHei UI'; |
| | | font-size: 18px; |
| | | font-weight: 700; |
| | | .value { |
| | | color: #3d3d3d; |
| | | } |
| | | |
| | | .states { |
| | | width: 54px; |
| | | height: 22px; |
| | | line-height: 22px; |
| | | text-align: center; |
| | | border-radius: 4px; |
| | | border: 1px solid #f9675b99; |
| | | background: #f9675b1a; |
| | | font-family: 'Microsoft YaHei'; |
| | | color: #f9675b; |
| | | font-size: 13px; |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | margin-left: 8px; |
| | | } |
| | | .states-income { |
| | | border: 1px solid #39ad6199; |
| | | background: #39ad610f; |
| | | color: #39ad61; |
| | | } |
| | | } |
| | | .one-hed { |
| | | margin-top: 15px; |
| | | padding: 0 32px 0 15px; |
| | | box-sizing: border-box; |
| | | .box { |
| | | display: inline-block; |
| | | margin-right: 20px; |
| | | } |
| | | .span-two { |
| | | color: #83919e; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | .card-end { |
| | | font-size: 14px; |
| | | color: #3d3d3d; |
| | | margin-top: 15px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | font-family: 'Microsoft YaHei UI'; |
| | | padding: 0 16px; |
| | | box-sizing: border-box; |
| | | .item { |
| | | width: 379px; |
| | | height: 60px; |
| | | padding: 8px 12px 9px 12px; |
| | | box-sizing: border-box; |
| | | align-items: center; |
| | | gap: 8px; |
| | | flex-shrink: 0; |
| | | background: #f9f9f9; |
| | | margin-right: 15px; |
| | | margin-bottom: 15px; |
| | | &:last-child { |
| | | margin-right: 0; |
| | | } |
| | | .name { |
| | | height: 22px; |
| | | line-height: 22px; |
| | | } |
| | | .value-box { |
| | | display: flex; |
| | | .value-box-item { |
| | | margin-right: 20px; |
| | | .label { |
| | | color: #99999999; |
| | | line-height: 22px; |
| | | } |
| | | .value { |
| | | color: #ff3131; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | @import url(../../index.scss); |
| | | </style> |