factory_mp/pages/pum/quotation_form.vue

<!-- 供应商 -->
<template>
	<view class="form-page">
		<scroll-view scroll-y class="form-scroll">
		<uni-forms v-model="form" label-width="210rpx"  ref="customForm" :rules="customRules">
			<view class="form-card" v-if="form.ticket_">
				<ticketd :ticket_="form.ticket_"></ticketd>
			</view>
			<view class="form-card">
				<view class="form-card-title">报价信息</view>
		<uni-forms-item label="客户名称" required>
          <uni-easyinput
            v-model="form.customer_name"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="产品名称" required>
          <uni-easyinput
            v-model="form.product_name"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="联系人" required>
          <uni-easyinput
            v-model="form.contact_person"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="联系电话" required>
          <uni-easyinput
            v-model="form.contact_phone"
            type="number"
            placeholder="请输入联系电话"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="收件地址" required>
          <uni-easyinput
            v-model="form.receive_address"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="产品规格/数量" required>
          <uni-easyinput
            v-model="form.product_spec_quantity"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="报价依据" required>
          <uni-easyinput
            v-model="form.quotation_basis"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="建议价格及计算方式" required>
          <uni-easyinput
            v-model="form.suggested_price_calc"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="报价区间" required>
          <uni-easyinput
            v-model="form.quotation_range"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="报价人" required>
          <uni-easyinput
            v-model="form.quoter"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>

        <uni-forms-item label="申请日期" required>
          <uni-datetime-picker
            type="date"
            v-model="form.apply_date"
            :disabled="localMode === 'show'"
          />
        </uni-forms-item>
      </view>
      </uni-forms>
		</scroll-view>
		<view class="footer_fixed">
			<button v-if="mode=='edit'" class="form-btn form-btn-danger" @click="handleDel" :loading="saveLoading" :disabled="saveLoading">
				删除
			</button>
			<button v-if="mode!='show'" class="form-btn form-btn-primary" @click="handleSave" :loading="saveLoading" :disabled="saveLoading">
				提交审批
			</button>
			<ticketd_b v-if="form.ticket_ && mode == 'show'" :t_id="form.id" :ticket_="form.ticket_" 
			:ticket_data="ticket_data" @success="()=>{uni.navigateBack()}" ref="ticketd_b"></ticketd_b>
		</view>
	</view>
</template>

<script>
import ticketd_b from "../wf/ticketd_b.vue"
import ticketd from "../wf/ticketd.vue"
	export default {
		components: { ticketd_b, ticketd },
		data(){
			return{
				saveLoading: false,
				mode:"add",
				t_id: null,
				form:{},
				userInfo:{},
				type:0,
				customRules: {
					customer_name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					product_name: {
						rules: [{
							required: true,
							errorMessage: '产品名称不能为空'
						}]
					},
				},
			}
		},
		async onLoad(options) {
			let that = this;
			that.mode = options.mode?options.mode:'show';
			that.t_id = options.t_id?options.t_id:null;
			if(that.mode != "add"){
				if(that.t_id) {
					that.form = await that.$api.quotationItem(that.t_id);
					if(that.form.ticket_.state_.type == 1 && that.form.create_by == uni.getStorageSync("userInfo").id ) {
						that.mode = "edit";
					}else{
						that.mode = "show";
					}
				}
			}
		},
		methods:{
			async handleDel(){
				let that = this;
				await that.$api.quotationDelete(that.form.id)
				uni.navigateBack()
			},
			async handleSave(){
				let that = this;
				that.$refs.customForm.validate().then(res => {
					
				}).catch(err => {
					console.log('err', err);
				})
				let res = await that.$api.quotationCreate(that.form)
			},
		}
	}
</script>

<style lang="scss" scoped>
.form-page { min-height: 100vh; background: #F0F2F5; }
.form-scroll { padding: 20rpx 24rpx; padding-bottom: 180rpx; }
.form-card { background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); }
.form-card-title { font-size: 30rpx; font-weight: 600; color: #1F2937; margin-bottom: 16rpx; padding-left: 16rpx; border-left: 6rpx solid #2BA471; }
.form-textarea { width: 100%; min-height: 160rpx; border: 2rpx solid #E5E7EB; border-radius: 12rpx; padding: 16rpx; font-size: 28rpx; color: #374151; box-sizing: border-box; background: #F9FAFB; }
.form-btn { flex: 1; height: 80rpx; line-height: 80rpx; border-radius: 14rpx !important; font-size: 28rpx; font-weight: 500; border: none !important; }
.form-btn-primary { background: linear-gradient(135deg, #2BA471, #1F8C5E) !important; color: #fff !important; box-shadow: 0 4rpx 12rpx rgba(43,164,113,0.2); }
.form-btn-danger { background: linear-gradient(135deg, #EF4444, #DC2626) !important; color: #fff !important; box-shadow: 0 4rpx 12rpx rgba(239,68,68,0.3); }
.uni-data-checklist .checklist-group .checklist-box{
	margin: 10px 0!important;
}
.flex_file_picker>.uni-file-picker__files{
	flex-direction: row;
}
.flex_file_picker{
	width: 90px;
	flex: none;
}
</style>