bxztApp/packages/screen/src/views/ServiceStationManagePage/addDialog.vue

<template>
  <div class="detail-container">
    <el-form
      ref="formRef"
      :model="form"
      label-position="right"
      label-width="140px"
      style="max-height: 60vh; overflow-y: auto; padding-right: 50px"
      :rules="rules"
    >
      <el-row>
        <el-form-item label="所属区县" prop="qxmc">
          <el-select
            v-model="qx"
            filterable
            remote
            reserve-keyword
            clearable
            placeholder="输入区县名称查询"
            :remote-method="remoteMethod_qx"
            :loading="loading"
            @change="handleSelect_qx"
            value-key="index"
          >
            <el-option
              v-for="(item, index) in qxList"
              :key="index"
              :label="item.qxmc"
              :value="item.qxmc"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务站名称" prop="mc">
            <el-input maxlength="20" show-word-limit v-model="form.mc" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人:" prop="fzr">
            <el-select
              v-model="ryxx"
              filterable
              remote
              reserve-keyword
              clearable
              placeholder="输入人员名称 / 联系方式 查询"
              :remote-method="remoteMethod"
              :loading="loading"
              @change="handleSelect"
              value-key="userId"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.userId"
                :label="item.realName"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="负责人添加经纬度:">
            <el-select v-model="sfjwd">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="sfjwd === '否'">
        <el-col :span="12">
          <el-form-item label="站点经度:" prop="jd">
            <el-input v-model="form.jd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点纬度:" prop="wd">
            <el-input v-model="form.wd" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
      
      <script setup>
import { ref, onMounted, watch, computed } from "vue";
import { request } from "@/utils/request";
const formRef = ref(null);
defineExpose({ formRef });

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
});
const sfjwd = ref("是");
const qx = ref("");
const ryxx = ref("");
const loading = ref(false);
const selectOptions = ref([]);
const qxList = ref([]);

// 根据用户信息 查询角色列表
const getUserList = async (key) => {
  try {
    const keyword = key;
    let url = "";
    if (keyword) {
      url = `/snow-ops-platform/yhzry/getUserByKey?key=${keyword}`;
    } else {
      url = `/snow-ops-platform/yhzry/getUserByKey?key=`;
    }
    const res = await request({
      url: url,
      method: "GET",
    });
    if (res.code === "00000") {
      return res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    ElMessage.error(error.message);
    console.log(error);
  }
};

// 选择人员筛选
const remoteMethod = async (query) => {
  if (query === "") {
    selectOptions.value = [];
    return [];
  }
  loading.value = true;
  const res = await getUserList(query);
  if (res) {
    selectOptions.value = res;
  }
  loading.value = false;
};

// 根据区县名称 查询区县列表
const getQxList = async (key) => {
  try {
    const keyword = key;
    let url = "";
    if (keyword) {
      url = `/snow-ops-platform/district/listDistricts?qxmc=${keyword}`;
    } else {
      url = `/snow-ops-platform/district/listDistricts?qxmc=`;
    }
    const res = await request({
      url: url,
      method: "GET",
    });
    if (res.code === "00000") {
      return res.data;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {}
};

// 选择区县筛选
const remoteMethod_qx = async (query) => {
  loading.value = true;
  const res = await getQxList(query);
  if (res) {
    qxList.value = res;
  }
  loading.value = false;
};

// 选择区县
const handleSelect_qx = (value) => {
  props.form.qxmc = value;
};

// 选择人员
const handleSelect = (value) => {
  console.log("value", value);
  props.form.fzrXm = value.realName;
  props.form.fzrSjhm = value.phone;
  props.form.fzrUserId = value.userId;
};

const rules = computed(() => {
  return {
    mc: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.mc) {
            callback();
          } else {
            callback(new Error("请输入服务站名称"));
          }
        },
        trigger: "blur",
      },
    ],
    qxmc: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.qxmc) {
            callback();
          } else {
            callback(new Error("请选择所属区县"));
          }
        },
        trigger: "blur",
      },
    ],
    fzr: [
      {
        required: true,
        validator: (rule, value, callback) => {
          if (props.form.fzrUserId && props.form.fzrXm && props.form.fzrSjhm) {
            callback();
          } else {
            callback(new Error("请选择负责人"));
          }
        },
        trigger: "blur",
      },
    ],
    jd: [
      {
        required: sfjwd.value === "否",
        validator: (rule, value, callback) => {
          if (props.form.jd) {
            callback();
          } else {
            callback(new Error("请输入站点经度"));
          }
        },
        trigger: "blur",
      },
    ],
    wd: [
      {
        required: sfjwd.value === "否",
        validator: (rule, value, callback) => {
          if (props.form.wd) {
            callback();
          } else {
            callback(new Error("请输入站点纬度"));
          }
        },
        trigger: "blur",
      },
    ],
  };
});
</script>
      
<style>
</style>