|
|
@@ -16,35 +16,107 @@
|
|
|
</div>
|
|
|
<div style="margin-top: 60px">
|
|
|
<containerTitle title="基础信息"></containerTitle>
|
|
|
- <basic-container>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
<avue-form ref="form" v-model="form" :option="option">
|
|
|
<template slot="goodsTypeId" slot-scope="scope">
|
|
|
<avue-input-tree
|
|
|
- v-model="form.goodsTypeId"
|
|
|
- :props="{ label: 'title', value: 'id' }"
|
|
|
- multiple
|
|
|
- placeholder=" "
|
|
|
- type="tree"
|
|
|
- :dic="dicData"/>
|
|
|
+ v-model="form.goodsTypeId"
|
|
|
+ :props="{ label: 'title', value: 'id' }"
|
|
|
+ multiple
|
|
|
+ placeholder=" "
|
|
|
+ type="tree"
|
|
|
+ :dic="dicData"/>
|
|
|
</template>
|
|
|
</avue-form>
|
|
|
</basic-container>
|
|
|
+ <containerTitle title="商品规格"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ <avue-crud
|
|
|
+ :data="sftData"
|
|
|
+ :option="sftOption"
|
|
|
+ @row-del="rowSftDel"
|
|
|
+ >
|
|
|
+ <template slot="menuLeft" slot-scope="{ row, index }">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="small"
|
|
|
+ @click.stop="addSftRow(row, index)"
|
|
|
+ >新增明细
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <template slot="menu" slot-scope="{ row, index }">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ type="text"
|
|
|
+ @click.stop="rowSftEdit(row, index)"
|
|
|
+ >
|
|
|
+ {{ row.$cellEdit ? "保存" : "编辑" }}
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ type="text"
|
|
|
+ @click.stop="rowSftDel(row, index)">
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-close"
|
|
|
+ type="text">
|
|
|
+ 下架
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ <containerTitle title="商品图片"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ <avue-crud
|
|
|
+ ref="imgUpload"
|
|
|
+ :option="imgUploadList"
|
|
|
+ :data="imgUploadData"
|
|
|
+ @row-save="imgUploadSave"
|
|
|
+ @row-update="imgUploadUpdate"
|
|
|
+ @row-del="imgUploadDel"
|
|
|
+ :upload-before="uploadBefore"
|
|
|
+ ></avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ <containerTitle title="详情页编辑"></containerTitle>
|
|
|
+ <basic-container style="margin-bottom: 10px">
|
|
|
+ <avue-ueditor v-model="text" :options="options"></avue-ueditor>
|
|
|
+ </basic-container>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import { getDetail, updateDetail,getDeptTree } from "@/api/basicData/commodityType";
|
|
|
+import {getDetail, updateDetail, getDeptTree, priceDelete} from "@/api/basicData/commodityType";
|
|
|
+import sftOption from "./configuration/specification.json";
|
|
|
+import imgUploadList from "./configuration/imgUploadList.json";
|
|
|
|
|
|
export default {
|
|
|
name: "detailsPage",
|
|
|
data() {
|
|
|
return {
|
|
|
form: {},
|
|
|
+ sftData: [],
|
|
|
+ sftOption: sftOption,
|
|
|
+ imgUploadList: imgUploadList,
|
|
|
+ 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/imgupload",
|
|
|
+ customConfig: {}, //wangEditor编辑的配置
|
|
|
+ props: {
|
|
|
+ res: "data",
|
|
|
+ url: "url"
|
|
|
+ }
|
|
|
+ },
|
|
|
disabled: false,
|
|
|
- userDialog:false,//供应商导入窗口
|
|
|
- contactsForm: {},
|
|
|
- dicData:[],
|
|
|
- detailsSelect:{},
|
|
|
+ userDialog: false,//供应商导入窗口
|
|
|
+ imgUploadData: [],
|
|
|
+ dicData: [],
|
|
|
+ detailsSelect: {},
|
|
|
option: {
|
|
|
menuBtn: false,
|
|
|
labelWidth: 100,
|
|
|
@@ -115,12 +187,12 @@ export default {
|
|
|
prop: "status",
|
|
|
span: 8,
|
|
|
type: 'select',
|
|
|
- dicData:[{
|
|
|
- label:'正常',
|
|
|
- value:0
|
|
|
- },{
|
|
|
- label:'停用',
|
|
|
- value:1
|
|
|
+ dicData: [{
|
|
|
+ label: '正常',
|
|
|
+ value: 0
|
|
|
+ }, {
|
|
|
+ label: '停用',
|
|
|
+ value: 1
|
|
|
}],
|
|
|
},
|
|
|
{
|
|
|
@@ -207,17 +279,103 @@ export default {
|
|
|
if (this.$route.query.id) {
|
|
|
getDetail(JSON.parse(this.$route.query.id)).then(res => {
|
|
|
this.form = res.data.data
|
|
|
- })
|
|
|
- }else{
|
|
|
- this.$set(this.form,"goodsTypeId", this.$route.query.treeDeptId)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$set(this.form, "goodsTypeId", this.$route.query.treeDeptId)
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- rowContactSave(row, done, loading) {
|
|
|
- done()
|
|
|
+ // 商品图片上传保存
|
|
|
+ imgUploadSave(row, done, loading) {
|
|
|
+ console.log(row);
|
|
|
+ this.imgUploadData.push(row);
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ imgUploadUpdate(row, index, done, loading) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ imgUploadDel(row, index, donerowDel) {
|
|
|
+ this.$confirm("确定将选择数据删除?", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ //商品判断是否需要调用删除接口
|
|
|
+ if (row.id) {
|
|
|
+ // corpsattn(row.id).then(res => {
|
|
|
+ // this.$message({
|
|
|
+ // type: "success",
|
|
|
+ // message: "操作成功!"
|
|
|
+ // });
|
|
|
+ // this.imgUploadData.splice(index, 1);
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "操作成功!"
|
|
|
+ });
|
|
|
+ this.imgUploadData.splice(index, 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 上传前
|
|
|
+ uploadBefore(file, done, loading, column) {
|
|
|
+ const is2M = file.size / 1024 / 1024 < 2;
|
|
|
+ const isType =
|
|
|
+ file.type === "image/jpeg" ||
|
|
|
+ file.type === "image/png" ||
|
|
|
+ file.type === "image/jpg";
|
|
|
+ if (!isType) {
|
|
|
+ this.$message.error("图片只能是JPG、JPEG、PNG格式");
|
|
|
+ loading();
|
|
|
+ }
|
|
|
+ if (!is2M) {
|
|
|
+ this.$message.error("图片大小不能超过2M");
|
|
|
+ loading();
|
|
|
+ }
|
|
|
+ const img = new Image();
|
|
|
+ const _URL = window.URL || window.webkitURL;
|
|
|
+ let isSize = null;
|
|
|
+ img.onload = () => {
|
|
|
+ if (column.label == "图片") {
|
|
|
+ isSize = img.width === img.height;
|
|
|
+ if (!isSize) {
|
|
|
+ this.$message.error("图片宽高限制比例为1:1");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const width = 750;
|
|
|
+ const height = 1000;
|
|
|
+ isSize = img.width === width && img.height <= height;
|
|
|
+ if (!isSize) {
|
|
|
+ this.$message.error("商品详情轮播图宽为750，高不能超过1000");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (is2M && isType && isSize) {
|
|
|
+ done();
|
|
|
+ } else {
|
|
|
+ loading();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ img.src = _URL.createObjectURL(file);
|
|
|
+ },
|
|
|
+ rowSftEdit(row) {
|
|
|
+ if (row.$cellEdit == true) {
|
|
|
+ this.$set(row, "$cellEdit", false);
|
|
|
+ } else {
|
|
|
+ this.$set(row, "$cellEdit", true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addSftRow() {
|
|
|
+ this.sftData.push({
|
|
|
+ $cellEdit: true,
|
|
|
+ cname: null,
|
|
|
+ texture: null,
|
|
|
+ colour: null,
|
|
|
+ describe: null,
|
|
|
+ remarks: null
|
|
|
+ });
|
|
|
},
|
|
|
- rowPurchaseSave(row, done, loading) {
|
|
|
- done()
|
|
|
+ rowSftDel(row, index) {
|
|
|
},
|
|
|
rowContactCell(row, index) {
|
|
|
this.$refs.crudContact.rowCell(row, index)
|
|
|
@@ -232,10 +390,10 @@ export default {
|
|
|
if (valid) {
|
|
|
const params = {
|
|
|
...this.form,
|
|
|
- type:0,
|
|
|
+ type: 0,
|
|
|
}
|
|
|
updateDetail(params).then(res => {
|
|
|
- if(res.data.success){
|
|
|
+ if (res.data.success) {
|
|
|
this.$message.success("操作成功！")
|
|
|
}
|
|
|
})
|
QuKatie