| | |
| | | :visible.sync="editConfig.visible" |
| | | :width="dialogWidth" |
| | | :before-close="handleClose" |
| | | append-to-body |
| | | custom-class="iframe-dialog" |
| | | > |
| | | <el-form |
| | | ref="form" |
| | |
| | | <div class="basic-info-view"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="客户名称" prop="clientId"> |
| | | <el-form-item label="客户名称" prop="client_name"> |
| | | <div class="custom-name"> |
| | | <el-input v-model="editConfig.infomation.clientId"></el-input> |
| | | <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div> |
| | | <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div> |
| | | <el-autocomplete |
| | | v-model="editConfig.infomation.client_name" |
| | | :fetch-suggestions="querySearchAsync" |
| | | value-key="name" |
| | | @select="handleSelectClient" |
| | | ></el-autocomplete> |
| | | <div class="common-select-btn" @click="selClientClick"> |
| | | <i class="el-icon-circle-plus-outline" title="选择"></i> |
| | | </div> |
| | | <div class="common-select-btn" @click="clearupClient"> |
| | | <i class="el-icon-edit-outline" title="清除"></i> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-input v-model="editConfig.infomation.number"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <!-- <el-col :span="12"> |
| | | <el-form-item label="选择源单" prop="selSourceOrder"> |
| | | <el-select v-model="editConfig.infomation.selSourceOrder" size="mini" style="width: 63%"> |
| | | <el-option |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-col> --> |
| | | <el-col :span="12"> |
| | | <el-form-item label="退入仓库" prop="repository"> |
| | | <el-select v-model="editConfig.infomation.repository" size="mini" style="width: 63%"> |
| | |
| | | size="mini" |
| | | style="width: 63%" |
| | | > |
| | | <el-option v-for="item in memberOptions" :key="item.value" :label="item.label" :value="item.value"> |
| | | <el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="退货日期" prop="returnDate"> |
| | | <el-date-picker v-model="editConfig.infomation.returnDate" type="date" placeholder="选择日期"> |
| | | <el-date-picker |
| | | v-model="editConfig.infomation.returnDate" |
| | | value-format="yyyy-MM-dd" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <div class="basic-info-view"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="状态" prop="status"> |
| | | <el-form-item label="状态" prop="salesReturnStatusId"> |
| | | <div class="common-select"> |
| | | <el-select |
| | | v-model="editConfig.infomation.status" |
| | | v-model="editConfig.infomation.salesReturnStatusId" |
| | | placeholder="请选择" |
| | | class="common-select-sel" |
| | | size="mini" |
| | |
| | | <el-option v-for="item in statusOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | <div class="common-select-btn" @click="editDropdownBox"> |
| | | <i class="el-icon-setting"></i> |
| | | </div> |
| | | <!-- <div class="common-select-btn"><i class="el-icon-setting"></i></div> --> |
| | | </div> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-row> |
| | | </div> |
| | | <!-- 附件信息 --> |
| | | <div class="basic-info-title">附件信息</div> |
| | | <!-- <div class="basic-info-title">附件信息</div> |
| | | <div class="basic-info-view"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </div> --> |
| | | <!-- 产品管理 --> |
| | | <div class="basic-info-title" style="display: flex"> |
| | | 产品管理 |
| | | <div style="margin-left: 400px"> |
| | | 币种 |
| | | <el-select v-model="editConfig.infomation.currency" placeholder="请选择" size="mini" style="width: 63%"> |
| | | <el-option v-for="item in currencyOptions" :key="item.value" :label="item.label" :value="item.value"> |
| | | <el-option v-for="item in currencyOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | | <div class="product-view"> |
| | | <CommonFormTableView :show-summary="showSummary" :product-table-list="productTableList" /> |
| | | <CommonFormTableView |
| | | :show-summary="showSummary" |
| | | :product-table-list="productTableList" |
| | | @inputContent="inputContent" |
| | | @addProductClick="addProductClick" |
| | | @emptyProductClick="emptyProductClick" |
| | | @recalculateProductClick="recalculateProductClick" |
| | | @clearupProduct="clearupProduct" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <el-button type="primary" size="small" @click="editConfig.visible = false">保存</el-button> |
| | | <el-button type="primary" size="small" @click="saveClick('form')">保存</el-button> |
| | | <el-button size="small" @click="editConfig.visible = false">取消</el-button> |
| | | </div> |
| | | <!-- 选择客户 --> |
| | | <SelectClientDialog |
| | | v-if="editSelectClientConfig.editVisible" |
| | | :edit-common-config="editSelectClientConfig" |
| | | @selClient="selClient" |
| | | /> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | |
| | | import CommonFormTableView from "@/components/makepager/CommonFormTableView" |
| | | import { getAllData } from "@/api/client/client" |
| | | import { getAddSalesReturn, getUpdateSalesReturn } from "@/api/sales/salesReturn" |
| | | import SelectClientDialog from "@/views/other/commonDialog/SelectClientDialog" |
| | | import { getProductList } from "@/api/common/other" |
| | | export default { |
| | | name: "AddSalesReturnDialog", |
| | | props: { |
| | |
| | | } |
| | | } |
| | | }, |
| | | components: { CommonFormTableView }, |
| | | computed: {}, |
| | | components: { CommonFormTableView, SelectClientDialog }, |
| | | computed: { |
| | | clientList() { |
| | | return this.$store.state.getClientName.clientList |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogWidth: "80%", |
| | |
| | | }, |
| | | memberOptions: [], |
| | | selSourceOrderOptions: [], // 选择源单 |
| | | repositoryOptions: [ |
| | | { value: "1", label: "总仓" }, |
| | | { value: "2", label: "赠品仓" }, |
| | | { value: "3", label: "其他仓" } |
| | | ], // 退入仓库 |
| | | repositoryOptions: [], // 退入仓库 |
| | | statusOptions: [], // 状态 |
| | | currencyOptions: [ |
| | | { value: "1", label: "人民币(¥)" }, |
| | | { value: "2", label: "英镑(£)" }, |
| | | { value: "3", label: "欧元(€)" } |
| | | ], // 币种 |
| | | currencyOptions: [{ id: 1, name: "人民币" }], // 币种 |
| | | productTableList: {}, |
| | | showSummary: { |
| | | show: true, |
| | | total: false, |
| | | refundable: true, |
| | | sumProp: ["other1", "other2", "other3", "other4"], |
| | | mergeNumber: 4 |
| | | } |
| | | total: true, |
| | | sumProp: ["Amount", "total"], |
| | | mergeNumber: 2 |
| | | }, |
| | | editSelectClientConfig: { |
| | | editVisible: false, |
| | | title: "", |
| | | infomation: {} |
| | | }, |
| | | productId: 1, |
| | | isNoProduct: true |
| | | } |
| | | }, |
| | | created() { |
| | | this.$store.dispatch("geClient") |
| | | this.setTableForm() |
| | | this.getCommonData() |
| | | this.getProductList() |
| | | }, |
| | | methods: { |
| | | getCommonData() { |
| | | getAllData() |
| | | .then((res) => { |
| | | this.memberOptions = res.data.member |
| | | this.repositoryOptions = res.data.repository |
| | | this.statusOptions = res.data.salesReturnStatus |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | }, |
| | | // 获取产品列表 |
| | | async getProductList() { |
| | | await getProductList({ |
| | | page: 0, |
| | | pageSize: 0, |
| | | productName: "", |
| | | productNumber: "" |
| | | }).then((res) => { |
| | | console.log(res) |
| | | }) |
| | | }, |
| | | // 保存 |
| | | saveClick(formName) { |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | console.log(this.editConfig.infomation) |
| | | const params = this.saveParams() |
| | | console.log(params) |
| | | if (this.editConfig.title === "新建") { |
| | | getAddSalesReturn(params) |
| | | .then((res) => { |
| | | for (let i = 0; i < this.tableData.length; i++) { |
| | | if (this.tableData[i].name.length === 0) { |
| | | this.isNoProduct = true |
| | | break |
| | | } else { |
| | | this.isNoProduct = false |
| | | } |
| | | } |
| | | if (this.isNoProduct) { |
| | | this.$message.error("产品名称不能为空") |
| | | } else { |
| | | const params = this.saveParams() |
| | | console.log(params) |
| | | if (this.editConfig.title === "新建") { |
| | | getAddSalesReturn(params).then((res) => { |
| | | console.log(res) |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message({ |
| | | message: "添加成功", |
| | | type: "success" |
| | | }) |
| | | this.$message.success("添加成功") |
| | | this.$parent.getData() |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | } else { |
| | | getUpdateSalesReturn(params) |
| | | .then((res) => { |
| | | } else { |
| | | getUpdateSalesReturn(params).then((res) => { |
| | | console.log(res) |
| | | this.editConfig.visible = false |
| | | if (res.code === 200) { |
| | | this.$message.success("编辑成功") |
| | | this.$message({ |
| | | message: "编辑成功", |
| | | type: "success" |
| | |
| | | this.$parent.getData() |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | } |
| | | } |
| | | } else { |
| | | console.log("error submit") |
| | |
| | | clientId: data.clientId || 0, |
| | | memberId: data.memberId || 0, |
| | | number: data.number || "", |
| | | products: [ |
| | | { |
| | | amount: 0, |
| | | desc: "", |
| | | id: 0, |
| | | name: "", |
| | | number: "", |
| | | price: 0, |
| | | total: 0 |
| | | } |
| | | ], |
| | | products: this.tableData, |
| | | reason: data.reason || "", |
| | | repository: data.repository || "", |
| | | returnDate: data.returnDate || "", |
| | |
| | | handleClose() { |
| | | this.editConfig.visible = false |
| | | }, |
| | | // 选择客户相关方法 |
| | | querySearchAsync(queryString, cb) { |
| | | var restaurants = this.clientList |
| | | var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants |
| | | cb(results) |
| | | }, |
| | | createStateFilter(queryString) { |
| | | return (state) => { |
| | | return state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0 |
| | | } |
| | | }, |
| | | handleSelectClient(item) { |
| | | this.editConfig.infomation.client_id = item.id |
| | | }, |
| | | selClientClick() { |
| | | this.editSelectClientConfig.editVisible = true |
| | | }, |
| | | selClient(row) { |
| | | console.log(row) |
| | | this.editConfig.infomation.client_name = row.name |
| | | this.editConfig.infomation.client_id = row.id |
| | | }, |
| | | // 清除已选择用户 |
| | | clearupClient() { |
| | | this.editConfig.infomation.client_name = "" |
| | | this.editConfig.infomation.client_id = 0 |
| | | }, |
| | | // 添加附件 |
| | | addAnnexClick() {}, |
| | | // 设置允许上传文件格式 |
| | | setFormatClick() {}, |
| | | setTableForm() { |
| | | if (this.editConfig.title === "新建" || this.editConfig.infomation.products.length === 0) { |
| | | this.tableData = [ |
| | | { |
| | | productId: this.productId, |
| | | id: 0, |
| | | amount: 0, |
| | | desc: "", |
| | | name: "", |
| | | number: "", |
| | | price: 0, |
| | | total: 0 |
| | | } |
| | | ] |
| | | } else { |
| | | this.tableData = this.editConfig.infomation.products |
| | | this.tableData.map((item, index) => { |
| | | item.productId = index + 1 |
| | | }) |
| | | } |
| | | this.productTableList = { |
| | | tableData: [], |
| | | tableData: this.tableData, |
| | | tableColumn: [ |
| | | { label: "#", prop: "id", width: 40 }, |
| | | { label: "产品名称", prop: "productName", input: true, isRequird: true }, |
| | | { label: "产品编号", prop: "other0" }, |
| | | { label: "源单类型", prop: "other5" }, |
| | | { label: "源单", prop: "other6" }, |
| | | { label: "数量", prop: "other1", input: true, isRequird: true }, |
| | | { label: "含税单价", prop: "other9", input: true }, |
| | | { label: "不含税单价", prop: "other7", input: true }, |
| | | { label: "折扣率(%)", prop: "other6", input: true }, |
| | | { label: "折扣额", prop: "other2" }, |
| | | { label: "税(销售)", prop: "other7", input: true }, |
| | | { label: "实际含税单价", prop: "other3" }, |
| | | { label: "不含税金额", prop: "other4" }, |
| | | { label: "价税合计", prop: "other3", input: true }, |
| | | { label: "描述", prop: "other8" } |
| | | { label: "#", prop: "productId", width: 40 }, |
| | | { label: "产品名称", prop: "name", productName: true, isRequird: true }, |
| | | { label: "产品编号", prop: "number" }, |
| | | { label: "数量", prop: "amount", inputNumber: true, isRequird: true }, |
| | | { label: "销售单价", prop: "price", inputFloat: true }, |
| | | { label: "价税合计", prop: "total", inputFloat: true } |
| | | ] |
| | | } |
| | | }, |
| | | // 产品列表输入 |
| | | inputContent(val, prop, row) { |
| | | this.productId = row.productId |
| | | this.tableData.map((item) => { |
| | | if (item.productId === row.productId) { |
| | | item[prop] = val |
| | | } |
| | | }) |
| | | }, |
| | | // 产品新增 |
| | | addProductClick() { |
| | | this.productId++ |
| | | this.tableData.push({ |
| | | productId: this.productId, |
| | | id: 0, |
| | | amount: 0, |
| | | desc: "", |
| | | name: "", |
| | | number: "", |
| | | price: 0, |
| | | total: 0 |
| | | }) |
| | | this.showSummary.show = true |
| | | }, |
| | | // 产品清空 |
| | | emptyProductClick() { |
| | | this.productId = 1 |
| | | this.tableData = [ |
| | | { |
| | | productId: this.productId, |
| | | id: 0, |
| | | amount: 0, |
| | | desc: "", |
| | | name: "", |
| | | number: "", |
| | | price: 0, |
| | | total: 0 |
| | | } |
| | | ] |
| | | this.productTableList.tableData = this.tableData |
| | | }, |
| | | // 产品重算 |
| | | recalculateProductClick() {}, |
| | | clearupProduct(data) { |
| | | this.tableData = data |
| | | this.productTableList.tableData = this.tableData |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .add-sales-return { |
| | | .basic-info { |
| | | .basic-info-title { |
| | | background-color: #f4f8fe; |
| | | padding-left: 10px; |
| | | font-size: 15px; |
| | | font-weight: bold; |
| | | color: #666; |
| | | height: 42px; |
| | | line-height: 42px; |
| | | } |
| | | .basic-info-view { |
| | | margin-top: 10px; |
| | | padding-right: 40px; |
| | | .custom-name { |
| | | display: flex; |
| | | .common-select-btn { |
| | | margin-left: 5px; |
| | | font-size: 18px; |
| | | ::v-deep { |
| | | .iframe-dialog .el-dialog__body { |
| | | .basic-info { |
| | | .basic-info-title { |
| | | background-color: #f4f8fe; |
| | | padding-left: 10px; |
| | | font-size: 15px; |
| | | font-weight: bold; |
| | | color: #666; |
| | | height: 42px; |
| | | line-height: 42px; |
| | | } |
| | | .basic-info-view { |
| | | margin-top: 10px; |
| | | padding-right: 40px; |
| | | .custom-name, |
| | | .common-select { |
| | | display: flex; |
| | | .common-select-sel { |
| | | width: 270px; |
| | | } |
| | | .common-select-btn { |
| | | margin-left: 5px; |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | } |
| | | .common-select { |
| | | .annex-view { |
| | | display: flex; |
| | | .common-select-sel { |
| | | width: 270px; |
| | | } |
| | | .common-select-btn { |
| | | margin-left: 5px; |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | color: #6166d3; |
| | | .setFormat { |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | } |
| | | .annex-view { |
| | | .unflod-collapse { |
| | | display: flex; |
| | | height: 30px; |
| | | justify-content: center; |
| | | align-items: center; |
| | | color: #6166d3; |
| | | .setFormat { |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | } |
| | | .unflod-collapse { |
| | | display: flex; |
| | | height: 30px; |
| | | justify-content: center; |
| | | align-items: center; |
| | | color: #6166d3; |
| | | } |
| | | .dialog-footer { |
| | | background-color: #f5f5f5; |
| | | height: 55px; |
| | | line-height: 55px; |
| | | .dialog-footer { |
| | | background-color: #f5f5f5; |
| | | height: 55px; |
| | | line-height: 55px; |
| | | } |
| | | } |
| | | } |
| | | </style> |