|
|
@@ -0,0 +1,521 @@
|
|
|
+<template>
|
|
|
+ <div class="borderless">
|
|
|
+ <div class="customer-head">
|
|
|
+ <div class="customer-back">
|
|
|
+ <!-- <i class="back-icon el-icon-arrow-left"></i><i style="font-style:normal">返回管理列表</i>-->
|
|
|
+ <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
|
|
|
+ @click="backToList">返回列表
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ class="el-button--small-yh add-customer-btn"
|
|
|
+ type="primary"
|
|
|
+ :disabled="disabled"
|
|
|
+ @click="editCustomer"
|
|
|
+ >{{ form.id ? '确认修改' : '确认新增' }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 60px">
|
|
|
+ <el-form :model="form" ref="form" label-width="130px" class="demo-ruleForm">
|
|
|
+ <containerTitle title="基础资料"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-col v-for="(item,index) in basicData.column" :key="index" :span="item.span?item.span:8">
|
|
|
+ <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
|
|
|
+ <!-- <avue-input-tree v-if="item.prop === 'corpsTypeId'" leaf-only multiple :props="{label:'title'}"v-model="form[item.prop]" placeholder="请选择内容" type="tree" :dic="dic"/>-->
|
|
|
+ <el-date-picker v-if="item.type === 'datetime'" style="width: 100%;" v-model="form[item.prop]"
|
|
|
+ size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
|
|
|
+ <span v-else-if="item.type === 'select'">
|
|
|
+ <el-select v-model="form[item.prop]" slot="prepend" style="width: 100%;" size="small"
|
|
|
+ placeholder="请选择">
|
|
|
+ <el-option v-for="(item,index2) in item.dicData" :key="index2" :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </span>
|
|
|
+ <el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </basic-container>
|
|
|
+ <containerTitle title="包装资料"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ <el-row>
|
|
|
+ <el-col v-for="(item,index) in packingData.column" :key="index" :span="item.span?item.span:8">
|
|
|
+ <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
|
|
|
+ <!-- <avue-input-tree v-if="item.prop === 'corpsTypeId'" leaf-only multiple :props="{label:'title'}"v-model="form[item.prop]" placeholder="请选择内容" type="tree" :dic="dic"/>-->
|
|
|
+ <el-date-picker v-if="item.type === 'datetime'" style="width: 100%;" v-model="form[item.prop]"
|
|
|
+ size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
|
|
|
+ <span v-else-if="item.type === 'select'">
|
|
|
+ <el-select v-model="form[item.prop]" slot="prepend" style="width: 100%;" size="small"
|
|
|
+ placeholder="请选择">
|
|
|
+ <el-option v-for="(item,index2) in item.dicData" :key="index2" :label="item.label"
|
|
|
+ :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </span>
|
|
|
+ <el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </basic-container>
|
|
|
+ <containerTitle title="销售价格"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ <avue-crud
|
|
|
+ :option="customerContact"
|
|
|
+ v-model="contactsForm"
|
|
|
+ :data="contactsData"
|
|
|
+ ref="crudContact"
|
|
|
+ @row-save="rowSave"
|
|
|
+ @row-click="handleRowClick"
|
|
|
+ @row-update="rowUpdate"
|
|
|
+ @row-del="rowDel">
|
|
|
+ <template slot-scope="{row,index}" slot="menu">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="rowCell(row,index)"
|
|
|
+ >{{ row.$cellEdit ? '保存' : '修改' }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ <containerTitle title="附件"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ {{text}}
|
|
|
+ <avue-ueditor v-model="text" :options="options"></avue-ueditor>
|
|
|
+ </basic-container>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import customerContact from "./configuration/customerContact.json"
|
|
|
+import {detail, corpsattn, typeSave} from "@/api/maintenance/priceManagement"
|
|
|
+export default {
|
|
|
+ name: "detailsPage",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ text: '<h1 class="ql-align-center" style="text-align: center;"><a href="https://avuejs.com/doc/plugins/ueditor-plugins" target="_blank" style="font-weight: bold; color: rgb(194, 79, 74);">欢迎使用Avue富文本编辑器</a></h1><p class="ql-align-center" style="text-align: center;"><span style="font-weight: bold; color: rgb(194, 79, 74);"><img src="https://avuejs.com/images/logo-bg.jpg" height="200" width="200"></span></p>',
|
|
|
+ options: {
|
|
|
+ //普通图片上传
|
|
|
+ action: "https://avuejs.com/upload",
|
|
|
+ customConfig: {
|
|
|
+ lineHeights: ['1', '1.15', '1.6', '2', '2.5', '3']
|
|
|
+ },//wangEditor编辑的配置
|
|
|
+ props: {
|
|
|
+ res: "data",
|
|
|
+ url:'url'
|
|
|
+ },
|
|
|
+ //七牛云oss配置
|
|
|
+ qiniu: {
|
|
|
+ AK: "",
|
|
|
+ SK: "",
|
|
|
+ scope: "test",
|
|
|
+ url: "http://pm7cc17lu.bkt.clouddn.com/",
|
|
|
+ deadline: 1
|
|
|
+ },
|
|
|
+ //阿里云oss配置
|
|
|
+ ali: {
|
|
|
+ region: "oss-cn-beijing",
|
|
|
+ endpoint: "oss-cn-beijing.aliyuncs.com",
|
|
|
+ accessKeyId: "",
|
|
|
+ accessKeySecret: "",
|
|
|
+ bucket: "avue"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ disabled: false,
|
|
|
+ customerContact: customerContact,
|
|
|
+ contactsForm: {},
|
|
|
+ contactsData: [],
|
|
|
+ basicData: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '产品编码',
|
|
|
+ prop: 'bigCharacter',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '中文名称',
|
|
|
+ prop: 'brand',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '英文名称',
|
|
|
+ prop: 'status',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '中文描述',
|
|
|
+ prop: 'typeno',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '英文描述',
|
|
|
+ prop: 'brandItem',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '中文型号',
|
|
|
+ prop: 'category',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '英文型号',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '中文规格',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '海关编码',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '海关中文',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '海关英文',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '退税率',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '计量单位',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ packingData: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ label: '长度单位',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '重量单位',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '包装单位',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '每个体积',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '每个毛重',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '每个净重',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '每箱体积',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '每箱毛重',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '每箱净重',
|
|
|
+ prop: 'productCategory',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, {
|
|
|
+ label: '包装描述',
|
|
|
+ prop: 'productCategory',
|
|
|
+ span:24,
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: false,
|
|
|
+ message: ' ',
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //初始化查询
|
|
|
+ created() {
|
|
|
+ if (this.$route.query.id) {
|
|
|
+ detail(JSON.parse(this.$route.query.id)).then(res => {
|
|
|
+ this.form = res.data.data
|
|
|
+ this.contactsData = res.data.data.priceItemList
|
|
|
+ delete this.form.priceItemList
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.form = {}
|
|
|
+ this.contactsData = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$route'(to, from) {
|
|
|
+ console.log(to, from);
|
|
|
+ if (this.$route.query.id) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.form = {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //新增商品信息保存触发
|
|
|
+ rowSave(row, done, loading) {
|
|
|
+ console.log(row)
|
|
|
+ console.log(this.contactsData)
|
|
|
+ // this.contactsData.push(row)
|
|
|
+ done()
|
|
|
+ },
|
|
|
+ //点击行可编辑
|
|
|
+ handleRowClick(row, event, column) {
|
|
|
+ console.log(row.$index)
|
|
|
+ },
|
|
|
+ //商品编辑
|
|
|
+ rowCell(row, index) {
|
|
|
+ console.log(row)
|
|
|
+ this.$refs.crudContact.rowCell(row, index)
|
|
|
+ },
|
|
|
+ //修改商品信息触发
|
|
|
+ rowUpdate(row, index, done, loading) {
|
|
|
+ done(row);
|
|
|
+ },
|
|
|
+ //删除商品信息触发
|
|
|
+ rowDel(row, index, donerowDel) {
|
|
|
+ this.$confirm("确定将选择数据删除?", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ //商品判断是否需要调用删除接口
|
|
|
+ if (row.id) {
|
|
|
+ corpsattn(row.id).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.contactsData.splice(index, 1);
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.contactsData.splice(index, 1);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //修改提交触发
|
|
|
+ editCustomer() {
|
|
|
+ console.log(this.form)
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.form.priceItemList = this.contactsData
|
|
|
+ typeSave(this.form).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: this.form.id ? "修改成功!" : "新增成功!"
|
|
|
+ });
|
|
|
+ this.backToList()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //返回列表
|
|
|
+ backToList() {
|
|
|
+ this.$router.$avueRouter.closeTag();
|
|
|
+ this.$router.push({
|
|
|
+ path: '/basicData/commodityType/index',
|
|
|
+ query: {}
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.customer-head {
|
|
|
+ position: fixed;
|
|
|
+ top: 105px;
|
|
|
+ width: 100%;
|
|
|
+ margin-left: -10px;
|
|
|
+ height: 62px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
|
|
|
+ z-index: 999;
|
|
|
+ /* display: flex;
|
|
|
+ justify-content: left; */
|
|
|
+}
|
|
|
+
|
|
|
+.customer-back {
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 62px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #323233;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.back-icon {
|
|
|
+ line-height: 64px;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.add-customer-btn {
|
|
|
+ position: fixed;
|
|
|
+ right: 36px;
|
|
|
+ top: 115px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialogDeep {
|
|
|
+ ::v-deep .el-dialog {
|
|
|
+ margin: 1vh auto 0 !important;
|
|
|
+ padding-bottom: 10px !important;
|
|
|
+
|
|
|
+ .el-dialog__body, .el-dialog__footer {
|
|
|
+ padding-bottom: 0 !important;
|
|
|
+ padding-top: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
caojunjie