|
|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <div class="edit-price">
|
|
|
+ <custom-header name="飞鸟管家"></custom-header>
|
|
|
+ <div class="edit-form">
|
|
|
+ <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="药肥名称" prop="name" required>
|
|
|
+ <el-select v-model="form.name" placeholder="请选择" filterable clearable style="width: 100%">
|
|
|
+ <el-option v-for="opt in nameOptions" :key="opt" :label="opt" :value="opt" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="药肥品牌" prop="brand" required>
|
|
|
+ <el-select v-model="form.brand" placeholder="请选择" filterable clearable style="width: 100%">
|
|
|
+ <el-option v-for="opt in brandOptions" :key="opt" :label="opt" :value="opt" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="药肥类型" required>
|
|
|
+ <div class="row-3-selects">
|
|
|
+ <el-select v-model="form.type1" placeholder="请选择" filterable clearable>
|
|
|
+ <el-option v-for="opt in type1Options" :key="opt" :label="opt" :value="opt" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="form.type2" placeholder="请选择" filterable clearable>
|
|
|
+ <el-option v-for="opt in type2Options" :key="opt" :label="opt" :value="opt" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="form.type3" placeholder="请选择" filterable clearable>
|
|
|
+ <el-option v-for="opt in type3Options" :key="opt" :label="opt" :value="opt" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="计量单位" prop="unit" required>
|
|
|
+ <el-radio-group v-model="form.unit">
|
|
|
+ <el-radio value="克">克</el-radio>
|
|
|
+ <el-radio value="千克">千克</el-radio>
|
|
|
+ <el-radio value="毫升">毫升</el-radio>
|
|
|
+ <el-radio value="升" >升</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="施用方式" prop="method" required>
|
|
|
+ <el-radio-group v-model="form.method">
|
|
|
+ <el-radio value="1">叶面施</el-radio>
|
|
|
+ <el-radio value="2">根部施</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="药肥成本" prop="cost" required class="input-unit">
|
|
|
+ <el-input v-model.number="form.cost" placeholder="请输入">
|
|
|
+ <template #append>元/{{ form.unit }}</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="药肥报价" prop="price" required class="input-unit">
|
|
|
+ <el-input v-model.number="form.price" placeholder="请输入">
|
|
|
+ <template #append>元/{{ form.unit }}</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="药肥库存" prop="stock" required class="input-unit">
|
|
|
+ <el-input v-model.number="form.stock" placeholder="请输入">
|
|
|
+ <template #append>{{ form.unit }}</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="单位兑水" class="input-unit">
|
|
|
+ <div class="water-row">
|
|
|
+ <el-input v-model.number="form.waterMin" placeholder="请输入兑水量">
|
|
|
+ <template #append>kg</template>
|
|
|
+ </el-input>
|
|
|
+ <el-input v-model.number="form.waterMax" placeholder="请输入兑水量">
|
|
|
+ <template #append>kg</template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="适用品种">
|
|
|
+ <el-select v-model="form.crops" multiple placeholder="请选择" filterable clearable style="width: 100%">
|
|
|
+ <el-option v-for="opt in cropOptions" :key="opt" :label="opt" :value="opt" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="page-action">
|
|
|
+ <div class="btn-item del" v-if="!isAdd" @click="openDelete">删除</div>
|
|
|
+ <div class="btn-item cancel" v-if="isAdd" @click="goBack">取消</div>
|
|
|
+ <div class="btn-right">
|
|
|
+ <div class="btn-item cancel" v-if="!isAdd" @click="goBack">取消编辑</div>
|
|
|
+ <div class="btn-item primary" @click="handleSave">{{ isAdd ? '新增报价' : '保存报价' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
+const isAdd = ref(false);
|
|
|
+if (route.query.isAdd) {
|
|
|
+ isAdd.value = true;
|
|
|
+}
|
|
|
+const goBack = () => {
|
|
|
+ router.back();
|
|
|
+}
|
|
|
+
|
|
|
+const openDelete = () => {
|
|
|
+ ElMessageBox.confirm(
|
|
|
+ '确认要删除该报价吗？',
|
|
|
+ '提示',
|
|
|
+ {
|
|
|
+ confirmButtonText: '确认',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 表单模型与选项
|
|
|
+const formRef = ref()
|
|
|
+const form = reactive({
|
|
|
+ name: '',
|
|
|
+ brand: '',
|
|
|
+ type1: '',
|
|
|
+ type2: '',
|
|
|
+ type3: '',
|
|
|
+ unit: '克',
|
|
|
+ method: '叶面施',
|
|
|
+ cost: null,
|
|
|
+ price: null,
|
|
|
+ stock: null,
|
|
|
+ waterMin: null,
|
|
|
+ waterMax: null,
|
|
|
+ crops: ['荔枝', '香蕉']
|
|
|
+})
|
|
|
+
|
|
|
+const rules = {
|
|
|
+ name: [{ required: true, message: '请选择药肥名称', trigger: 'change' }],
|
|
|
+ brand: [{ required: true, message: '请选择药肥品牌', trigger: 'change' }],
|
|
|
+ unit: [{ required: true, message: '请选择计量单位', trigger: 'change' }],
|
|
|
+ method: [{ required: true, message: '请选择施用方式', trigger: 'change' }],
|
|
|
+ cost: [{ required: true, message: '请输入成本', trigger: 'blur' }],
|
|
|
+ price: [{ required: true, message: '请输入报价', trigger: 'blur' }],
|
|
|
+ stock: [{ required: true, message: '请输入库存', trigger: 'blur' }]
|
|
|
+}
|
|
|
+
|
|
|
+const nameOptions = ['乙烯利乙烯利']
|
|
|
+const brandOptions = ['国光']
|
|
|
+const type1Options = ['农药类', '调节', '肥料']
|
|
|
+const type2Options = ['一级', '二级', '三级']
|
|
|
+const type3Options = ['一级', '二级', '三级']
|
|
|
+const cropOptions = ['荔枝', '香蕉', '龙眼', '芒果']
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.edit-price {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: #f5f7fb;
|
|
|
+ .edit-form {
|
|
|
+ margin: 12px;
|
|
|
+ padding: 12px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .row-3-selects {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ gap: 5px;
|
|
|
+ ::v-deep {
|
|
|
+ .el-select__wrapper {
|
|
|
+ padding: 2px 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .el-select { flex: 1; }
|
|
|
+ }
|
|
|
+ .water-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ > .el-input { flex: 1; }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-form-item__label {
|
|
|
+ color: rgba(29, 33, 41, 0.2);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .el-form-item--default {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .el-select__input {
|
|
|
+ color: #2199F8;
|
|
|
+ }
|
|
|
+ .el-select__wrapper {
|
|
|
+ // height: 30px;
|
|
|
+ color: #2199F8;
|
|
|
+ min-height: 30px;
|
|
|
+ line-height: 28px;
|
|
|
+ box-shadow: 0 0 0 1px rgba(33, 153, 248, 0.3) inset;
|
|
|
+ }
|
|
|
+ .el-select__caret {
|
|
|
+ color: #2199F8;
|
|
|
+ }
|
|
|
+ .el-select__placeholder {
|
|
|
+ color: #2199F8;
|
|
|
+ }
|
|
|
+ .el-radio {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ .el-input-group__append {
|
|
|
+ padding: 0 10px;
|
|
|
+ background: none;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ .el-input-group__append {
|
|
|
+ color: rgba(33, 153, 248, 0.5);
|
|
|
+ }
|
|
|
+ .el-tag.el-tag--info {
|
|
|
+ --el-tag-text-color: #2199F8;
|
|
|
+ --el-tag-bg-color: rgba(33, 153, 248, 0.1);
|
|
|
+ }
|
|
|
+ .input-unit {
|
|
|
+ .el-input {
|
|
|
+ border: 1px solid rgba(33, 153, 248, 0.3);
|
|
|
+ border-radius: 5px;
|
|
|
+ height: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ padding: 0 2px 0 10px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ min-height: 28px;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ --el-input-inner-height: 28px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ min-height: 28px;
|
|
|
+ color: #2199F8;
|
|
|
+ --el-input-placeholder-color: rgba(33, 153, 248, 0.43);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-action {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 12px 12px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 2px 2px 4.5px rgba(0, 0, 0, 0.4);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .btn-item {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 41px;
|
|
|
+ border-radius: 20px;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 0 20px;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 14px;
|
|
|
+ &.del {
|
|
|
+ color: #FF943D;
|
|
|
+ background: rgba(255, 148, 61, 0.1);
|
|
|
+ }
|
|
|
+ &.cancel {
|
|
|
+ border: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
+ }
|
|
|
+ &.primary {
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(#76C3FF, #2199F8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-right {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
