使用新表格组件

ghs/src/components/plugin/t-table/t-table.vue

@@ -0,0 +1,85 @@
+<template>
+	<view
+		class="t-table"
+		:style="{ 'border-width': border + 'px', 'border-color': borderColor }"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		border: {
+			type: String,
+			default: "1"
+		},
+		borderColor: {
+			type: String,
+			default: "#eeeeee"
+		},
+		isCheck: {
+			type: Boolean,
+			default: false
+		},
+		headerBackgroundColor: {
+			type: String,
+			default: "#ffffff"
+		}
+	},
+	provide() {
+		return {
+			table: this
+		};
+	},
+	data() {
+		return {};
+	},
+	created() {
+		this.childrens = [];
+		this.index = 0;
+	},
+	methods: {
+		fire(e, index, len) {
+			let childrens = this.childrens;
+			console.log(childrens);
+			// 全选
+			if (index === 0) {
+				childrens.map((vm, index) => {
+					vm.checkboxData.checked = e;
+					return vm;
+				});
+			} else {
+				let isAll = childrens.find(
+					(n, ids) => ids !== 0 && !n.checkboxData.checked
+				);
+				childrens[0].checkboxData.checked = isAll ? false : true;
+			}
+
+			let fireArr = [];
+			for (let i = 0; i < childrens.length; i++) {
+				if (childrens[i].checkboxData.checked && i !== 0) {
+					fireArr.push(childrens[i].checkboxData.value - 1);
+				}
+			}
+			this.$emit("change", {
+				detail: fireArr
+			});
+		}
+	}
+};
+</script>
+
+<style scoped>
+.t-table {
+	width: 100%;
+	border: 1px #d0dee5 solid;
+	border-left: none;
+	border-top: none;
+	box-sizing: border-box;
+}
+
+.t-table >>> t-tr {
+	display: flex;
+}
+</style>

ghs/src/components/plugin/t-table/t-td.vue

@@ -0,0 +1,95 @@
+<template>
+	<view
+		:class="['t-td', color]"
+		:style="{
+			flex: width ? `0 0 ${width}rpx` : '1',
+			'border-width': thBorder + 'rpx',
+			'border-color': borderColor,
+			'font-size': fontSize + 'rpx',
+			'justify-content': tdAlignCpd
+		}"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		align: String,
+		width: {
+			type: Number | null,
+			default: null
+		},
+		color: String
+	},
+	data() {
+		return {
+			thBorder: "1",
+			borderColor: "#d0dee5",
+			tdAlign: "center",
+			fontSize: "24"
+		};
+	},
+	inject: ["table", "tr"],
+
+	created() {
+		this.thBorder = this.table.border;
+		this.borderColor = this.table.borderColor;
+		this.fontSize = this.tr.fontSize;
+		this.color = this.tr.color;
+		if (this.align) {
+			this.tdAlign = this.align;
+		} else {
+			this.tdAlign = this.tr.align;
+		}
+	},
+	computed: {
+		tdAlignCpd() {
+			let nameAlign = "";
+			switch (this.tdAlign) {
+				case "left":
+					nameAlign = "flex-start";
+					break;
+				case "center":
+					nameAlign = "center";
+					break;
+				case "right":
+					nameAlign = "flex-end";
+					break;
+				default:
+					nameAlign = "center";
+					break;
+			}
+			return nameAlign;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.t-td {
+	flex: 1;
+	display: flex;
+	flex-shrink: 0;
+	margin: 0 10upx;
+	align-items: center;
+	width: 100%;
+	text-align: center;
+	color: #999999;
+	font-size: 24upx;
+
+	&.warn {
+		color: #ffaf1d;
+	}
+	&.fail {
+		color: #f51608;
+	}
+	&.success {
+		color: #09bb07;
+	}
+	&.info {
+		color: #333;
+	}
+}
+</style>

ghs/src/components/plugin/t-table/t-th.vue

@@ -0,0 +1,87 @@
+<template>
+	<view
+		class="t-th"
+		:style="{
+			flex: width ? `0 0 ${width}rpx` : '1',
+			'border-width': thBorder + 'rpx',
+			'border-color': borderColor,
+			'font-size': fontSize + 'rpx',
+			'justify-content': thAlignCpd,
+			backgroundColor: backgroundColor
+		}"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		align: String,
+		width: {
+			type: Number | null,
+			default: null
+		}
+	},
+	data() {
+		return {
+			thBorder: "1",
+			borderColor: "#d0dee5",
+			fontSize: "24",
+			thAlign: "center"
+		};
+	},
+	inject: ["table", "tr"],
+
+	created() {
+		this.thBorder = this.table.border;
+		this.borderColor = this.table.borderColor;
+		this.fontSize = this.tr.fontSize;
+		this.color = this.tr.color;
+
+		if (this.align) {
+			this.thAlign = this.align;
+		} else {
+			this.thAlign = this.tr.align;
+		}
+	},
+
+	computed: {
+		thAlignCpd() {
+			let nameAlign = "";
+			switch (this.thAlign) {
+				case "left":
+					nameAlign = "flex-start";
+					break;
+				case "center":
+					nameAlign = "center";
+					break;
+				case "right":
+					nameAlign = "flex-end";
+					break;
+				default:
+					nameAlign = "center";
+					break;
+			}
+			return nameAlign;
+		}
+	}
+};
+</script>
+
+<style>
+.t-th {
+	flex: 1;
+	display: flex;
+	flex-shrink: 0;
+	margin: 0 10upx;
+	align-items: center;
+	font-size: 24upx;
+	font-weight: bold;
+	text-align: center;
+	color: #999;
+	white-space: nowrap;
+	/* border-left: 1px #d0dee5 solid;
+	border-top: 1px #d0dee5 solid; */
+}
+</style>

ghs/src/components/plugin/t-table/t-tr.vue

@@ -0,0 +1,107 @@
+<template>
+	<view
+		:class="['t-tr', { header: header }]"
+		:style="{
+			backgroundColor: backgroundColor
+		}"
+	>
+		<view
+			v-if="isCheck"
+			class="t-check-box"
+			:style="{ 'border-width': thBorder + 'px', 'border-color': borderColor }"
+		>
+			<checkbox-group @change="checkboxChange">
+				<checkbox
+					:value="checkboxData.value + ''"
+					:checked="checkboxData.checked"
+				/>
+			</checkbox-group>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		header: Boolean,
+		fontSize: String,
+		color: String,
+		align: String
+	},
+	inject: ["table"],
+	provide() {
+		return {
+			tr: this
+		};
+	},
+	data() {
+		return {
+			isCheck: false,
+			checkboxData: {
+				value: 0,
+				checked: false
+			},
+			checked: false,
+			thBorder: "1",
+			borderColor: "#eeeeee",
+			backgroundColor: "#ffffff"
+		};
+	},
+	created() {
+		this.thBorder = this.table.border;
+		this.borderColor = this.table.borderColor;
+		this.table.childrens.push(this);
+		this.checkboxData.value = this.table.index++;
+		this.isCheck = this.table.isCheck;
+		if (this.header && this.table.headerBackgroundColor) {
+			this.backgroundColor = this.table.headerBackgroundColor;
+		}
+	},
+	methods: {
+		checkboxChange(e) {
+			this.checkboxData.checked = !this.checkboxData.checked;
+			this.table.childrens[this.checkboxData.value] = this;
+			this.table.fire(
+				e.detail.value[0] ? true : false,
+				this.checkboxData.value,
+				this.table.index
+			);
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.t-tr {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	padding: 20upx 30upx;
+	border-bottom: 1px solid #eeeeee;
+	&.header {
+		box-shadow: 0px 1px 0px 0px #eeeeee;
+	}
+}
+
+.t-tr t-th,
+.t-tr t-td {
+	display: flex;
+	flex: 1;
+}
+
+.t-tr .t-check-box {
+	flex-shrink: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 80upx;
+	color: #3b4246;
+	border-left: 1px #d0dee5 solid;
+	border-top: 1px #d0dee5 solid;
+}
+
+.t-tr .t-check-box checkbox {
+	transform: scale(0.8);
+}
+</style>

ghs/src/main.js

@@ -1,35 +1,34 @@
-import Vue from 'vue'
-import App from './App'
+import Vue from "vue";
+import App from "./App";
 
-import constants from '@/constant/index'
-Vue.prototype.$constant = constants
-import './static/iconfont/iconfont.css'
-import '@/filters/index'
+import constants from "@/constant/index";
+Vue.prototype.$constant = constants;
+import "./static/iconfont/iconfont.css";
+import "@/filters/index";
 
-import util from './utils/util'
-Vue.prototype.$util = util
+import util from "./utils/util";
+Vue.prototype.$util = util;
 
-import globalMixins from './mixins/globalMixins'
-Vue.mixin(globalMixins)
+import globalMixins from "./mixins/globalMixins";
+Vue.mixin(globalMixins);
 
-import store from './store'
-Vue.prototype.$store = store
+import store from "./store";
+Vue.prototype.$store = store;
 
 // 阻止启动生产消息，常用作指令
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 // 封装得全局消息提示
-Vue.prototype.$msg = (title) => (
+Vue.prototype.$msg = title =>
 	uni.showToast({
 		title,
-		icon: 'none'
-	})
-)
+		icon: "none"
+	});
 
 // 生产环境中控制台不打印普通信息，以免造成内存泄漏
-if (process.env.NODE_ENV == 'production') {
+if (process.env.NODE_ENV == "production") {
 	if (console) {
-		console.log = () => {}
+		console.log = () => {};
 	}
 }
 
@@ -43,10 +42,20 @@ if (process.env.NODE_ENV == 'production') {
 // Vue.component('page-foot', pageFoot)
 // Vue.component('uLink', uLink)
 
-App.mpType = 'app'
+import tTable from "@/components/plugin/t-table/t-table.vue";
+import tTh from "@/components/plugin/t-table/t-th.vue";
+import tTr from "@/components/plugin/t-table/t-tr.vue";
+import tTd from "@/components/plugin/t-table/t-td.vue";
+
+Vue.component("t-table", tTable);
+Vue.component("t-tr", tTr);
+Vue.component("t-th", tTh);
+Vue.component("t-td", tTd);
+
+App.mpType = "app";
 
 const app = new Vue({
 	store,
 	...App
-})
-app.$mount()
+});
+app.$mount();

ghs/src/pagesStorehouse/flower/category.vue

@@ -3,129 +3,180 @@
 		<scroll-view scroll-y scroll-with-animation class="main-view">
 			<view class="space-view ex-table">
 				<block v-if="!$util.isEmpty(list.data)">
-					<Tabel
-						:headerBackgroundColor="'#F0F2F6'"
-						:columns="columns"
-						:dataList="list.data"
-						:fontSize="28"
-						:parentData="{
-							dataList: list.data,
-							upSortByIndex: upSortByIndex,
-							downSortByIndex: downSortByIndex,
-							delEvent: delEvent
-						}"
-					>
-						<template v-slot="{ row, column, index, parentData }">
-							<view v-if="column.custom == 'edit'" class="edit-td">
-								<text
-									:class="['iconfont', 'iconshangyi', { disabled: index == 0 }]"
-									@click.stop="upSortByIndex(row, index)"
-								></text>
-								<text
-									:class="[
-										'iconfont',
-										'iconxiayi',
-										{ disabled: index >= parentData.dataList.length - 1 }
-									]"
-									@click.stop="downSortByIndex(row, index)"
-								></text>
-								<text class="iconfont iconbianji" @click.stop="editEvent(row, index)">
-								</text>
-								<text class="iconfont icondelete" @click.stop="delEvent(row, index)">
-								</text>
-							</view>
-						</template>
-					</Tabel>
+					<t-table :headerBackgroundColor="'#F0F2F6'" :fontSize="28">
+						<t-tr header>
+							<t-th v-for="(item, index) in columns" :key="index" :align="item.align">
+								{{ item.name }}
+							</t-th>
+						</t-tr>
+						<t-tr v-for="(item, index) in list.data" :key="item.id">
+							<t-td
+								v-for="(column, colIndex) in columns"
+								:key="colIndex"
+								:align="column.align"
+								:color="column.color"
+							>
+								<view v-if="column.custom == 'edit'" class="edit-td">
+									<template v-if="parentData.isSort">
+										<text
+											:class="['iconfont', 'iconshangyi', { disabled: index == 0 }]"
+											@click.stop="upSortByIndex(item, index)"
+										></text>
+										<text
+											:class="[
+												'iconfont',
+												'iconxiayi',
+												{ disabled: index >= parentData.dataList.length - 1 }
+											]"
+											@click.stop="downSortByIndex(item, index)"
+										></text>
+									</template>
+									<text
+										v-else
+										class="iconfont icondelete"
+										@click.stop="delEvent(item, index)"
+									>
+									</text>
+								</view>
+								<view v-else-if="column.custom">
+									<view class="input-td">
+										<input
+											type="number"
+											:value="item[column.dataIndex]"
+											@input="changeItem($event, item, column.dataIndex, index)"
+										/>
+									</view>
+								</view>
+								<view v-else>
+									{{ item[column.dataIndex] || "" }}
+								</view>
+							</t-td>
+						</t-tr>
+					</t-table>
 				</block>
 				<block v-else>
 					<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
 				</block>
 			</view>
 		</scroll-view>
-
 		<view class="under-bar">
-			<button :class="['admin-button-com']" @click="addEvent">
+			<button
+				v-if="!isSort"
+				:class="['admin-button-com', 'default']"
+				@click="isSort = true"
+			>
+				排序
+			</button>
+			<button
+				v-else
+				:class="['admin-button-com', 'default']"
+				@click="isSort = false"
+			>
+				取消排序
+			</button>
+			<button :class="['admin-button-com']" @click="showFlower = true">
 				添加
 			</button>
+			<!-- <button :class="['admin-button-com']" @click="">
+				保存
+			</button> -->
 		</view>
-		<ModalModule
-			:show="showEdit"
-			@cancel="closeModal"
-			@click="affirmEvent"
-			:title="editTitle"
-			color="#333"
-			:size="32"
-			padding="30rpx 30rpx"
-		>
-			<template slot="customContent">
-				<view class="inpput-cmd_bx">
-					<input v-model="editInfo.name" placeholder="请输入分类名" />
-				</view>
-			</template>
-		</ModalModule>
+		<AppFlowerSel
+			:selectList="list.data"
+			:show.sync="showFlower"
+			@select="changeFlowerEvent"
+		/>
 	</view>
 </template>
 <script>
-import Tabel from "@/components/app-table";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import { list } from "@/mixins";
 import {
-	getFlowerCategoryListApi,
-	updateFlowerCategoryApi,
-	addFlowerCategoryApi
+	getFlowerListApi,
+	updateFlowerApi,
+	addFlowerApi,
+	deleteFlowerApi
 } from "@/api/storehouse/flower";
-import ModalModule from "@/components/plugin/modal";
+import lodash from "lodash";
 
+import AppFlowerSel from "@/components/app-flower-sel";
 export default {
-	components: { Tabel, AppWrapperEmpty, ModalModule },
+	components: { AppFlowerSel, AppWrapperEmpty },
 	mixins: [list],
 	data() {
 		return {
-			showEdit: false,
-			editInfo: {
-				name: "",
-				id: null,
-				inTurn: 0
-			},
+			classId: null,
+			isSort: false,
+			showFlower: false,
 			columns: [
 				{
-					name: "分类",
-					dataIndex: "name",
+					name: "名称",
+					dataIndex: "itemName",
 					color: "info"
 				},
+				{
+					name: "库存预警",
+					width: 130,
+					color: "info",
+					align: "center",
+					dataIndex: "stockWarning",
+					custom: "warn"
+				},
+				// {
+				// 	name: "每扎重量(斤)",
+				// 	width: 130,
+				// 	color: "info",
+				// 	align: "center",
+				// 	dataIndex: "weight",
+				// 	custom: "weight"
+				// },
+				{
+					name: "每扎采购价(元)",
+					width: 130,
+					color: "info",
+					align: "center",
+					dataIndex: "unitCost",
+					custom: "cost"
+				},
+				{
+					name: "每扎加价(元)",
+					width: 130,
+					color: "info",
+					align: "center",
+					dataIndex: "unitAddPrice",
+					custom: "price"
+				},
 				{
 					name: "操作",
-					align: "right",
+					align: "center",
 					custom: "edit"
 				}
 			]
 		};
 	},
+	onLoad(options) {
+		const { classId } = options;
+
+		this.classId = classId;
+		this.initData();
+	},
 	onPullDownRefresh() {
 		this.resetList();
 		this._list().then(res => {
 			uni.stopPullDownRefresh();
 		});
 	},
-	computed: {
-		editTitle() {
-			let title = "新增";
-			if (this.editInfo && this.editInfo.id) {
-				title = this.editInfo.name;
-			}
-			return title;
-		}
-	},
 	methods: {
-		async init() {
+		async initData() {
 			this._list();
 		},
 		_list() {
 			let params = {
+				classId: this.classId,
 				page: this.list.page,
 				pageSize: this.list.pageSize
 			};
-			return getFlowerCategoryListApi(params)
+			return getFlowerListApi(params)
 				.then(res => {
 					this.completes(res);
 				})
@@ -150,16 +201,18 @@ export default {
 			try {
 				let params = {
 					id: item.id,
-					name: item.name,
+					stockWarning: item.stockWarning,
+					unitWeight: item.unitWeight,
+					unitCost: item.unitCost,
+					unitAddPrice: item.unitAddPrice,
 					inTurn: ++item.inTurn
 				};
-				let api = updateFlowerCategoryApi;
+				let api = updateFlowerApi;
 
 				await api(params);
 
 				this.resetList();
 				await this._list();
-				this.closeModal();
 			} catch (error) {}
 		},
 		async downSortByIndex(item, index) {
@@ -169,21 +222,23 @@ export default {
 			try {
 				let params = {
 					id: item.id,
-					name: item.name,
+					stockWarning: item.stockWarning,
+					unitWeight: item.unitWeight,
+					unitCost: item.unitCost,
+					unitAddPrice: item.unitAddPrice,
 					inTurn: --item.inTurn
 				};
-				let api = updateFlowerCategoryApi;
+				let api = updateFlowerApi;
 
 				await api(params);
 
 				this.resetList();
 				await this._list();
-				this.closeModal();
 			} catch (error) {}
 		},
-		async delEvent(item, index) {
+		delEvent(item, index) {
 			uni.showModal({
-				title: `确认删除${item.name}`,
+				title: `确认删除${item.name || ""}`,
 				content: "",
 				showCancel: true,
 				cancelText: "取消",
@@ -193,11 +248,10 @@ export default {
 				success: async result => {
 					if (result.confirm) {
 						try {
-							await deleteFlowerCategoryApi(item.id);
+							await deleteFlowerApi(item.id);
 							uni.showToast({
 								title: "删除成功"
 							});
-
 							this.resetList();
 							this._list();
 						} catch (error) {}
@@ -207,42 +261,43 @@ export default {
 				complete: () => {}
 			});
 		},
-		editEvent(item) {
-			uni.navigateTo({
-				url: `/pagesStorehouse/flower/manage?classId=${item.id}`,
-				success: result => {},
-				fail: () => {},
-				complete: () => {}
-			});
-		},
-		addEvent() {
-			this.showEdit = true;
-		},
-		closeModal() {
-			this.editInfo = {
-				name: "",
-				id: null,
-				inTurn: 0
-			};
-			this.showEdit = false;
-		},
-		async affirmEvent() {
+		changeItem: lodash.debounce(function(e, item, key, index) {
+			console.log(33333, e);
 			try {
+				const {
+					detail: { value }
+				} = e;
 				let params = {
-					...this.editInfo
+					id: item.id,
+					stockWarning: item.stockWarning,
+					unitWeight: item.unitWeight,
+					unitCost: item.unitCost,
+					unitAddPrice: item.unitAddPrice
 				};
-				let api = addFlowerCategoryApi;
-
-				if (this.editInfo.id) {
-					api = updateFlowerCategoryApi;
-				}
-				await api(params);
+				params[key] = value;
+				updateFlowerApi(params)
+					.then(data => {
+						uni.showToast({
+							title: "保存成功"
+						});
+						this.resetList();
+						this._list();
+					})
+					.catch(err => {});
+			} catch (error) {}
+		}, 500),
+		async changeFlowerEvent(item) {
+			try {
+				let options = {
+					itemId: item.id,
+					classId: this.classId
+				};
+				await addFlowerApi(options);
 				uni.showToast({
-					title: "保存成功"
+					title: "添加成功"
 				});
 				this.resetList();
-				await this._list();
-				this.closeModal();
+				this._list();
 			} catch (error) {}
 		}
 	}
@@ -317,7 +372,7 @@ export default {
 			/deep/.edit-td {
 				.iconfont {
 					font-size: 40upx;
-					margin: 0 20upx;
+					margin: 0 5upx;
 					&.disabled {
 						color: #eeeeee;
 					}
@@ -344,21 +399,5 @@ export default {
 			}
 		}
 	}
-
-	/deep/.inpput-cmd_bx {
-		margin: 20upx 0;
-
-		width: 100%;
-
-		input {
-			padding: 0 20upx;
-			width: 100%;
-			height: 100upx;
-			line-height: 100upx;
-			border: 1px solid #f3f3f3;
-			border-radius: 20upx;
-			font-size: 28upx;
-		}
-	}
 }
 </style>

ghs/src/pagesStorehouse/flower/manage.vue

@@ -3,179 +3,135 @@
 		<scroll-view scroll-y scroll-with-animation class="main-view">
 			<view class="space-view ex-table">
 				<block v-if="!$util.isEmpty(list.data)">
-					<Tabel
-						:headerBackgroundColor="'#F0F2F6'"
-						:columns="columns"
-						:dataList="list.data"
-						:fontSize="28"
-						:parentData="{
-							isSort: isSort,
-							dataList: list.data,
-							upSortByIndex: upSortByIndex,
-							downSortByIndex: downSortByIndex,
-							delEvent: delEvent,
-							changeItem: changeItem
-						}"
-					>
-						<template v-slot="{ row, column, index, parentData }">
-							<view v-if="column.custom == 'edit'" class="edit-td">
-								<template v-if="parentData.isSort">
+					<t-table :headerBackgroundColor="'#F0F2F6'">
+						<t-tr header>
+							<t-th v-for="(item, index) in columns" :key="index" :align="item.align">
+								{{ item.name }}
+							</t-th>
+						</t-tr>
+						<t-tr v-for="(item, index) in list.data" :key="item.id">
+							<t-td
+								v-for="(column, colIndex) in columns"
+								:key="colIndex"
+								:align="column.align"
+								:color="column.color"
+							>
+								<view v-if="column.custom == 'edit'" class="edit-td">
 									<text
 										:class="['iconfont', 'iconshangyi', { disabled: index == 0 }]"
-										@click.stop="upSortByIndex(row, index)"
+										@click.stop="upSortByIndex(item, index)"
 									></text>
 									<text
 										:class="[
 											'iconfont',
 											'iconxiayi',
-											{ disabled: index >= parentData.dataList.length - 1 }
+											{ disabled: index >= dataList.length - 1 }
 										]"
-										@click.stop="downSortByIndex(row, index)"
+										@click.stop="downSortByIndex(item, index)"
 									></text>
-								</template>
-								<text
-									v-else
-									class="iconfont icondelete"
-									@click.stop="delEvent(row, index)"
-								>
-								</text>
-							</view>
-							<view v-else>
-								<view class="input-td">
-									<input
-										type="number"
-										:value="row[column.dataIndex]"
-										@input="changeItem($event, row, column.dataIndex, index)"
-									/>
+									<text class="iconfont iconbianji" @click.stop="editEvent(item, index)">
+									</text>
+									<text class="iconfont icondelete" @click.stop="delEvent(item, index)">
+									</text>
 								</view>
-							</view>
-						</template>
-					</Tabel>
+								<view v-else>
+									{{ item[column.dataIndex] || "" }}
+								</view>
+							</t-td>
+						</t-tr>
+					</t-table>
 				</block>
 				<block v-else>
 					<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
 				</block>
 			</view>
 		</scroll-view>
+
 		<view class="under-bar">
-			<button
-				v-if="!isSort"
-				:class="['admin-button-com', 'default']"
-				@click="isSort = true"
-			>
-				排序
-			</button>
-			<button
-				v-else
-				:class="['admin-button-com', 'default']"
-				@click="isSort = false"
-			>
-				取消排序
-			</button>
-			<button :class="['admin-button-com']" @click="showFlower = true">
+			<button :class="['admin-button-com']" @click="addEvent">
 				添加
 			</button>
-			<!-- <button :class="['admin-button-com']" @click="">
-				保存
-			</button> -->
 		</view>
-		<AppFlowerSel
-			:selectList="list.data"
-			:show.sync="showFlower"
-			@select="changeFlowerEvent"
-		/>
+		<ModalModule
+			:show="showEdit"
+			@cancel="closeModal"
+			@click="affirmEvent"
+			:title="editTitle"
+			color="#333"
+			:size="32"
+			padding="30rpx 30rpx"
+		>
+			<template slot="customContent">
+				<view class="inpput-cmd_bx">
+					<input v-model="editInfo.name" placeholder="请输入分类名" />
+				</view>
+			</template>
+		</ModalModule>
 	</view>
 </template>
 <script>
-import Tabel from "@/components/app-table";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import { list } from "@/mixins";
 import {
-	getFlowerListApi,
-	updateFlowerApi,
-	addFlowerApi,
-	deleteFlowerApi
+	getFlowerCategoryListApi,
+	deleteFlowerCategoryApi,
+	updateFlowerCategoryApi,
+	addFlowerCategoryApi
 } from "@/api/storehouse/flower";
-import lodash from "lodash";
+import ModalModule from "@/components/plugin/modal";
 
-import AppFlowerSel from "@/components/app-flower-sel";
 export default {
-	components: { Tabel, AppFlowerSel, AppWrapperEmpty },
+	components: { AppWrapperEmpty, ModalModule },
 	mixins: [list],
 	data() {
 		return {
-			classId: null,
-			isSort: false,
-			showFlower: false,
+			showEdit: false,
+			editInfo: {
+				name: "",
+				id: null,
+				inTurn: 0
+			},
 			columns: [
 				{
-					name: "名称",
+					name: "分类",
 					dataIndex: "name",
+					align: "left",
 					color: "info"
 				},
-				{
-					name: "库存预警",
-					width: 130,
-					color: "info",
-					align: "center",
-					dataIndex: "stockWarning",
-					custom: "warn"
-				},
-				// {
-				// 	name: "每扎重量(斤)",
-				// 	width: 130,
-				// 	color: "info",
-				// 	align: "center",
-				// 	dataIndex: "weight",
-				// 	custom: "weight"
-				// },
-				{
-					name: "每扎采购价(元)",
-					width: 130,
-					color: "info",
-					align: "center",
-					dataIndex: "unitCost",
-					custom: "cost"
-				},
-				{
-					name: "每扎加价(元)",
-					width: 130,
-					color: "info",
-					align: "center",
-					dataIndex: "unitAddPrice",
-					custom: "price"
-				},
 				{
 					name: "操作",
-					align: "center",
+					align: "right",
 					custom: "edit"
 				}
-			]
+			],
+			headerBackgroundColor: "#F0F2F6"
 		};
 	},
-	onLoad(options) {
-		const { classId } = options;
-
-		this.classId = classId;
-		this.initData();
-	},
 	onPullDownRefresh() {
 		this.resetList();
 		this._list().then(res => {
 			uni.stopPullDownRefresh();
 		});
 	},
+	computed: {
+		editTitle() {
+			let title = "新增";
+			if (this.editInfo && this.editInfo.id) {
+				title = this.editInfo.name;
+			}
+			return title;
+		}
+	},
 	methods: {
-		async initData() {
+		async init() {
 			this._list();
 		},
 		_list() {
 			let params = {
-				classId: this.classId,
 				page: this.list.page,
 				pageSize: this.list.pageSize
 			};
-			return getFlowerListApi(params)
+			return getFlowerCategoryListApi(params)
 				.then(res => {
 					this.completes(res);
 				})
@@ -200,18 +156,16 @@ export default {
 			try {
 				let params = {
 					id: item.id,
-					stockWarning: item.stockWarning,
-					unitWeight: item.unitWeight,
-					unitCost: item.unitCost,
-					unitAddPrice: item.unitAddPrice,
+					name: item.name,
 					inTurn: ++item.inTurn
 				};
-				let api = updateFlowerApi;
+				let api = updateFlowerCategoryApi;
 
 				await api(params);
 
 				this.resetList();
 				await this._list();
+				this.closeModal();
 			} catch (error) {}
 		},
 		async downSortByIndex(item, index) {
@@ -221,23 +175,21 @@ export default {
 			try {
 				let params = {
 					id: item.id,
-					stockWarning: item.stockWarning,
-					unitWeight: item.unitWeight,
-					unitCost: item.unitCost,
-					unitAddPrice: item.unitAddPrice,
+					name: item.name,
 					inTurn: --item.inTurn
 				};
-				let api = updateFlowerApi;
+				let api = updateFlowerCategoryApi;
 
 				await api(params);
 
 				this.resetList();
 				await this._list();
+				this.closeModal();
 			} catch (error) {}
 		},
-		delEvent(item, index) {
+		async delEvent(item, index) {
 			uni.showModal({
-				title: `确认删除${item.name || ""}`,
+				title: `确认删除${item.name}`,
 				content: "",
 				showCancel: true,
 				cancelText: "取消",
@@ -247,10 +199,11 @@ export default {
 				success: async result => {
 					if (result.confirm) {
 						try {
-							await deleteFlowerApi(item.id);
+							await deleteFlowerCategoryApi(item.id);
 							uni.showToast({
 								title: "删除成功"
 							});
+
 							this.resetList();
 							this._list();
 						} catch (error) {}
@@ -260,43 +213,42 @@ export default {
 				complete: () => {}
 			});
 		},
-		changeItem: lodash.debounce(function(e, item, key, index) {
-			console.log(33333, e);
+		editEvent(item) {
+			uni.navigateTo({
+				url: `/pagesStorehouse/flower/category?classId=${item.id}`,
+				success: result => {},
+				fail: () => {},
+				complete: () => {}
+			});
+		},
+		addEvent() {
+			this.showEdit = true;
+		},
+		closeModal() {
+			this.editInfo = {
+				name: "",
+				id: null,
+				inTurn: 0
+			};
+			this.showEdit = false;
+		},
+		async affirmEvent() {
 			try {
-				const {
-					detail: { value }
-				} = e;
 				let params = {
-					id: item.id,
-					stockWarning: item.stockWarning,
-					unitWeight: item.unitWeight,
-					unitCost: item.unitCost,
-					unitAddPrice: item.unitAddPrice
+					...this.editInfo
 				};
-				params[key] = value;
-				updateFlowerApi(params)
-					.then(data => {
-						uni.showToast({
-							title: "保存成功"
-						});
-						this.resetList();
-						this._list();
-					})
-					.catch(err => {});
-			} catch (error) {}
-		}, 500),
-		async changeFlowerEvent(item) {
-			try {
-				let options = {
-					itemId: item.id,
-					classId: this.classId
-				};
-				await addFlowerApi(options);
+				let api = addFlowerCategoryApi;
+
+				if (this.editInfo.id) {
+					api = updateFlowerCategoryApi;
+				}
+				await api(params);
 				uni.showToast({
-					title: "添加成功"
+					title: "保存成功"
 				});
 				this.resetList();
-				this._list();
+				await this._list();
+				this.closeModal();
 			} catch (error) {}
 		}
 	}
@@ -371,7 +323,7 @@ export default {
 			/deep/.edit-td {
 				.iconfont {
 					font-size: 40upx;
-					margin: 0 5upx;
+					margin: 0 20upx;
 					&.disabled {
 						color: #eeeeee;
 					}
@@ -398,5 +350,21 @@ export default {
 			}
 		}
 	}
+
+	/deep/.inpput-cmd_bx {
+		margin: 20upx 0;
+
+		width: 100%;
+
+		input {
+			padding: 0 20upx;
+			width: 100%;
+			height: 100upx;
+			line-height: 100upx;
+			border: 1px solid #f3f3f3;
+			border-radius: 20upx;
+			font-size: 28upx;
+		}
+	}
 }
 </style>

ghs/src/static/css/common.scss

@@ -530,4 +530,42 @@ li {
     background-color: #3385FF;
     height: 299px;
     border-radius: 0px 0px 83px 83px;
+}
+
+
+
+.table-view {
+	.table-header {
+		display: flex;
+		padding: 20upx 30upx;
+
+		box-shadow: 0px 1px 0px 0px #eeeeee;
+		color: #999999;
+		.table-th {
+            margin:0 10upx;
+			white-space: nowrap;
+		}
+	}
+	.table-tr {
+		display: flex;
+		align-items: center;
+		padding: 20upx 30upx;
+		border-bottom: 1px solid #eeeeee;
+		color: #999999;
+		.table-td {
+            margin:0 10upx;
+			.warn {
+				color: #ffaf1d;
+			}
+			.fail {
+				color: #f51608;
+			}
+			.success {
+				color: #09bb07;
+			}
+			.info {
+				color: #333;
+			}
+		}
+	}
 }