|
|
@@ -0,0 +1,468 @@
|
|
|
+<template>
|
|
|
+ <div class="my-container">
|
|
|
+ <transition name="el-zoom-in-center">
|
|
|
+ <div class="bill-main" v-show="isShow==='home'" key="index">
|
|
|
+ <module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
|
|
|
+ @resert="onRefresh" @detail="openEdit" @onRefresh="onRefresh">
|
|
|
+ </module-view>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ <!-- 新增/编辑弹窗 -->
|
|
|
+ <transition name="el-zoom-in-center">
|
|
|
+ <div class="detil" v-show="isShow==='add'" key="index2">
|
|
|
+ <by-tool :propConfig="toolConfig" @clickHandle="insideTools" ref="byTool" />
|
|
|
+ <div class="box-shadow">
|
|
|
+ <by-table :propConfig="skuConfig" ref="addFormId"></by-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
|
+ import api from "@/api/currency";
|
|
|
+ import other from '@/api/other'
|
|
|
+ import ForTab from "@/components/ForTab/index.vue";
|
|
|
+ @Component({ components: { ForTab } })
|
|
|
+ export default class Attribute extends Vue {
|
|
|
+ // 右边
|
|
|
+ isShow : any = 'home'
|
|
|
+ norms : any = ''
|
|
|
+ normsValue : any = ''
|
|
|
+ timeNum = 0;
|
|
|
+ timer : any = null
|
|
|
+ popTitle : any = ''
|
|
|
+ toolConfig = {
|
|
|
+ tools: {
|
|
|
+ return: true,
|
|
|
+ save: true,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ skuConfig : any = {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ align: 'left',
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ width: '150px',
|
|
|
+ title: '标题',
|
|
|
+ field: 'skuTitle',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' '
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '120px',
|
|
|
+ title: '副标题',
|
|
|
+ field: 'skuSubtitle',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' '
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '140px',
|
|
|
+ title: '物料编码',
|
|
|
+ field: 'skuCode',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' '
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '140px',
|
|
|
+ title: '财务编号',
|
|
|
+ field: 'accountingCode',
|
|
|
+ component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' '
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '90px',
|
|
|
+ title: '价格',
|
|
|
+ field: 'price',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' ',
|
|
|
+ type: "number",
|
|
|
+ defaultValue: 0
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '90px',
|
|
|
+ title: '单位',
|
|
|
+ field: 'unit',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' ',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '90px',
|
|
|
+ title: '单位编码',
|
|
|
+ field: 'unitCode',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' ',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '110px',
|
|
|
+ title: '保质期（天）',
|
|
|
+ field: 'shelfLife',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' ',
|
|
|
+ type: "integer",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '90px',
|
|
|
+ title: '重量/g',
|
|
|
+ field: 'weight',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' ',
|
|
|
+ type: "number",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '90px',
|
|
|
+ title: '长/cm',
|
|
|
+ field: 'length',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' ',
|
|
|
+ type: "number",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '90px',
|
|
|
+ title: '宽/cm',
|
|
|
+ field: 'width',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' ',
|
|
|
+ type: "number",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '90px',
|
|
|
+ title: '高/cm',
|
|
|
+ field: 'height',
|
|
|
+ // component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ placeholder: ' ',
|
|
|
+ type: "number",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: '90px',
|
|
|
+ title: '体积/cm³',
|
|
|
+ field: 'volume',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ config : any = {
|
|
|
+ search: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini'
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '名称',
|
|
|
+ prop: 'name',
|
|
|
+ component: 'by-input',
|
|
|
+ labelWidth: '70px',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ placeholder: '请输入名称',
|
|
|
+ clearable: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ span: 6,
|
|
|
+ label: '简称',
|
|
|
+ prop: 'shortName',
|
|
|
+ component: 'by-input',
|
|
|
+ labelWidth: '70px',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ placeholder: '请输入简称',
|
|
|
+ clearable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '货号',
|
|
|
+ prop: 'itemNumber',
|
|
|
+ component: 'by-input',
|
|
|
+ labelWidth: '70px',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ placeholder: '请输入货号',
|
|
|
+ clearable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tool: {
|
|
|
+ tools: {
|
|
|
+ search: true,
|
|
|
+ refresh: true,
|
|
|
+ },
|
|
|
+ customTools: [
|
|
|
+ {
|
|
|
+ name: '同步到财务系统', icon: 'el-icon-top', audit: [''], event: {
|
|
|
+ click: () => {
|
|
|
+ (this as any).syncSystem()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ table: {
|
|
|
+ attr: {
|
|
|
+ size: 'mini',
|
|
|
+ align: 'left',
|
|
|
+ checkbox: true,
|
|
|
+ calculateH: true
|
|
|
+ },
|
|
|
+ columns: [{
|
|
|
+ width: 250,
|
|
|
+ title: '名称',
|
|
|
+ field: 'name',
|
|
|
+ isDetail: true,
|
|
|
+ }, {
|
|
|
+ width: 200,
|
|
|
+ title: '简称',
|
|
|
+ field: 'shortName'
|
|
|
+ }, {
|
|
|
+ width: 200,
|
|
|
+ title: '货号',
|
|
|
+ field: 'itemNumber'
|
|
|
+ }, {
|
|
|
+ width: 200,
|
|
|
+ title: '国际码',
|
|
|
+ field: 'nsCode'
|
|
|
+ }, {
|
|
|
+ width: 90,
|
|
|
+ title: '基本售价',
|
|
|
+ field: 'basePrice'
|
|
|
+ }, {
|
|
|
+ width: 90,
|
|
|
+ title: '市场价格', // （市场价格统一售价）
|
|
|
+ field: 'markPrice'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 120,
|
|
|
+ title: '操作',
|
|
|
+ action: true,
|
|
|
+ plugins: [{
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ name: '编辑',
|
|
|
+ audit: '',
|
|
|
+ event: {
|
|
|
+ click: (item : any) => {
|
|
|
+ (this as any).openEdit(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ mounted() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.getDataList()
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ // 保存
|
|
|
+ doFormData() {
|
|
|
+ (this as any).$refs.addFormId.validate().then(() => {
|
|
|
+ let query = (this as any).$refs.addFormId.getValue();
|
|
|
+ console.log(query);
|
|
|
+ if (this.popTitle === '新增') {
|
|
|
+ api.saveList(query, 'maindataMaterial').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success('新增成功');
|
|
|
+ this.getDataList();
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ })
|
|
|
+ } else if (this.popTitle === '编辑') {
|
|
|
+ api.updateList(query, 'maindataMaterial').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success('编辑成功');
|
|
|
+ this.getDataList();
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 获取列表数据
|
|
|
+ getDataList() {
|
|
|
+ if (!this.$refs.moduleView) {
|
|
|
+ if (this.timeNum > 5) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ }
|
|
|
+ this.timeNum++;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ clearInterval(this.timer)
|
|
|
+ let query = (this.$refs.moduleView as any).getQuery();
|
|
|
+ // console.log('表单字段 ==> ', query);
|
|
|
+ this.getPageList(query)
|
|
|
+ }
|
|
|
+ getPageList(query : any) {
|
|
|
+ let loading = this.$loading({ target: '.main-container' });
|
|
|
+ api.pageList(query, 'maindataMaterial').then((res : any) => {
|
|
|
+ loading.close();
|
|
|
+ if (res.code === 200) {
|
|
|
+ (this.$refs.moduleView as any).setTableValue(res.data.records);
|
|
|
+ let page = {
|
|
|
+ pageNo: res.data.current, //当前页
|
|
|
+ pageSize: res.data.size, //每页条数
|
|
|
+ total: res.data.total //总条数
|
|
|
+ };
|
|
|
+ (this.$refs.moduleView as any).setPage(page);
|
|
|
+ } else this.$message.error(res.msg);
|
|
|
+ }).catch(() => loading.close());
|
|
|
+ }
|
|
|
+ // 打开编辑
|
|
|
+ openEdit(e : any) {
|
|
|
+ this.popTitle = '编辑';
|
|
|
+ let loading = this.$loading({ target: '.main-container' });
|
|
|
+ api.single({ id: e.id }, 'maindataMaterial').then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ other.selectByMaterialId({ id: res.data.id }, 'maindataMaterialSku').then((info : any) => {
|
|
|
+ loading.close();
|
|
|
+ if (info.code === 200) {
|
|
|
+ this.isShow = 'add';
|
|
|
+ setTimeout(() => { (this as any).$refs.addFormId.setValue(info.data) }, 0);
|
|
|
+ }
|
|
|
+ }).catch(() => loading.close());
|
|
|
+ } else loading.close();
|
|
|
+ }).catch(() => loading.close());
|
|
|
+ }
|
|
|
+ // 内页工具栏方法
|
|
|
+ insideTools(e : any) {
|
|
|
+ console.log(e);
|
|
|
+ if (e === 'onReturn') this.isShow = 'home';
|
|
|
+ if (e === 'onSave') this.doFormData();
|
|
|
+ }
|
|
|
+ // 刷新/重置
|
|
|
+ onRefresh() {
|
|
|
+ (this as any).$refs.moduleView.clearSearch();
|
|
|
+ this.getDataList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .my-container {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ .bill-left {
|
|
|
+ position: relative;
|
|
|
+ border-right: solid #EEE 1px;
|
|
|
+ padding-right: 16px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 740px;
|
|
|
+
|
|
|
+ .bill-tab {
|
|
|
+ width: 150px;
|
|
|
+ height: 100%;
|
|
|
+ transition: all .5s;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-title {
|
|
|
+ font-size: 16px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-tab {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bill-main {
|
|
|
+ width: calc(100% - 16px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-left: 16px;
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detil {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .box-shadow {
|
|
|
+ box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #e6ebf5;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #303133;
|
|
|
+ -webkit-transition: .3s;
|
|
|
+ transition: .3s;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (min-width: 1700px) {
|
|
|
+ .bill-main {
|
|
|
+ min-width: 1450px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
AlanWong