jiace-web/src/views/home/info.vue

<template>
  <div class="info_page">
    <div class="box">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        style="width:514px"
      >
        <el-form-item label="企业全称">
          <el-input v-model="form.companyName"></el-input>
        </el-form-item>
        <el-form-item label="企业行业">
          <el-input v-model="form.companyType"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="用户职位">
          <el-input v-model="form.note"></el-input>
        </el-form-item>
        <el-form-item label="企业地址" required>
          <el-col :span="10">
            <el-form-item prop="addressType">
              <el-select
                v-model="form.addressType"
                placeholder="请选择"
                @change="handleCity"
              >
                <el-option
                  v-for="item in optionList1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="10">
            <el-form-item prop="cityId">
              <el-select v-model="form.cityId" placeholder="请选择">
                <el-option
                  v-for="item in optionList2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="企业画像" prop="labelIdList">
          <el-button size="small" @click="open">设置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form-item>
      </el-form>
      <div class="box_r">
        <el-image
          style="width: 100px; height: 100px;border-radius:50%"
          :src="avatar"
          :preview-src-list="[avatar]"
        >
        </el-image>
        <singleUpload v-model="url" text="修改头像" />
      </div>
    </div>
    <el-dialog title="企业画像设置" :visible.sync="dialogVisible" width="20%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item
          :label="item.name"
          v-for="(item, index) in labelList"
          :key="item.id"
        >
          <el-select
            v-model="arr[index]"
            multiple
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="i in item.labelList"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setIds">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import store from '@/store';
import { uploadAvatar } from '@/api/user';
import {
  getDictListByStatus,
  updateCompanyUser,
  getLabelSetting,
  userInfo
} from '@/api/home/info';
import singleUpload from '@/components/Upload/singleUpload';
export default {
  components: { singleUpload },
  computed: {
    ...mapGetters(['avatar'])
  },
  data() {
    return {
      url: '',
      form: {
        companyName: '',
        companyType: '',
        nickName: '',
        note: '',
        addressType: '',
        cityId: '',
        address: '',
        labelIdList: ''
      },
      optionList1: [
        {
          value: 2,
          label: '地级市'
        },
        {
          value: 3,
          label: '合肥区县'
        }
      ],
      optionList2: [],
      dialogVisible: false,
      labelList: [],
      arr: [],
      rules: {
        addressType: [{ required: true, message: '请选择', trigger: 'change' }],
        cityId: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    };
  },
  watch: {
    url() {
      uploadAvatar({ icon: this.url }).then(res => {
        store.commit('SET_AVATAR', this.url);
      });
    }
  },
  methods: {
    getUserInfo() {
      userInfo().then(({ data }) => {
        if (data) {
          data.addressType = data.addressType - 0;
          if (data.addressType == 2) {
            this.getType(true, data);
          } else {
            this.getCity(true, data);
          }
        }
        // data.companyId || 1;
        getLabelSetting({ companyId: data ? data.companyId : 1 }).then(
          ({ data }) => {
            this.labelList = data;
            // 单选
            // this.arr = data.map(item =>
            //   item.labelList
            //     ? item.labelList.filter(v => v.isHas)[0]
            //       ? item.labelList.filter(v => v.isHas)[0].id
            //       : ''
            //     : undefined
            // );
            // 多选
            this.arr = data.map(item => {
              return item.labelList
                ? item.labelList
                    .map(v => {
                      if (v.isHas) {
                        return v.id;
                      }
                    })
                    .filter(i => i)
                : undefined;
            });
          }
        );
      });
    },
    // 地级市切换
    handleCity(e) {
      this.form.cityId = '';
      // 地级市
      if (e === 2) {
        this.getType(false);
      } else {
        this.getCity(false);
      }
    },
    // 获取地级市
    getType(edit, info) {
      getDictListByStatus({ type: 5 }).then(({ data }) => {
        this.optionList2 = data;
        console.log(info);
        if (edit) this.form = info;
      });
    },
    // 获取区县
    getCity(edit, info) {
      getDictListByStatus({ type: 6 }).then(({ data }) => {
        this.optionList2 = data;
        if (edit) this.form = info;
      });
    },
    open() {
      this.dialogVisible = true;
    },
    setIds() {
      this.form.labelIdList = this.arr.filter(item => item);
      this.dialogVisible = false;
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let ids = [];
          this.arr.map(item => {
            ids = [...ids, ...item];
          });
          this.form.labelIdList = ids;
          updateCompanyUser(this.form).then(({ message }) => {
            this.msgSuccess(message);
            this.getUserInfo();
          });
        }
      });
    }
  },
  created() {
    this.getUserInfo();
  }
};
</script>
<style lang="scss" scoped>
.info_page {
  .box {
    display: flex;
    .box_r {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .el-image {
        margin-bottom: 30px;
      }
      /deep/.el-upload-list {
        display: none;
      }
    }
  }
  /deep/.el-form-item__label {
    font-size: 16px;
  }
}
</style>