store-pc/src/views/goldTriangle/Form.vue

<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="visible"
    width="720px"
    :close-on-click-modal="false"
    class="gold-triangle-form-dialog"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="basicForm" :model="dataForm" size="small" label-width="90px" :rules="rules" :disabled="!!isDetail">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="月份" prop="yf">
            <el-date-picker
              v-model="monthValue"
              type="month"
              placeholder="请选择月份"
              format="yyyy年MM月"
              value-format="yyyyMM"
              style="width: 100%"
              @change="onMonthChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门店">
            <el-input :value="currentStoreName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="金三角" prop="jsj">
            <el-input v-model="dataForm.jsj" placeholder="请输入金三角名称" clearable maxlength="50" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="member-section" v-if="!isDetail || members.length">
      <div class="section-title">
        <span>{{ isDetail ? '成员信息' : '成员管理' }}</span>
        <div class="member-actions" v-if="!isDetail">
          <el-button type="primary" icon="el-icon-plus" @click="addMember" size="small">添加成员</el-button>
          <el-button type="warning" icon="el-icon-refresh" @click="refreshMembers" size="small">刷新</el-button>
          <span class="member-count">共 {{ members.length }} 人</span>
        </div>
        <span class="member-count" v-else>共 {{ members.length }} 人</span>
      </div>
      <el-table :data="members" border size="small" style="width: 100%; margin-top: 10px;">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="userName" label="姓名" min-width="100">
          <template slot-scope="scope">
            <el-input v-if="!isDetail" v-model="scope.row.userName" size="small" placeholder="姓名" />
            <span v-else>{{ scope.row.userName || '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户" min-width="160">
          <template slot-scope="scope">
            <el-select
              v-if="!isDetail"
              v-model="scope.row.userId"
              placeholder="选择用户"
              size="small"
              filterable
              style="width: 100%"
              @change="onUserChange(scope.$index, $event)"
            >
              <el-option v-for="u in availableUsers" :key="u.id" :label="u.name" :value="u.id" />
            </el-select>
            <span v-else>{{ scope.row.userName || scope.row.userId || '无' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否顾问" width="100" align="center">
          <template slot-scope="scope">
            <el-radio-group v-if="!isDetail" v-model="scope.row.isLeader" size="small">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <el-tag v-else :type="scope.row.isLeader === 1 ? 'success' : 'info'" size="small">
              {{ scope.row.isLeader === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="80" align="center">
          <template slot-scope="scope">
            <el-input-number v-if="!isDetail" v-model="scope.row.sortOrder" :min="1" :max="999" size="small" style="width: 100%" />
            <span v-else>{{ scope.row.sortOrder }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80" align="center" v-if="!isDetail && dataForm.id">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.relationId"
              type="danger"
              icon="el-icon-delete"
              size="mini"
              plain
              @click="removeMemberRow(scope.row, scope.$index)"
            >删除</el-button>
            <el-button v-else type="danger" icon="el-icon-delete" size="mini" plain @click="removeMember(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="submitting" @click="dataFormSubmit" v-if="!isDetail">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getStoreUserList } from '@/api/storeUser'
import {
  getJsjInfo,
  getJsjDetail,
  createJsj,
  updateJsj,
  addUserToJsj,
  deleteJsjUserRelation
} from '@/api/lqYcsdJsj'
import { mapPractitionerFromUser, syncTeamMembers } from '@/utils/goldTriangleHelper'
const jsjApi = { addUserToJsj, deleteJsjUserRelation }
export default {
  name: 'GoldTriangleForm',
  props: {
    currentStoreId: { type: String, default: '' },
    currentStoreName: { type: String, default: '' }
  },
  data() {
    return {
      visible: true,
      isDetail: false,
      submitting: false,
      dataForm: { id: '', yf: '', md: '', jsj: '' },
      originalMembers: [],
      members: [],
      availableUsers: [],
      monthValue: null,
      rules: {
        yf: [
          { required: true, message: '请选择月份', trigger: 'change' },
          { pattern: /^\d{6}$/, message: '月份格式为yyyyMM', trigger: 'blur' }
        ],
        jsj: [{ required: true, message: '请输入金三角名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
    dialogTitle() {
      if (this.isDetail) return '金三角详情'
      return this.dataForm.id ? '编辑金三角' : '新建金三角'
    }
  },
  methods: {
    init(id, isDetail) {
      this.dataForm.id = id || ''
      this.isDetail = !!isDetail
      this.members = []
      this.originalMembers = []
      this.dataForm.md = this.currentStoreId
      this.visible = true
      this.$nextTick(() => {
        this.$refs.basicForm && this.$refs.basicForm.resetFields()
        this.loadUsersByStore()
        if (this.dataForm.id) {
          this.loadData()
        } else {
          const now = new Date()
          this.monthValue = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}`
          this.dataForm.yf = this.monthValue
          this.dataForm.md = this.currentStoreId
        }
      })
    },
    loadData() {
      getJsjInfo(this.dataForm.id).then(res => {
        const d = res.data || res
        this.dataForm = { ...this.dataForm, ...d }
        this.monthValue = this.dataForm.yf
      })
      getJsjDetail(this.dataForm.id).then(res => {
        const d = res.data || res
        const list = (d.members || []).map((m, i) => ({
          relationId: m.id,
          userId: m.userId,
          userName: m.userName || '无',
          isLeader: Number(m.isLeader) === 1 ? 1 : 0,
          sortOrder: m.sortOrder || i + 1
        }))
        this.members = list
        this.originalMembers = list.map(m => ({ ...m }))
      })
    },
    loadUsersByStore() {
      if (!this.currentStoreId) {
        this.availableUsers = []
        return
      }
      getStoreUserList({
        mdid: this.currentStoreId,
        gw: '健康师',
        currentPage: 1,
        pageSize: 500
      }).then(res => {
        const list = res.data?.list || []
        this.availableUsers = list.map(mapPractitionerFromUser)
        if (!this.availableUsers.length && !this.dataForm.id) {
          this.$message.warning('当前门店暂无健康师，请先在系统中配置')
        }
      }).catch(() => {
        this.availableUsers = []
      })
    },
    onMonthChange(val) {
      this.dataForm.yf = val
    },
    onUserChange(index, userId) {
      const u = this.availableUsers.find(x => x.id === userId)
      if (u) this.$set(this.members[index], 'userName', u.name)
    },
    addMember() {
      if (!this.currentStoreId) {
        this.$message.warning('门店信息异常')
        return
      }
      if (!this.availableUsers.length) {
        this.$message.warning('暂无可用健康师')
        return
      }
      this.members.push({ userId: '', userName: '', isLeader: 0, sortOrder: this.members.length + 1 })
    },
    removeMember(index) {
      this.$confirm('确定删除该成员？', '提示', { type: 'warning' }).then(() => {
        this.members.splice(index, 1)
        this.members.forEach((m, i) => { m.sortOrder = i + 1 })
      }).catch(() => {})
    },
    async removeMemberRow(row, index) {
      try {
        await this.$confirm('确定删除该成员？', '提示', { type: 'warning' })
        if (row.relationId) {
          await deleteJsjUserRelation({ id: row.relationId })
        }
        this.members.splice(index, 1)
        this.members.forEach((m, i) => { m.sortOrder = i + 1 })
        this.originalMembers = this.members.map(m => ({ ...m }))
        this.$message.success('删除成功')
      } catch (e) {
        // cancel or error
      }
    },
    refreshMembers() {
      if (this.dataForm.id) this.loadData()
    },
    dataFormSubmit() {
      this.$refs.basicForm.validate(async valid => {
        if (!valid) return
        const validMembers = this.members.filter(m => m.userId)
        if (validMembers.length >= 2) {
          const hasLeader = validMembers.some(m => m.isLeader === 1)
          if (!hasLeader) {
            this.$message.error('两人及以上战队必须有一个顾问')
            return
          }
        }
        if (validMembers.length > 3) {
          this.$message.error('每个战队最多3人')
          return
        }
        const submitData = {
          ...this.dataForm,
          yf: this.monthValue || this.dataForm.yf,
          md: this.currentStoreId,
          members: validMembers.map((m, i) => ({
            userId: m.userId,
            userName: m.userName,
            isLeader: m.isLeader,
            sortOrder: m.sortOrder || i + 1
          }))
        }
        this.submitting = true
        try {
          if (this.dataForm.id) {
            await updateJsj(this.dataForm.id, submitData)
            await syncTeamMembers(this.dataForm.id, this.originalMembers, submitData.members, jsjApi)
            this.$message.success('保存成功')
          } else {
            await createJsj(submitData)
            this.$message.success('创建成功')
          }
          this.handleClose()
          this.$emit('refresh', true)
        } catch (e) {
          // request 拦截器已提示
        } finally {
          this.submitting = false
        }
      })
    },
    handleClose() {
      this.visible = false
      this.$emit('refresh')
    }
  }
}
</script>
<style lang="scss" scoped>
.member-section {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #334155;
}
.member-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.member-count {
  font-size: 12px;
  color: #64748b;
  background: #e2e8f0;
  padding: 4px 10px;
  border-radius: 6px;
}
::v-deep .gold-triangle-form-dialog .el-dialog__body {
  padding: 20px 24px;
}
</style>