Merge branch 'feature-001' of ssh://114.215.109.124:29418/supervision-vue i...

zmc

2023-12-18 6c74bf912e251347714099a84585f825b32a1c08

 src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue

@@ -1,265 +1,227 @@
<!-- 场景基本信息编辑 -->
<template>
  <el-form
    :inline="false"
    :model="formObj"
    ref="formRef"
<<<<<<< HEAD
  <FYForm :form-info="_formInfo" :rules="rules" @submit="submit" @cancel="cancel">
=======
  <FYForm
    :form-info="_formInfo"
    :rules="rules"
    label-position="right"
    label-width="150px"
    :useReset="true"
    @submit="submit"
    @cancel="cancel"
  >
    <el-form-item label="场景名称" prop="name">
      <el-input
        clearable
        show-word-limit
        v-model="formObj.name"
        placeholder="场景名称"
      />
    </el-form-item>
    <el-form-item label="场景类型" prop="_typeObj">
      <el-select v-model="formObj._typeObj" placeholder="场景类型">
        <el-option
          v-for="s in sceneTypes"
          :key="s.value"
          :label="s.label"
          :value="s"
>>>>>>> 356f54467f525f437f41271fb62f6be66f2ab1e5
    <template #form-item="{ formObj }">
      <el-form-item label="场景名称" prop="name">
        <el-input clearable show-word-limit v-model="formObj.name" placeholder="场景名称" />
      </el-form-item>
      <el-form-item label="场景类型" prop="_typeObj">
        <el-select v-model="formObj._typeObj" placeholder="场景类型">
          <el-option v-for="s in sceneTypes" :key="s.value" :label="s.label" :value="s" />
        </el-select>
      </el-form-item>
      <el-form-item label="省/市/区/镇" prop="_locations">
        <el-cascader
          v-model="formObj._locations"
          :options="locations"
          placeholder="省/市/区/镇"
          style="width: 300px"
          :props="cascaderProps"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="省/市/区/镇" prop="_locations">
      <el-cascader
        v-model="formObj._locations"
        :options="locations"
        placeholder="省/市/区/镇"
        style="width: 300px"
        :props="cascaderProps"
      />
    </el-form-item>
    <el-form-item label="地址" prop="location">
      <el-input
        show-word-limit
        clearable
        v-model="formObj.location"
        placeholder="地址"
      />
    </el-form-item>
    <el-form-item label="经度" prop="longitude">
      <!-- <el-input type="number" v-model="formObj.longitude" placeholder="经度" /> -->
      <el-input-number
        v-model="formObj.longitude"
        :precision="6"
        :step="0.1"
        controls-position="right"
      />
    </el-form-item>
    <el-form-item label="纬度" prop="latitude">
      <!-- <el-input type="number" v-model="formObj.latitude" placeholder="纬度" /> -->
      <el-input-number
        v-model="formObj.latitude"
        :precision="6"
        :step="0.1"
        controls-position="right"
      />
    </el-form-item>
    <el-form-item label="联系人" prop="contacts">
      <el-input
        show-word-limit
        clearable
        v-model="formObj.contacts"
        placeholder="联系人"
      />
    </el-form-item>
    <el-form-item label="联系电话" prop="contactst">
      <el-input type="tel" v-model="formObj.contactst" placeholder="联系电话">
        <template #prepend>
          <el-icon>
            <Iphone />
          </el-icon>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="状态" prop="online">
      <el-switch v-model="formObj.online" />
      <span style="margin-left: 16px">{{
        formObj.online ? '在线' : '下线'
      }}</span>
    </el-form-item>
    <el-form-item label="编号" prop="index">
      <el-input-number readonly v-model="formObj.index" :step="1" :min="0" />
    </el-form-item>

    <el-form-item>
      <el-button
        :disabled="!edit"
        type="primary"
        @click="onSubmit"
        :loading="loading"
        >提交</el-button
      >
      <el-button :disabled="!edit" @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
      </el-form-item>
      <el-form-item label="地址" prop="location">
        <el-input show-word-limit clearable v-model="formObj.location" placeholder="地址" />
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <!-- <el-input type="number" v-model="formObj.longitude" placeholder="经度" /> -->
        <el-input-number
          v-model="formObj.longitude"
          :precision="6"
          :step="0.1"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <!-- <el-input type="number" v-model="formObj.latitude" placeholder="纬度" /> -->
        <el-input-number
          v-model="formObj.latitude"
          :precision="6"
          :step="0.1"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts">
        <el-input show-word-limit clearable v-model="formObj.contacts" placeholder="联系人" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactst">
        <el-input type="tel" v-model="formObj.contactst" placeholder="联系电话">
          <template #prepend>
            <el-icon>
              <Iphone />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="状态" prop="online">
        <el-switch v-model="formObj.online" />
        <span style="margin-left: 16px">{{ formObj.online ? '在线' : '下线' }}</span>
      </el-form-item>
      <el-form-item label="编号" prop="index">
        <el-input-number readonly v-model="formObj.index" :step="1" :min="0" />
      </el-form-item>
    </template>
  </FYForm>
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { enumScene_2NA } from '@/enum/scene';
import { enumLocationNA } from '@/enum/location';
import sceneApi from '@/api/fysp/sceneApi';
import { useFormConfirm } from '@/composables/formConfirm';
import { defineProps, defineEmits, reactive, ref, watch } from 'vue'
import { enumScene } from '@/enum/scene'
import { enumLocation } from '@/enum/location'
import sceneApi from '@/api/fysp/sceneApi'

const props = defineProps({
  //场景基本信息
  formInfo: Object,
  //是创建或者更新场景
  create: Boolean,
});
  create: Boolean
})

const emit = defineEmits(['onSubmit', 'onCancel']);
const emit = defineEmits(['onSubmit', 'onCancel'])

const { formObj, formRef, edit, onSubmit, onReset } = useFormConfirm({
  submit: {
    do: submit,
  },
  cancel: {
    do: cancel,
  },
});
const loading = ref(false);
const sceneTypes = reactive(enumScene_2NA());
const locations = reactive(enumLocationNA());
const _formInfo = ref({});
const sceneTypes = reactive(enumScene(2, false));
const locations = reactive(enumLocation(false));
const cascaderProps = reactive({
  checkStrictly: true,
});
  checkStrictly: true
})
const rules = reactive({
  name: [
    {
      required: true,
      message: '场景名称不能为空',
      trigger: 'blur',
    },
      trigger: 'blur'
    }
  ],
  _typeObj: [
    {
      required: true,
      message: '场景类型不能为空',
      trigger: 'change',
    },
      trigger: 'change'
    }
  ],
  _locations: [
    {
      required: true,
      message: '行政区划不能为空',
      trigger: 'change',
    },
      trigger: 'change'
    }
  ],
  longitude: [
    {
      required: true,
      message: '经度不能为空',
      trigger: 'blur',
    },
      trigger: 'blur'
    }
  ],
  latitude: [
    {
      required: true,
      message: '纬度不能为空',
      trigger: 'blur',
    },
  ],
});
      trigger: 'blur'
    }
  ]
})

// 场景基本信息格式化
/**
 * 场景基本信息格式化
 * 对场景类型、场景行政区划和场景可用状态进行格式化
 * @param {*} s 场景信息
 */
function parseSceneBaseInfo(s) {
  s._typeObj = {
    label: s.type,
    value: s.typeid + '',
  };
    value: s.typeid + ''
  }

  s._locations = [];
  s._locations = []
  if (s.provincecode && s.provincecode.length > 0)
    s._locations.push([s.provincecode, s.provincename]);
  if (s.citycode && s.citycode.length > 0)
    s._locations.push([s.citycode, s.cityname]);
    s._locations.push([s.provincecode, s.provincename])
  if (s.citycode && s.citycode.length > 0) s._locations.push([s.citycode, s.cityname])
  if (s.districtcode && s.districtcode.length > 0)
    s._locations.push([s.districtcode, s.districtname]);
  if (s.towncode && s.towncode.length > 0)
    s._locations.push([s.towncode, s.townname]);
    s._locations.push([s.districtcode, s.districtname])
  if (s.towncode && s.towncode.length > 0) s._locations.push([s.towncode, s.townname])

  s.online = s.extension1 != '0';
  s.online = s.extension1 != '0'

  return s;
  return s
}
// 创建新场景
function createScene() {
  loading.value = true;
function createScene(formObj, func) {
  return sceneApi
    .createScene(formObj.value)
    .then((res) => {
      console.log(res);
    .then(() => {
      emit('onSubmit', formObj)
    })
    .finally(() => {
      loading.value = false;
    });
      func()
    })
}
// 更新场景
function updateScene() {
  loading.value = true;
function updateScene(formObj, func) {
  return sceneApi
    .updateScene(formObj.value)
    .then((res) => {
      console.log(res);
    .then(() => {
      emit('onSubmit', formObj)
    })
    .finally(() => {
      loading.value = false;
    });
      func()
    })
}
function submit() {
function submit(formObj, func) {
  // 行政区划信息填充
  const a = formObj.value._locations;
  const a = formObj.value._locations
  if (a[0]) {
    formObj.value.provincecode = a[0][0];
    formObj.value.provincename = a[0][1];
    formObj.value.provincecode = a[0][0]
    formObj.value.provincename = a[0][1]
  }
  if (a[1]) {
    formObj.value.citycode = a[1][0];
    formObj.value.cityname = a[1][1];
    formObj.value.citycode = a[1][0]
    formObj.value.cityname = a[1][1]
  }
  if (a[2]) {
    formObj.value.districtcode = a[2][0];
    formObj.value.districtname = a[2][1];
    formObj.value.districtcode = a[2][0]
    formObj.value.districtname = a[2][1]
  }
  if (a[3]) {
    formObj.value.towncode = a[3][0];
    formObj.value.townname = a[3][1];
    formObj.value.towncode = a[3][0]
    formObj.value.townname = a[3][1]
  }

  // 场景类型信息填充
  const b = formObj.value._typeObj;
  formObj.value.typeid = b.value;
  formObj.value.type = b.label;
  const b = formObj.value._typeObj
  formObj.value.typeid = b.value
  formObj.value.type = b.label

  // 是否在线信息填充
  formObj.value.online
    ? (formObj.value.extension1 = '1')
    : (formObj.value.extension1 = '0');
  formObj.value.online ? (formObj.value.extension1 = '1') : (formObj.value.extension1 = '0')

  formObj.value.updatedate = new Date().toISOString();
  formObj.value.updatedate = new Date().toISOString()

  emit('onSubmit', formObj);
  emit('onSubmit', formObj)

  return props.create ? createScene() : updateScene();
  return props.create ? createScene(formObj, func) : updateScene(formObj, func)
}
function cancel() {
  emit('onCancel');
  emit('onCancel')
}

// 监听传入的场景基本信息，做相应的数据格式化
watch(
  () => props.formInfo,
  (nValue) => {
    formObj.value = parseSceneBaseInfo(nValue);
    _formInfo.value = parseSceneBaseInfo(nValue)
  }
);
)
</script>

<style scoped></style>