zfire-newmall-admin/src/views/auxiliaryFittings/attachmentProfile/index.vue

<template>
	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: '列表页面', essential: true }]">
		<template slot-scope="{activeKey, data}">
			<template-page v-if="activeKey == 'list'" ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
			  :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing" :operationColumnWidth="50"
			  :operation="operation()" :exportList="exportList">
			</template-page>
			<div v-if="~['add', 'edit'].indexOf(activeKey)">
				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
					<zj-form-module title="" label-width="170px" :showPackUp="false"
						:form-data="formData" :form-items="formItems" :disabled="formDialogType == 2">
					</zj-form-module>
				</zj-form-container>
				<div slot="footer" class="dialog-footer">
				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
				  <el-button v-if="formDialogType !== 2" size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
				</div>
			</div>
		</template>
	</zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import ImageUpload from '@/components/file-upload'
import { downloadFiles } from '@/utils/util'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { listPageV2, pageExport, getDetail, add, edit, updateStatus, listImport1, listImport2, getTypeList, getCategoryList } from "@/api/auxiliaryFittings/attachmentProfile";
import { commonTemplateDownload } from '@/api/common.js'
import operation_mixin from '@/components/template/operation_mixin.js'
export default {
	components: { TemplatePage, ImageUpload },
	mixins: [import_mixin, operation_mixin],
	data() {
		return {
			// 表格属性
			tableAttributes: {
				// 启用勾选列
				selectColumn: true
			},
			// 表格事件
			tableEvents: {
				'selection-change': this.selectionChange
			},
			// 勾选选中行
			recordSelected: [],
			/** 表单变量 */
			formDialogType: 0,
			formDialogTitles: ["新增", "编辑", "详情"],
			formDialog: false,
			formData: {
				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
				goodsType: 'P',
				goodsStockUnit: '',
				goodsCode: '',
				goodsName: '',
				normType: 'M',
				status: 'ON',
				categoryList: [],
				brandList: [],
				marketPrice: '',
				normAmount: '',
				selfWebsitAmount: '',
				selfWorkerAmount: '',
				outWebsitAmount: '',
				outWorkerAmount: '',
				remark: ''
			},
			partsUnitList: [],
			brandList: [],
			categoryList: [],
			formType: 'add',
			formVisible: false,
		}
	},
	computed: {
		// 事件组合
		optionsEvensGroup() {
			return [
				[
					[
						this.optionsEvensAuth("add", {
							click: () => {
								this.openForm('add')
							}
						}),
					],
				],
				[
					[
						this.optionsEvensAuth("shelfInBulk", {
							click: () => {
								this.updateStatus('ON')
							}
						}),
					],
				],
				[
					[
						this.optionsEvensAuth("batchRemoval", {
							click: () => {
								this.updateStatus('OFF')
							}
						}),
					],
				],
				[
					[
						this.optionsEvensAuth("template", {
							click: this.handleDownload1
						}),
					],
					[
						this.optionsEvensAuth("imp", ({ moduleName }) => {
							return {
								name: moduleName,
								render: () => {
									return this.importButton(listImport1, moduleName)
								}
							}
						}),
					],
				],
				[
					[
						this.optionsEvensAuth("importTemplate", {
							click: this.handleDownload2
						}),
					],
					[
						this.optionsEvensAuth("Import", ({ moduleName }) => {
							return {
								name: moduleName,
								render: () => {
									return this.importButton(listImport2, moduleName)
								}
							}
						}),
					],
				]
			]
		},
		// 更多参数
		moreParameters() {
			return []
		},

		//加法 
		accAdd() {
			return function (arg1, arg2) {
				var r1, r2, m;
				try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
				try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
				m = Math.pow(10, Math.max(r1, r2))
				return (arg1 * m + arg2 * m) / m
			}
		},
		//减法 
		Subtr() {
			return function (arg1, arg2) {
				var r1, r2, m, n;
				try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
				try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
				m = Math.pow(10, Math.max(r1, r2));
				n = (r1 >= r2) ? r1 : r2;
				return ((arg1 * m - arg2 * m) / m).toFixed(2);
			}
		},
		formItems() {
			return [{
				md: 6,
				isShow: true,
				name: 'el-input',
				attributes: { placeholder: '请输入', disabled: true },
				formItemAttributes: {
					label: '所属商户',
					prop: 'companyName',
					rules: [...required]
				},
			}, {
				md: 6,
				isShow: true,
				name: 'slot-component',
				attributes: {},
				formItemAttributes: {
					label: '状态',
					prop: 'status',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return (
						<el-radio-group v-model={this.formData.status}>
							<el-radio disabled={this.formDialogType == 2} label="ON">上架</el-radio>
							<el-radio disabled={this.formDialogType == 2} label="OFF">下架</el-radio>
						</el-radio-group>
					)
				}
			}, {
				md: 6,
				isShow: true,
				name: 'el-input',
				attributes: { placeholder: '请输入配件名称', },
				formItemAttributes: {
					label: '配件名称',
					prop: 'goodsName',
					rules: [...required]
				}
			}, {
				md: 6,
				isShow: true,
				name: 'el-select-add',
				labelKey: 'dictValue',
				valueKey: 'dictValue',
				options: this.partsUnitList,
				attributes: { placeholder: '请选择单位', filterable: true, clearable: true },
				formItemAttributes: {
					label: '单位',
					prop: 'goodsStockUnit',
					rules: [...required]
				},
				events: {
					change: (e) => {
						this.$refs.formRef.validateField(['goodsStockUnit'], (valid, invalidFields, errLabels) => { })
					}
				}
			}, {
				md: 6,
				isShow: true,
				name: 'el-input',
				attributes: { placeholder: '请输入配件代码' },
				formItemAttributes: {
					label: '配件代码',
					prop: 'goodsCode',
					rules: [...required]
				}
			}, {
				md: 6,
				isShow: true,
				name: 'slot-component',
				attributes: {},
				formItemAttributes: {
					label: '收费类型',
					prop: 'normType',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return (
						<el-radio-group v-model={this.formData.normType}>
							<el-radio disabled={this.formDialogType == 2} label="M">配件物料</el-radio>
							<el-radio disabled={this.formDialogType == 2} label="S">服务收费</el-radio>
						</el-radio-group>
					)
				}
			}, {
				md: 24,
				isShow: this.formData.normType == 'M' ? true : false,
				name: 'el-checkbox-add',
				labelKey: 'dictValue',
				valueKey: 'dictCode',
				attributes: {},
				options: this.brandList,
				formItemAttributes: {
					label: '适用品牌',
					prop: 'brandList',
					rules: [...required]
				},
				events: {
					change: (e) => {
						this.$refs.formRef.validateField(['brandList'], (valid, invalidFields, errLabels) => { })
					}
				}
			}, {
				md: 24,
				isShow: this.formData.normType == 'M' ? true : false,
				name: 'el-checkbox-add',
				labelKey: 'name',
				valueKey: 'categoryId',
				attributes: {},
				options: this.categoryList,
				formItemAttributes: {
					label: '适用产品大类',
					prop: 'categoryList',
					rules: [...required]
				},
				events: {
					change: (e) => {
						this.$refs.formRef.validateField(['categoryList'], (valid, invalidFields, errLabels) => { })
					}
				}
			}, {
				md: 6,
				isShow: this.formData.normType == 'M' ? true : false,
				name: 'slot-component',
				attributes: { placeholder: '请输入', type: 'number' },
				formItemAttributes: {
					label: '销售价格',
					prop: 'marketPrice',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return (
						<div style="position: relative;">
							<div style="display: flex;justify-content: space-around;align-items: center;position: relative;">
								<el-input v-model={this.formData.marketPrice} type="number" placeholder="请输入"></el-input><span style="margin-left: 10px;">元</span>
							</div>
							<div style="color: #EA8000">注：维护网点销售给师傅的价格</div>
						</div>
					)
				}
			}, {
				md: 6,
				isShow: this.formData.normType == 'M' ? true : false,
				name: 'slot-component',
				attributes: { placeholder: '请输入', type: 'number' },
				formItemAttributes: {
					label: '收费标准',
					prop: 'normAmount',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return (
						<div style="position: relative;">
							<div style="display: flex;justify-content: space-around;align-items: center;position: relative;">
								<el-input v-model={this.formData.normAmount} onChange={(e) => {
									this.formData.normAmount = Number(e).toFixed(2)
									if (this.formData.selfWorkerAmount > e) {
										this.formData.normAmount = ''
										return this.$message.warning('自有库存师傅分账金额必须小于收费标准！');
									} else if (this.formData.outWorkerAmount > e) {
										this.formData.outWorkerAmount = ''
										return this.$message.warning('外购配件师傅分账金额必须小于收费标准！');
									}
									this.formData.selfWebsitAmount = this.Subtr(e, this.formData.selfWorkerAmount)
									this.formData.outWebsitAmount = this.Subtr(e, this.formData.outWorkerAmount)
									this.$refs.formRef.validateField(['selfWebsitAmount'], (valid, invalidFields, errLabels) => { })
									this.$refs.formRef.validateField(['outWebsitAmount'], (valid, invalidFields, errLabels) => { })
								}} type="number" placeholder="请输入"></el-input><span style="margin-left: 10px;">元</span>
							</div>
							<div style="color: #EA8000">注：分账金额需扣除手续费0.6%</div>
						</div>
					)
				}
			}, {
				md: 6,
				isShow: this.formData.normType == 'M' ? true : false,
				name: 'slot-component',
				attributes: { placeholder: '请输入', type: 'number' },
				formItemAttributes: {
					label: '自有库存师傅分账金额',
					prop: 'selfWorkerAmount',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					const that = this
					return (
						<div style="position: relative;">
							<div style="display: flex;justify-content: space-around;align-items: center;position: relative;">
								<el-input v-model={this.formData.selfWorkerAmount} onChange={(e) => {
									this.formData.selfWorkerAmount = Number(this.formData.selfWorkerAmount).toFixed(2)
									if (e && (Number(e) > Number(that.formData.normAmount))) {
										that.formData.selfWorkerAmount = ''
										return this.$message.warning('自有库存师傅分账金额必须小于收费标准！');
									}
									that.formData.selfWebsitAmount = this.Subtr(that.formData.normAmount, e)
								}} type="number" placeholder="请输入"></el-input><span style="margin-left: 10px;">元</span>
							</div>
						</div>
					)
				}
			}, {
				md: 6,
				isShow: this.formData.normType == 'M' ? false : true,
				name: 'slot-component',
				attributes: { placeholder: '请输入', type: 'number' },
				formItemAttributes: {
					label: '师傅分账比例',
					prop: 'selfWorkerAmount',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					const that = this
					return (
						<div style="position: relative;">
							<div style="display: flex;justify-content: space-around;align-items: center;position: relative;">
								<el-input v-model={this.formData.selfWorkerAmount} onChange={(e) => {
									this.formData.selfWorkerAmount = Number(this.formData.selfWorkerAmount).toFixed(2)
									if (e && (Number(e) < 0)) {
										return this.$message.warning('师傅分账比例不能为0！');
									}
									if (e && (this.accAdd(Number(e), Number(that.formData.selfWebsitAmount)) > 100)) {
										this.formData.selfWorkerAmount = 0
										return this.$message.warning('商户与师傅分账比例和最大只能100%！');
									} else {
										that.formData.selfWebsitAmount = this.Subtr(100, e)
									}
								}} type="number" placeholder="请输入"></el-input><span style="margin-left: 10px;">%</span>
							</div>
						</div>
					)
				}
			}, {
				md: 6,
				isShow: this.formData.normType == 'M' ? true : false,
				name: 'slot-component',
				attributes: { placeholder: '请输入', type: 'number' },
				formItemAttributes: {
					label: '外购配件师傅分账金额',
					prop: 'outWorkerAmount',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					const that = this
					return (
						<div style="position: relative;">
							<div style="display: flex;justify-content: space-around;align-items: center;position: relative;">
								<el-input v-model={this.formData.outWorkerAmount} onChange={(e) => {
									this.formData.outWorkerAmount = Number(this.formData.outWorkerAmount).toFixed(2)
									if (Number(e) > Number(that.formData.normAmount)) {
										this.formData.outWorkerAmount = ''
										return this.$message.warning('外购配件师傅分账金额必须小于收费标准！');
									}
									this.formData.outWebsitAmount = this.Subtr(this.formData.normAmount, e)
								}} type="number" placeholder="请输入"></el-input><span style="margin-left: 10px;">元</span>
							</div>
						</div>
					)
				}
			}, {
				md: 6,
				isShow: this.formData.normType == 'M' ? true : false,
				name: 'slot-component',
				attributes: { placeholder: '请输入', type: 'number' },
				formItemAttributes: {
					label: '自有库存商户分账金额',
					prop: 'selfWebsitAmount',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return (
						<div style="position: relative;">
							<div style="display: flex;justify-content: space-around;align-items: center;position: relative;">
								<el-input v-model={this.formData.selfWebsitAmount} disabled type="number" placeholder="请输入"></el-input><span style="margin-left: 10px;">元</span>
							</div>
						</div>
					)
				}
			}, {
				md: 6,
				isShow: this.formData.normType == 'M' ? false : true,
				name: 'slot-component',
				attributes: { placeholder: '请输入', type: 'number' },
				formItemAttributes: {
					label: '商户分账比例',
					prop: 'selfWebsitAmount',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					const that = this
					return (
						<div style="position: relative;">
							<div style="display: flex;justify-content: space-around;align-items: center;position: relative;">
								<el-input v-model={this.formData.selfWebsitAmount} onChange={(e) => {
									this.formData.selfWebsitAmount = Number(this.formData.selfWebsitAmount).toFixed(2)
									if (e && (Number(e) < 0)) {
										return this.$message.warning('商户分账比例不能为0！');
									}
									if (e && (this.accAdd(Number(e), Number(that.formData.selfWorkerAmount)) > 100)) {
										this.formData.selfWebsitAmount = 0
										return this.$message.warning('商户与师傅分账比例和最大只能100%！');
									} else {
										that.formData.selfWorkerAmount = this.Subtr(100, e)
									}
								}} type="number" placeholder="请输入"></el-input><span style="margin-left: 10px;">%</span>
							</div>
						</div>
					)
				}
			}, {
				md: 6,
				isShow: this.formData.normType == 'M' ? true : false,
				name: 'slot-component',
				attributes: { placeholder: '请输入', type: 'number' },
				formItemAttributes: {
					label: '外购配件商户分账金额',
					prop: 'outWebsitAmount',
					rules: [...required]
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return (
						<div style="position: relative;">
							<div style="display: flex;justify-content: space-around;align-items: center;position: relative;">
								<el-input v-model={this.formData.outWebsitAmount} disabled type="number" placeholder="请输入"></el-input><span style="margin-left: 10px;">元</span>
							</div>
						</div>
					)
				}
			}, {
				md: 24,
				isShow: true,
				name: 'el-input',
				attributes: { placeholder: '请输入备注内容', type: "textarea", rows: 5 },
				formItemAttributes: {
					label: '备注',
					prop: 'remark',
					rules: []
				}
			}]
		}
	},
	methods: {
		// 列表请求函数
		getList(p, cb) {
			try {
				var pam = JSON.parse(JSON.stringify(p))
				if (this.examineStatus) {
					pam.params.push({ "param": "b.examine_status", "compare": "=", "value": this.examineStatus })
				}
				cb && cb(pam)
				return listPageV2(pam)
			} catch (error) {
				console.log(error)
			}
		},
		getTypeList(value, type) {
			getTypeList({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.dict_type", "compare": "=", "value": `${value}` }, { "param": "a.status", "compare": "=", "value": "ON" }] }).then(res => {
				this[type] = res.data.records
			})
		},
		getCategoryList() {
			getCategoryList({ "type": 2 }).then(res => {
				this.categoryList = res.data
			})
		},
		// 列表导出函数
		exportList: pageExport,
		// 表格列解析渲染数据更改
		columnParsing(item, defaultData) {
			if (item.jname === 'idCardImg') {
				defaultData.render = (h, { row, index, column }) => {
					return (
						<div style="padding:0 6px;cursor: pointer;">
							{row.idCardImg ? row.idCardImg.split(",").map(url => <el-image src={url} preview-src-list={[url]} fit="fit" style="width:80px;height:80px;" />) : null}
						</div>
					)
				}
			}
			if (item.jname === 'selfWorkerAmount') {
				defaultData.render = (h, { row, index, column }) => {
					return (
						<div>{row.normType == 'M' ? row.selfWorkerAmount : (row.selfWorkerAmount + '%')}</div>
					)
				}
			}
			if (item.jname === 'selfWebsitAmount') {
				defaultData.render = (h, { row, index, column }) => {
					return (
						<div>{row.normType == 'M' ? row.selfWebsitAmount : (row.selfWebsitAmount + '%')}</div>
					)
				}
			}
			return defaultData
		},
		// 监听勾选变化
		selectionChange(data) {
			this.recordSelected = data
		},

		operation() {
			return this.operationBtn({
				edit: {
					click: ({ row, index, column }) => {
						this.openForm('edit',row.goodsId)
					}
				},
			})
		},
		// 打开 新增编辑 网点表单
		openForm(type, id) {
			this.$refs.tabPage.addTab({
				// 对应显示的模块
				activeKey: type,
				// 唯一标识
				key: type,
				// 页签名称
				label: ({ edit: "编辑", add: "新增" })[type],
				// 打开时事件
				triggerEvent: () => {
					this.formCancel()
					this.$nextTick(()=>{
						this.formType = type
						this.formVisible = true
						this.getTypeList('PARTS_UNIT', 'partsUnitList')
						this.getTypeList('BRAND', 'brandList')
						this.getCategoryList()
						if (type == 'add') {
							this.formDialogType = 0
						} else if(type == 'edit'){
							this.formDialogType = 1
							getDetail({ id }).then(res => {
								Object.assign(this.formData, res.data, {
									brandList: res.data.brandList ? res.data.brandList : [],
									categoryList: res.data.categoryList ? res.data.categoryList : [],
							
								})
							})
						}
					})
				},
				// 关闭时事件
				closeEvent: () => {
				
				}
			})
		},
		formCancel() {
			this.formVisible = false
			this.$refs?.formRef?.resetFields()
			this.$data.formRef = this.$options.data().formRef
		},
		updateStatus(stateEnum) {
			if (this.recordSelected.length == 0) {
				return this.$message.warning('请至少勾选一条数据！');
			}
			console.log(this.recordSelected)
			this.$confirm(`请确认是否${stateEnum == 'OFF' ? '下架' : '上架'}该配件, 是否继续?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				updateStatus({
					stateEnum,
					ids: this.recordSelected.map(item => { return item.goodsId }).join(',')
				}).then(res => {
					if (res.code == 200) {
						this.$message({ type: 'success', message: `${stateEnum == 'ON' ? '上架' : '下架'}成功!` })
						this.$refs.pageRef.refreshList()
					} else {
						this.$message.error(res.msg);
					}
				})
			});
		},
		formConfirm(cancel) {
			this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
				if (valid) {
					([add, edit][this.formDialogType])(this.formData).then(res => {
						this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
						cancel('list')
						this.$refs.pageRef.refreshList()
					})
				}
			})
		},
		// 下载导入模版
		handleDownload1() {
			commonTemplateDownload({ name: '配件模板（配件物料）.xlsx' }, `${this.$route.meta.title}`).then(res => {
				this.$message({
					message: '下载成功',
					type: 'success'
				})
			}).catch(err => {
				this.$message.error('下载失败')
			})
			// downloadFiles('charging/standard/download');
		},
		handleDownload2() {
			commonTemplateDownload({ name: '配件模板（服务收费）.xlsx' }, `${this.$route.meta.title}`).then(res => {
				this.$message({
					message: '下载成功',
					type: 'success'
				})
			}).catch(err => {
				this.$message.error('下载失败')
			})
			// downloadFiles('charging/standard/download');
		},
	}
}
</script>

<style lang="scss" scoped>
.tab {
	padding: 20px 20px 0 20px;
}
</style>