|
|
@@ -0,0 +1,450 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-button size="small" type="primary" @click="onShow">{{
|
|
|
+ $t(title)
|
|
|
+ }}</el-button>
|
|
|
+ <el-drawer
|
|
|
+ :title="$t(`添加商品`)"
|
|
|
+ :visible.sync="dialogFormVisible"
|
|
|
+ size="90%"
|
|
|
+ direction="rtl"
|
|
|
+ :show-close="false"
|
|
|
+ append-to-body
|
|
|
+ @close="onClose"
|
|
|
+ >
|
|
|
+ <div class="drawer__panel">
|
|
|
+ <div class="flex-between">
|
|
|
+ <el-select
|
|
|
+ v-model="sa_brandid"
|
|
|
+ :placeholder="$t(`选择品牌`)"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ class="inline-24"
|
|
|
+ @change="brandChange"
|
|
|
+ :disabled="querySa_brandid > 0"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options.brands"
|
|
|
+ :key="item.sa_brandid"
|
|
|
+ :label="$t(item.brandname)"
|
|
|
+ :value="item.sa_brandid"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-cascader
|
|
|
+ :placeholder="$t(`选择分类`)"
|
|
|
+ size="small"
|
|
|
+ v-model="itemclassid"
|
|
|
+ :options="options.itemclass"
|
|
|
+ :props="{
|
|
|
+ checkStrictly: true,
|
|
|
+ children: 'subdep',
|
|
|
+ label: 'itemclassname',
|
|
|
+ value: 'itemclassid',
|
|
|
+ }"
|
|
|
+ clearable
|
|
|
+ @change="classChange"
|
|
|
+ ></el-cascader>
|
|
|
+ </div>
|
|
|
+ <div class="top-margin">
|
|
|
+ <uploadAllData
|
|
|
+ class="inline-16"
|
|
|
+ :total="total"
|
|
|
+ @handlePullApi="handlePullApi"
|
|
|
+ @handleUploadApi="handleUploadApi"
|
|
|
+ @onSuccess="onSuccess"
|
|
|
+ ></uploadAllData>
|
|
|
+ <el-button
|
|
|
+ :disabled="items.length === 0"
|
|
|
+ :type="items.length > 0 ? 'primary' : ''"
|
|
|
+ size="small"
|
|
|
+ class="inline-24 bottom-margin"
|
|
|
+ @click="batchAdd"
|
|
|
+ >{{ $t(`添加选中商品`) }}</el-button
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ style="width: 200px"
|
|
|
+ :placeholder="`${$t(`商品名称`)}/${$t(`编码`)}/${$t(`品号`)}`"
|
|
|
+ :suffix-icon="
|
|
|
+ params.content.where.condition
|
|
|
+ ? params.content.where.condition.length > 0
|
|
|
+ ? ''
|
|
|
+ : ''
|
|
|
+ : 'el-icon-search'
|
|
|
+ "
|
|
|
+ v-model="params.content.where.condition"
|
|
|
+ @keyup.native.enter="listData((params.content.pageNumber = 1))"
|
|
|
+ @clear="listData((params.content.pageNumber = 1))"
|
|
|
+ size="small"
|
|
|
+ class="input-with-select inline-24 layout_search__panel bottom-margin"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-select
|
|
|
+ v-model="itemstandard"
|
|
|
+ :placeholder="$t(`选择标准`)"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ class="inline-24 bottom-margin"
|
|
|
+ @change="queryChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options.itemstandards"
|
|
|
+ :key="item.value"
|
|
|
+ :label="$t(item.value)"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ <span style="float: left">{{ $t(item.value) }}</span>
|
|
|
+ <span style="float: right; color: #8492a6; font-size: 12px">{{
|
|
|
+ item.remarks ? $t(item.remarks) : $t("暂无描述")
|
|
|
+ }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="itemmaterial"
|
|
|
+ :placeholder="$t(`选择材质`)"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ class="inline-24 bottom-margin"
|
|
|
+ @change="queryChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options.itemmaterials"
|
|
|
+ :key="item.value"
|
|
|
+ :label="$t(item.value)"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ <span style="float: left">{{ $t(item.value) }}</span>
|
|
|
+ <span style="float: right; color: #8492a6; font-size: 12px">{{
|
|
|
+ item.remarks ? $t(item.remarks) : $t("暂无描述")
|
|
|
+ }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ style="width: 200px"
|
|
|
+ :placeholder="$t(`型号`)"
|
|
|
+ :suffix-icon="
|
|
|
+ params.content.where.model
|
|
|
+ ? params.content.where.model.length > 0
|
|
|
+ ? ''
|
|
|
+ : ''
|
|
|
+ : 'el-icon-search'
|
|
|
+ "
|
|
|
+ v-model="params.content.where.model"
|
|
|
+ @keyup.native.enter="listData((params.content.pageNumber = 1))"
|
|
|
+ @clear="listData((params.content.pageNumber = 1))"
|
|
|
+ size="small"
|
|
|
+ class="bottom-margin input-with-select inline-24 layout_search__panel"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-input
|
|
|
+ style="width: 200px"
|
|
|
+ :placeholder="$t(`规格`)"
|
|
|
+ :suffix-icon="
|
|
|
+ params.content.where.spec
|
|
|
+ ? params.content.where.spec.length > 0
|
|
|
+ ? ''
|
|
|
+ : ''
|
|
|
+ : 'el-icon-search'
|
|
|
+ "
|
|
|
+ v-model="params.content.where.spec"
|
|
|
+ @keyup.native.enter="listData((params.content.pageNumber = 1))"
|
|
|
+ @clear="listData((params.content.pageNumber = 1))"
|
|
|
+ size="small"
|
|
|
+ class="bottom-margin input-with-select inline-24 layout_search__panel"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <tableTemp
|
|
|
+ ref="tableTemp"
|
|
|
+ :data="list"
|
|
|
+ :layout="tablecolsAdd"
|
|
|
+ :opwidth="200"
|
|
|
+ :custom="true"
|
|
|
+ height="calc(100vh - 370px)"
|
|
|
+ @checkboxCallBack="checkboxCallBack"
|
|
|
+ fixedName="operation"
|
|
|
+ >
|
|
|
+ <template v-slot:customcol="scope">
|
|
|
+ <p v-if="scope.column.columnname === 'cover'">
|
|
|
+ <previewImage
|
|
|
+ v-if="scope.column.data.attinfos[0]"
|
|
|
+ class="image"
|
|
|
+ :image="scope.column.data.attinfos[0]"
|
|
|
+ :list="scope.column.data.attinfos"
|
|
|
+ :deletebtn="false"
|
|
|
+ ></previewImage>
|
|
|
+ </p>
|
|
|
+ <p v-else>{{ $t(scope.column.data[scope.column.columnname]) }}</p>
|
|
|
+ </template>
|
|
|
+ <template v-slot:opreation="scope">
|
|
|
+ <el-button type="text" size="mini" @click="addProduct(scope)">{{
|
|
|
+ $t("添 加")
|
|
|
+ }}</el-button>
|
|
|
+ </template>
|
|
|
+ </tableTemp>
|
|
|
+ <div class="container normal-panel" style="text-align: right">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="params.content.pageNumber"
|
|
|
+ :page-sizes="[20, 50, 100, 200]"
|
|
|
+ :page-size="100"
|
|
|
+ layout="total,sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import tableTemp from "./table";
|
|
|
+import uploadAllData from "@/components/uploadAllData/index";
|
|
|
+import previewImage from "@/components/previewImage/index";
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ props: [
|
|
|
+ "data",
|
|
|
+ "tradefield",
|
|
|
+ "discountrate",
|
|
|
+ "params",
|
|
|
+ "title",
|
|
|
+ "tablecolsAdd",
|
|
|
+ "sa_projectid",
|
|
|
+ "querySa_brandid",
|
|
|
+ "typeName",
|
|
|
+ ],
|
|
|
+ components: { tableTemp, uploadAllData, previewImage },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogFormVisible: false,
|
|
|
+ sa_brandid: "",
|
|
|
+ itemclassid: "",
|
|
|
+ itemstandard: "",
|
|
|
+ itemmaterial: "",
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ options: {
|
|
|
+ brands: [],
|
|
|
+ itemclass: [],
|
|
|
+ itemstandards: [],
|
|
|
+ itemmaterials: [],
|
|
|
+ },
|
|
|
+ items: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onShow() {
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.$store.dispatch("optiontypeselect", "itemstandards").then((res) => {
|
|
|
+ this.options.itemstandards = res.data;
|
|
|
+ });
|
|
|
+ this.$store.dispatch("optiontypeselect", "itemmaterial").then((res) => {
|
|
|
+ this.options.itemmaterials = res.data;
|
|
|
+ });
|
|
|
+ this.querySa_brandid !== ""
|
|
|
+ ? (this.sa_brandid = this.querySa_brandid)
|
|
|
+ : (this.sa_brandid = "");
|
|
|
+ this.queryBrands();
|
|
|
+ this.queryClass();
|
|
|
+ this.listData((this.params.content.pageNumber = 1));
|
|
|
+ },
|
|
|
+ /*可添加商品*/
|
|
|
+ async listData() {
|
|
|
+ if (this.data) {
|
|
|
+ switch (this.data.type) {
|
|
|
+ case "标准订单":
|
|
|
+ this.params.id = 20221109153502;
|
|
|
+ break;
|
|
|
+ case "项目订单":
|
|
|
+ this.params.id = 20230103155002;
|
|
|
+ break;
|
|
|
+ case "促销订单":
|
|
|
+ this.params.id = 20230107182302;
|
|
|
+ break;
|
|
|
+ case "工具订单":
|
|
|
+ this.params.id = 20221109153502;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.params.id = 20221109153502;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.typeName === "居间") {
|
|
|
+ this.params.id = 20221124093602;
|
|
|
+ }
|
|
|
+ this.params.content.where.tradefield = this.tradefield;
|
|
|
+ const res = await this.$api.requested(this.params);
|
|
|
+ this.list = res.data;
|
|
|
+ this.total = res.total;
|
|
|
+ this.$refs.tableTemp.$refs.table.doLayout();
|
|
|
+ },
|
|
|
+ /*获取品牌*/
|
|
|
+ async queryBrands() {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ id: "20220924163702",
|
|
|
+ content: {
|
|
|
+ pageSize: 1000,
|
|
|
+ where: {
|
|
|
+ condition: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ this.options.brands = res.data;
|
|
|
+ console.log("获取品牌", res.data);
|
|
|
+ this.sa_brandid = res.data[0].sa_brandid;
|
|
|
+ this.queryClass();
|
|
|
+ },
|
|
|
+ brandChange() {
|
|
|
+ this.params.content.where.sa_brandid = this.sa_brandid;
|
|
|
+ this.listData((this.params.content.pageNumber = 1));
|
|
|
+ this.queryClass();
|
|
|
+ },
|
|
|
+ /*获取分类*/
|
|
|
+ async queryClass() {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ id: "20220922110403",
|
|
|
+ content: {
|
|
|
+ sa_brandid: this.sa_brandid !== "" ? this.sa_brandid : 0,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ let arr = [];
|
|
|
+ function converTree(node) {
|
|
|
+ var elNode = {
|
|
|
+ isdeep: node["isdeep"],
|
|
|
+ ishide: node["ishide"],
|
|
|
+ istool: node["istool"],
|
|
|
+ itemclassfullname: node["itemclassfullname"],
|
|
|
+ itemclassfullnum: node["itemclassfullnum"],
|
|
|
+ itemclassid: node["itemclassid"],
|
|
|
+ itemclassname: node["itemclassname"],
|
|
|
+ itemclassnum: node["itemclassnum"],
|
|
|
+ num: node["num"],
|
|
|
+ parentid: node["parentid"],
|
|
|
+ rowindex: node["rowindex"],
|
|
|
+ subdep: [],
|
|
|
+ };
|
|
|
+ if (node.subdep.length > 0) {
|
|
|
+ // 如果存在子节点
|
|
|
+ for (var index = 0; index < node.subdep.length; index++) {
|
|
|
+ // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
|
|
|
+ elNode.subdep.push(converTree(node.subdep[index]));
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ elNode = {
|
|
|
+ isdeep: node["isdeep"],
|
|
|
+ ishide: node["ishide"],
|
|
|
+ istool: node["istool"],
|
|
|
+ itemclassfullname: node["itemclassfullname"],
|
|
|
+ itemclassfullnum: node["itemclassfullnum"],
|
|
|
+ itemclassid: node["itemclassid"],
|
|
|
+ itemclassname: node["itemclassname"],
|
|
|
+ itemclassnum: node["itemclassnum"],
|
|
|
+ num: node["num"],
|
|
|
+ parentid: node["parentid"],
|
|
|
+ rowindex: node["rowindex"],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return elNode;
|
|
|
+ }
|
|
|
+ // this.options.itemclass = arr
|
|
|
+ res.data[0].ttemclass.forEach((e) => {
|
|
|
+ arr.push(converTree(e));
|
|
|
+ });
|
|
|
+
|
|
|
+ this.options.itemclass = arr;
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+ classChange() {
|
|
|
+ this.params.content.where.itemclassid =
|
|
|
+ this.itemclassid[this.itemclassid.length - 1];
|
|
|
+ this.listData((this.params.content.pageNumber = 1));
|
|
|
+ },
|
|
|
+ queryChange() {
|
|
|
+ this.params.content.where.standards = this.itemstandard;
|
|
|
+ this.params.content.where.material = this.itemmaterial;
|
|
|
+ this.listData((this.params.content.pageNumber = 1));
|
|
|
+ },
|
|
|
+ /*拉取数据*/
|
|
|
+ handlePullApi(pullApi) {
|
|
|
+ pullApi.content = JSON.parse(JSON.stringify(this.params.content));
|
|
|
+ pullApi.id = this.params.id;
|
|
|
+ /*pullApi.content.sa_projectid = this.$route.query.id*/
|
|
|
+ },
|
|
|
+ /*上传数据*/
|
|
|
+ handleUploadApi(uploadApi, data) {
|
|
|
+ this.$emit("uploadData", uploadApi, data);
|
|
|
+ },
|
|
|
+ /*勾选*/
|
|
|
+ checkboxCallBack(val) {
|
|
|
+ this.items = val;
|
|
|
+ },
|
|
|
+ /*批量添加*/
|
|
|
+ batchAdd() {
|
|
|
+ console.log(this.items, "item");
|
|
|
+ this.$emit("addSuccess", this.items);
|
|
|
+ },
|
|
|
+ /*添加商品*/
|
|
|
+ addProduct(val) {
|
|
|
+ console.log(val, "添加商品");
|
|
|
+ this.items = val;
|
|
|
+ this.$emit("addProduct", this.items.data);
|
|
|
+ },
|
|
|
+ onSuccess() {
|
|
|
+ console.log("成功");
|
|
|
+ this.listData((this.params.content.pageNumber = 1));
|
|
|
+ },
|
|
|
+ onClose() {
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.sa_brandid = "";
|
|
|
+ this.itemclassid = "";
|
|
|
+ this.itemstandard = "";
|
|
|
+ this.itemmaterial = "";
|
|
|
+ this.$emit("closeDrawer");
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
+ this.params.content.pageSize = val;
|
|
|
+ this.listData();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ this.params.content.pageNumber = val;
|
|
|
+ this.listData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ created() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.image {
|
|
|
+ height: 38px;
|
|
|
+ width: 38px;
|
|
|
+ margin-top: 0;
|
|
|
+}
|
|
|
+.top-margin {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.bottom-margin {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+/deep/ input::-webkit-input-placeholder {
|
|
|
+ color: #58585d;
|
|
|
+}
|
|
|
+/deep/ input::-moz-input-placeholder {
|
|
|
+ color: #58585d;
|
|
|
+}
|
|
|
+/deep/ input::-ms-input-placeholder {
|
|
|
+ color: #58585d;
|
|
|
+}
|
|
|
+</style>
|
qymljy