sz-kjsxy-web/src/views/student/components/SupplyDemandEdit.vue

<template>
  <el-dialog :visible.sync="visible" width="70%" title="编辑供需">
    <el-form :model="form" label-width="80px">
      <el-form-item label="供需类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">供应</el-radio>
          <el-radio :label="2">需求</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="form.title" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="详细描述">
        <el-input type="textarea" v-model="form.content" :rows="4" maxlength="200" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="行业标签">
        <el-input
          v-model="tagInput"
          placeholder="输入后回车键确认"
          @keyup.enter.native="addTag"
          @blur="addTag"
          style="margin-bottom: 8px;"
        />
        <div>
          <el-tag
            v-for="(tag, idx) in tagList"
            :key="tag + idx"
            closable
            @close="removeTag(idx)"
            style="margin-right: 8px;"
          >{{ tag }}</el-tag>
        </div>
        <div style="color: #999; font-size: 12px; margin-top: 4px;">
          建议添加相关行业标签，方便其他校友找到你
        </div>
      </el-form-item>
      <el-form-item label="联系方式" required>
        <div class="contact-type-group">
          <el-button
            :type="form.contactType === 'wechat' ? 'primary' : 'default'"
            @click="form.contactType = 'wechat'"
            icon="el-icon-chat-dot-round"
          >微信</el-button>
          <el-button
            :type="form.contactType === 'mobile' ? 'primary' : 'default'"
            @click="form.contactType = 'mobile'"
            icon="el-icon-phone"
          >电话</el-button>
          <el-button
            :type="form.contactType === 'email' ? 'primary' : 'default'"
            @click="form.contactType = 'email'"
            icon="el-icon-message"
          >邮箱</el-button>
        </div>
        <div style="margin-top: 12px;">
          <el-input
            v-if="form.contactType === 'wechat'"
            v-model="form.wechat"
            placeholder="请输入微信号"
          />
          <el-input
            v-if="form.contactType === 'mobile'"
            v-model="form.mobile"
            placeholder="请输入手机号"
          />
          <el-input
            v-if="form.contactType === 'email'"
            v-model="form.email"
            placeholder="请输入邮箱"
          />
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible', false)">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    detail: Object
  },
  data() {
    return {
      form: {
        contactType: 'mobile',
        mobile: '',
        wechat: '',
        email: ''
      },
      tagInput: '',
      tagList: []
    }
  },
  watch: {
    detail: {
      immediate: true,
      handler(val) {
        this.form = {
          ...val,
          contactType: val.wechat ? 'wechat' : val.email ? 'email' : 'mobile'
        }
        this.tagList = Array.isArray(val.tag)
          ? val.tag
          : (val.tag ? val.tag.split(',').filter(Boolean) : [])
      }
    }
  },
  methods: {
    addTag() {
      const val = this.tagInput && this.tagInput.trim()
      if (val && !this.tagList.includes(val)) {
        this.tagList.push(val)
      }
      this.tagInput = ''
    },
    removeTag(idx) {
      this.tagList.splice(idx, 1)
    },
    handleSave() {
      const data = {
        id: this.form.id,
        title: this.form.title,
        content: this.form.content,
        tag: this.tagList.join(','),
        wechat: this.form.wechat,
        mobile: this.form.mobile,
        email: this.form.email,
        type: this.form.type
      }
      if (this.form.contactType !== 'wechat') data.wechat = ''
      if (this.form.contactType !== 'mobile') data.mobile = ''
      if (this.form.contactType !== 'email') data.email = ''
      this.$emit('save', data)
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style scoped>
.contact-type-group {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
</style>