增加用户信息表的数据展示

zmc

2023-12-18 51b20c8b1322bb8dab7059823ffc4c2fd3272237

增加用户信息表的数据展示

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

@@ -1,28 +1,13 @@
<!-- åœºæ™¯åŸºæœ¬ä¿¡æ¯ç¼–辑 -->
<template>
  <FYForm
    :form-info="_formInfo"
    :rules="rules"
    @submit="submit"
    @cancel="cancel"
  >
  <FYForm :form-info="_formInfo" :rules="rules" @submit="submit" @cancel="cancel">
    <template #form-item="{ formObj }">
      <el-form-item label="场景名称" prop="name">
        <el-input
          clearable
          show-word-limit
          v-model="formObj.name"
          placeholder="场景名称"
        />
        <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-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">
@@ -35,12 +20,7 @@
        />
      </el-form-item>
      <el-form-item label="地址" prop="location">
        <el-input
          show-word-limit
          clearable
          v-model="formObj.location"
          placeholder="地址"
        />
        <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="经度" /> -->
@@ -61,12 +41,7 @@
        />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts">
        <el-input
          show-word-limit
          clearable
          v-model="formObj.contacts"
          placeholder="联系人"
        />
        <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="联系电话">
@@ -79,9 +54,7 @@
      </el-form-item>
      <el-form-item label="状态" prop="online">
        <el-switch v-model="formObj.online" />
        <span style="margin-left: 16px">{{
          formObj.online ? '在线' : '下线'
        }}</span>
        <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" />
@@ -91,63 +64,63 @@
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { enumScene } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import sceneApi from '@/api/fysp/sceneApi';
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 _formInfo = ref();
const sceneTypes = reactive(enumScene(2, false));
const locations = reactive(enumLocation(false));
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'
    }
  ]
})

/**
 * åœºæ™¯åŸºæœ¬ä¿¡æ¯æ ¼å¼åŒ–
@@ -157,92 +130,88 @@
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(formObj, func) {
  return sceneApi
    .createScene(formObj.value)
    .then(() => {
      emit('onSubmit', formObj);
      emit('onSubmit', formObj)
    })
    .finally(() => {
      func();
    });
      func()
    })
}
// æ›´æ–°åœºæ™¯
function updateScene(formObj, func) {
  return sceneApi
    .updateScene(formObj.value)
    .then(() => {
      emit('onSubmit', formObj);
      emit('onSubmit', formObj)
    })
    .finally(() => {
      func();
    });
      func()
    })
}
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(formObj, func) : updateScene(formObj, func);
  return props.create ? createScene(formObj, func) : updateScene(formObj, func)
}
function cancel() {
  emit('onCancel');
  emit('onCancel')
}

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

<style scoped></style>

 src/views/fytz/user/UserEdit.vue

@@ -15,6 +15,7 @@
      <div class="sub-title">用户信息表</div>
      <FormCol>
        <!-- <CompUserInfos :form-info="formUserInfos" /> -->
        <CompBaseInfo :form-info="formUserInfos"/>
      </FormCol>
      <el-divider />
      <div class="sub-title">企业信息</div>
@@ -99,6 +100,7 @@
import userApi from '@/api/fytz/userApi';
// import ComBaseInformation from '@/views/baseinfo/fytz/scene/ComBaseInformation.vue';
import CompUserInfo from './components/CompUserInfo.vue';
import CompBaseInfo from './components/CompBaseInfo.vue';
// import CompLaint from '@/views/baseinfo/fytz/scene/CompLaint.vue';
// import CompDeviceInfo from "@/views/baseinfo/fytz/scene/CompDeviceInfo.vue";
// import CompPanyInfo from '@/views/baseinfo/fytz/scene/CompPanyInfo.vue';
@@ -116,6 +118,7 @@
    // ComBaseInformation,
    // CompLaint,
    CompUserInfo,
    CompBaseInfo,
    // CompDeviceInfo,
    // CompPanyInfo,
    // CompFumePurifyDevice,
@@ -157,6 +160,9 @@
            guid: to.params.userId,
          };
        }
        if(res.baseInfo){
          vm.formUserInfos = res.baseInfo
        }
      });
    });
  },

 src/views/fytz/user/components/CompBaseInfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,188 @@
<template>
  <FYForm
    :form-info="_formInfo"
    :rules="rules"
    :reset="active"
    v-model:is-edit="_edit"
    @submit="submit"
    @cancel="cancel"
  >
    <template #form-item="{ formObj }">
      <el-form-item label="昵称" prop="biNickName">
        <el-input clearable v-model="formObj.biNickName" placeholder="昵称" />
      </el-form-item>
      <el-form-item label="所属企业" prop="ciName">
        <el-input clearable v-model="formObj.ciName" placeholder="所属企业" />
      </el-form-item>
      <el-form-item label="运维商">
        <el-input clearable v-model="formObj.biManagementCompany" placeholder="运维商" />
      </el-form-item>

      <el-form-item label="场景名称" prop="biName">
        <el-input clearable v-model="formObj.biName" placeholder="场景名称" />
      </el-form-item>

      <FYOptionLocation
        :allOption="false"
        :level="4"
        :initValue="false"
        v-model:value="formObj._locations"
      ></FYOptionLocation>

      <el-form-item label="地址" prop="biAddress">
        <el-input clearable v-model="formObj.biAddress" placeholder="地址" />
      </el-form-item>

      <el-form-item label="联系人">
        <el-input clearable v-model="formObj.biContact" placeholder="联系人" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input clearable v-model="formObj.biTelephone" placeholder="联系电话" />
      </el-form-item>
    </template>
  </FYForm>
</template>

<script>
import userApi from '@/api/fytz/userApi.js'
export default {
  props: {
    //基本信息
    formInfo: Object,
    isEdit: Boolean,
    create: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      _formInfo: null,
      _edit: false,
      locations: false,
      locationsProps: {
        checkStrictly: true
      },
      rules: {
        biNickName: [
          {
            required: true,
            message: '用户昵称不能为空',
            trigger: 'blur'
          }
        ],
        ciName: [
          {
            required: true,
            message: '企业名不能为空',
            trigger: 'blur'
          }
        ],

        biName: [
          {
            required: true,
            message: '场景类型不能为空',
            trigger: 'blur'
          }
        ],
        biAddress: [
          {
            required: true,
            message: '地址不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    formInfo(nValue) {
      console.log('value', nValue)
      this._formInfo = this.parseUserInfo(nValue)
      console.log('执行了')
    },
    _edit(nValue) {
      this.$emit('update:isEdit', nValue)
    }
  },
  mounted() {},
  methods: {
    // ç”¨æˆ·åŸºæœ¬ä¿¡æ¯æ ¼å¼åŒ–
    parseUserInfo(s) {
      const r = {}
      s._locations = {
        pCode: s.biProvinceCode,
        pName: s.biProvinceName,
        cCode: s.biCityCode,
        cName: s.biCityName,
        dCode: s.biDistrictCode,
        dName: s.biDistrictName,
        tCode: s.biTownCode,
        tName: s.biTownName
      }
      return s
    },
    // åˆ›å»ºæ–°åœºæ™¯
    createBaseInfo(formObj, func) {
      return userApi
        .createUser(formObj)
        .then(() => {
          this.$emit('onSubmit', formObj)
        })
        .finally(() => {
          func()
        })
    },
    // æ›´æ–°åœºæ™¯
    updateBaseInfo(formObj, func) {
      return userApi
        .updateUserInfo(formObj)
        .then(() => {
          this.$emit('onSubmit', formObj)
        })
        .finally(() => {
          func()
        })
    },
    submit(formObj, func) {
      // è¡Œæ”¿åŒºåˆ’信息填充
      const a = formObj.value._locations
      if ('pCode' in a) {
        formObj.value.biProvinceCode = a.pCode
      }
      if ('pName' in a) {
        formObj.value.biProvinceName = a.pName
      }
      if ('cCode' in a) {
        formObj.value.biCityCode = a.cCode
      }
      if ('cName' in a) {
        formObj.value.biCityName = a.cName
      }
      if ('dCode' in a) {
        formObj.value.biDistrictCode = a.dCode
      }
      if ('dName' in a) {
        formObj.value.biDistrictName = a.dName
      }
      if ('tCode' in a) {
        formObj.value.biTownCode = a.tCode
      }
      if ('tName' in a) {
        formObj.value.biTownName = a.tName
      }

      return this.create ? this.createBaseInfo(formObj, func) : this.updateBaseInfo(formObj, func)
    },
    cancel() {
      this.$emit('onCancel')
    }
  }
}
</script>