factory_mp/pages/hrm/empjoin_form.vue

<!-- 人员交接 -->
<template>
  <view class="container">
	<scroll-view scroll-y style="padding-bottom: 180rpx;background-color: #fff;">
		<uni-forms v-model="form" label-width="190rpx"  ref="customForm" :rules="customRules">
		<ticketd :ticket_="form.ticket_"></ticketd>
		<uni-forms-item label="需求部门" required name="dept_need">
			<uni-data-picker
				v-model="form.dept_need"
				:localdata="group"
				:disabled="mode === 'show'"
				:map="{ text: 'label', value: 'value', children: 'children' }"
				:show-all-levels="false"
				clearable
				placeholder="请选择部门"
			/>
		</uni-forms-item>

		<!-- 日期 -->
		<uni-forms-item label="日期" required name="join_date">
			<uni-datetime-picker
			type="date"
			:clear-icon="false"
			v-model="form.join_date"
			/>
		</uni-forms-item>
		</uni-forms>
	</scroll-view>
    <!-- 人员列表 -->
    <view class="person-list">
      <view
        class="person-card"
        v-for="(item, index) in form.person"
        :key="index"
      >
        <uni-forms :modelValue="item">
          <uni-forms-item label="姓名" required>
            <uni-easyinput v-model="item.name" placeholder="请输入姓名" />
          </uni-forms-item>

          <uni-forms-item label="性别" required>
            <uni-data-select
              v-model="item.gender"
              :localdata="genderList"
              placeholder="请选择"
            />
          </uni-forms-item>

          <uni-forms-item label="身份证号" required label-width="190rpx">
            <uni-easyinput v-model="item.IDcard" />
          </uni-forms-item>

          <uni-forms-item label="手机号" required>
            <uni-easyinput v-model="item.phone" />
          </uni-forms-item>

          <uni-forms-item label="备注">
            <uni-easyinput v-model="item.note" />
          </uni-forms-item>

          <!-- 岗位（条件显示） -->
          <uni-forms-item
            v-if="showPost"
            label="岗位"
            required
          >
            <uni-data-select
              v-model="item.post"
              :localdata="postList"
              placeholder="请选择岗位"
            />
          </uni-forms-item>

          <!-- 删除 -->
          <button
            v-if="mode !== 'show'"
            class="del-btn"
            @click="removePerson(index)"
          >
            删除
          </button>

        </uni-forms>
      </view>
    </view>

    <!-- 新增人员 -->
    <button
      v-if="mode !== 'show'"
      type="primary"
	  style="margin-bottom: 20rpx"
      @click="addPerson"
    >
      新增人员
    </button>

    <!-- 底部操作 -->
    <view class="footer_fixed">
      <button v-if="mode=='edit'" size="mini" @click="handleDel" :loading="saveLoading" :disabled="saveLoading" type="warn">
				删除
		</button>
		<button v-if="mode!='show'" size="mini" @click="handleSave" :loading="saveLoading" :disabled="saveLoading" type="primary">
			提交审批
		</button>
		<ticketd_b :workflow_key="'wf_empjoin'" v-if="form.ticket_ && mode == 'show'" :t_id="form.id" :ticket_="form.ticket_" 
		:ticket_data="ticket_data" @success="()=>{uni.navigateBack()}" ref="ticketd_b"></ticketd_b>
    </view>
  </view>
</template>
<script>

import { genTree } from "@/utils/verificate";
import ticketd_b from "../wf/ticketd_b.vue"
import ticketd from "../wf/ticketd.vue"
export default {
	components: { ticketd_b, ticketd },
  data() {
    return {
      mode: 'show',
	  t_id: null,
	  saveLoading: false,
	  ticket_data:{},
      form: {
        dept_need: '',
        join_date: '',
        person: [],
      },
      group: [],
      postList: [],
	  ticket_data:{},
      genderList: [
        { text: '男', value: 1 },
        { text: '女', value: 2 }
      ]
    }
  },
  computed: {
    showPost() {
      const stateName = this.form?.ticket_?.state_?.name
	  return ['交接部门负责人', '结束'].includes(stateName)
    }
  },
  watch: {
        'form.person'(val){
            this.ticket_data.person = val
  		},
  },
  async onLoad(options) {
	let that = this;
	that.mode = options.mode?options.mode:'show';
	that.t_id = options.t_id?options.t_id:null;
	if(that.t_id) {
			const res = await that.$api.empjoinItem(that.t_id);
			this.form = res
			if(that.form.ticket_.state_.type == 1 && that.form.create_by == uni.getStorageSync("userInfo").id ) {
				that.mode = "edit";
			}else{
				that.mode = "show";
			}
		}
	this.getGroup();
	this.getPost();
	},

  methods: {
    addPerson() {
      this.form.person.push({
        name: '',
        gender: '',
        IDcard: '',
        phone: '',
        note: '',
        post: ''
      })
    },
    removePerson(index) {
      this.form.person.splice(index, 1)
    },
    async getGroup() {
      const res = await this.$api.deptList({ page: 0 })
      this.group = genTree(res);
    },
	async getPost(){
		const res = await this.$api.postList({ page: 0 })
		this.postList = res.map(item =>({
			text: item.name,
			value: item.id
		}))
		
	},
    async handleSave() {
      await this.$api.empjoinCreate(this.form)
      uni.showToast({ title: '提交成功' })
      uni.navigateBack()
    },
	async handleDel(){
		let that = this;
		await that.$api.empjoinDelete(that.form.id)
		uni.navigateBack()
	},
  }
}

</script>

<style scoped>
	.uni-data-checklist .checklist-group .checklist-box{
		margin: 10px 0!important;
	}
	.flex_file_picker>.uni-file-picker__files{
		flex-direction: row;
	}
	.flex_file_picker{
		width: 90px;
		flex: none;
	}
	.del-btn {
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
	}
</style>