daimp-front/sub-operation-service/src/views/packaging/details2.vue

<template>
  <Common>
    <template #main>
      <div class="max-w-7xl mx-auto p-4">
        <div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">申请包装</span></div>
        <h1 style="margin-bottom: 20px">填写需求表</h1>
        <el-form :model="form" label-width="auto" :rules="rules">
          <el-form-item label="您的称呼" prop="name">
            <el-input v-model="form.name" style="width: 400px" />
          </el-form-item>
          <el-form-item label="您的电话" prop="phone">
            <el-input v-model="form.phone" style="width: 400px" />
          </el-form-item>
          <!-- <el-form-item label="详细地址" prop="address1">
            <el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
              <el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <span style="width: 2%"></span>
            <el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
              <el-input v-model="form.address2" />
            </el-form-item>
          </el-form-item> -->
          <el-form-item label="详细地址" required>
            <div style="display: flex; gap: 16px">
              <el-form-item prop="selectedAddress">
                <el-cascader
                  v-model="form.selectedAddress"
                  :options="addressOptions"
                  :props="cascaderProps"
                  placeholder="请选择地址"
                  :style="{ width: unifiedWidth }"
                />
              </el-form-item>
              <el-form-item prop="detailAddress">
                <el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
              </el-form-item>
            </div>
          </el-form-item>
          <!-- 分拣物品 -->
          <el-form-item label="包装物品" prop="goods">
            <!-- <el-input v-model="form.goods" style="width: 44%" /> -->
            <el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 400px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <!-- 分拣数量 -->
          <el-form-item label="包装数量" prop="num">
            <!-- <el-input v-model="form.num" style="width: 44%" /> -->
            <el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 400px">
              <template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
              ><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <!-- 分拣类型 -->
          <el-form-item label="容器类型" prop="type">
            <!-- <el-input v-model="form.type" style="width: 44%" /> -->
            <el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 400px">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <!-- 开始日期 -->
          <el-form-item label="开始日期" prop="date">
            <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" style="width: 400px" />
          </el-form-item>
          <!-- 截至日期 -->
          <el-form-item label="截至日期" prop="date">
            <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" style="width: 400px" />
          </el-form-item>
          <el-form-item label="包装要求" prop="desc">
            <el-input v-model="form.desc" type="textarea" style="width: 400px" />
          </el-form-item>
        </el-form>
        <div style="text-align: left; font-size: 22px; margin-bottom: 10px">
          <span>合计：</span>
          <span style="color: rgb(37, 191, 130)">...</span>
          <span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
        </div>
        <div>
          <el-button type="primary" style="width: 150px" @click="onSubmit">提交</el-button>
          <el-button style="width: 150px">取消</el-button>
        </div>
      </div>
    </template>
  </Common>
</template>

<script setup>
import Common from './components/common.vue';
import { getAssetsFile } from '@/utils';
import { ref, reactive, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getRegion } from '@/apis/common';
const route = useRoute();
const router = useRouter();
const dialogVisible = ref(false);
const formRef = ref(null);

const unifiedWidth = '400px';
const formSize = 'large';
const form = reactive({
  name: '',
  phone: '',
  address1: '',
  address2: '',
  selectedAddress: [], //选中的区域编码数组
  areaAddress: '', //区域地址
  detailAddress: '', //详细地址
  goods: '',
  num: '',
  type: '',
  startDate: '',
  endDate: '',
  desc: '',
});
const rules = reactive({
  name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
  address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
  address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
  goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
  num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
  type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
  date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
});
const options = [
  {
    value: '1',
    label: '西红柿',
  },
  {
    value: '2',
    label: '茄子',
  },
  {
    value: '3',
    label: '辣椒',
  },
];
const options1 = [
  {
    value: '1',
    label: '100',
  },
  {
    value: '2',
    label: '200',
  },
  {
    value: '3',
    label: '300',
  },
  {
    value: '3',
    label: '400',
  },
  {
    value: '3',
    label: '500',
  },
];
const options2 = [
  {
    value: '1',
    label: '塑料框',
  },
  {
    value: '2',
    label: '纸箱',
  },
  {
    value: '3',
    label: '泡沫箱',
  },
  {
    value: '4',
    label: '冰瓶',
  },
];

// const addressOptions = [
//   // 下拉框的选项数据
//   { value: 'beijing', label: '北京市' },
//   { value: 'shanghai', label: '上海市' },
//   { value: 'guangzhou', label: '广州市' },
//   // 可以继续添加更多选项
// ];

// 级联选择器配置
const cascaderProps = ref({
  label: 'areaName', // 选项标签字段名
  value: 'areaCode', // 选项值字段名
  children: 'areaChildVOS', // 子选项字段名
  emitPath: true,
  expandTrigger: 'hover',
});
// 省市区数据（示例）
const addressOptions = ref([]);
const getArea = async () => {
  const res = await getRegion();
  if (res.code === 200) {
    addressOptions.value = res.data;
  } else {
    ElMessage.error(res.message);
  }
};

const toBack = (level) => {
  router.go(level);
};
onMounted(() => {
  getArea();
});
</script>

<style lang="scss" scoped>
/* 根据需要添加样式，这里仅提供基础样式 */
// 基础颜色配置
$primary-color: #25bf82; // 主色调
$text-dark: #25bf82; // 深色文字
$text-regular: #606266; // 常规文字
$border-color: #dcdfe6; // 边框颜色

.max-w-7xl {
  max-width: 80rem;
  background-color: #fff;
  border-radius: 10px;
}
.title {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.p-4 {
  padding: 1rem;
}
</style>