factory_web/src/views/ofm/borrowfile_form.vue

<template>
  <el-container>
    <el-main>
        <el-form
            :model="addForm"
            :rules="rules"
            ref="addForm"
            label-width="100px"
            label-position="left"
            > 
            <el-form-item label="档案名称">
                <el-select v-model="addForm.borrow_file" multiple placeholder="请选择档案" clearable style="width: 300px;">
                    <el-option
                        v-for="item in fileList"
                        :key="item.id"
                        :value="item.id"
                        :disabled="localMode ==='view'"
                        :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请人电话" prop="contacts">
                <el-input v-model="addForm.contacts" clearable style="width: 300px;" :disabled="localMode ==='view'"></el-input>
            </el-form-item>
            <el-form-item label="借阅时间" prop="borrow_date">
                <el-date-picker
                v-model="addForm.borrow_date"
                type="date"
                placeholder="选择日期时间"
                align="right"
                value-format="YYYY-MM-DD"
                :disabled="localMode ==='view'"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="归还时间" prop="return_date" v-if="addForm.ticket_?.state_?.name=='档案管理员审批'">
                <el-date-picker
                v-model="addForm.return_date"
                type="date"
                placeholder="选择日期时间"
                align="right"
                value-format="YYYY-MM-DD"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="用途" prop="remark" :disabled="localMode ==='view'">
                <el-checkbox-group v-model="addForm.remark">
                <el-checkbox label="借阅"></el-checkbox>
                <el-checkbox label="复印"></el-checkbox>
                <el-checkbox label="查阅"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

        </el-form>
        <el-footer v-show="mode!=='show'">
          <ticketd_b_start
            :workflow_key="'borrowrecord'"
            :title="ticketTitle"
            :t_id="addForm.id"
            :ticket_="addForm.ticket_"
            :ticket_data="ticket_data"
            :submit_b_func="submit"
            ref="ticketd_b_start"
            @success="$emit('success')"
          />
    </el-footer>
    </el-main>
        <el-aside v-if="addForm.ticket_">
            <ticketd
            :ticket_="addForm.ticket_"
            :ticket_data="ticket_data"
            @success="$emit('success')"
            style="margin-top: 20px;"
            />
        </el-aside>
  </el-container>

</template>
<script>

import ticketd_b_start from "@/views/wf/ticketd_b_start.vue";
import ticketd from "@/views/wf/ticketd.vue";

export default {
  name: "index",
  props: {
      mode: {
          type: String, default: "view" 
      },
      modelValue: { type: Object, default: () => ({}) },
      t_id: {
            type: String,
            default: null
        },
    },
    
  components: {
      ticketd, ticketd_b_start
  },
  data() {
    return {
      ticketTitle: "档案借阅",
      addForm: { 
        ticket_: {
              state_: { type: '' }
                },
        borrow_file: [],
        ...this.modelValue },
      localMode : this.mode,
      query: {},
      fileList: [],
      ticket_data: {},
      rules: {
        file_name: [
          { required: true, message: "请选择档案", trigger: "blur" },
        ],
      },
    };
  },
  mounted(){
    this.getFileList().then(() => {
      console.log('fileList:', this.fileList)
      console.log('addForm.borrow_file:', this.addForm.borrow_file)
    });
    if (this.addForm.ticket_?.state_.type===1){
        this.localMode = 'edit'
      };
      this.getTid();
  },
  watch: {
    addForm: {
      handler(val){
        Object.assign(this.ticket_data,{
          return_date: val.return_date,
        })
      },
      deep: true,
    }
  },
  methods: {
    async submit() {
      let that = this;
      let res = null;

    if (that.localMode === "add") {
        res = await that.$API.ofm.borrow.create.req(that.addForm);
        that.addForm.id = res.id;
    } else if (that.localMode === "edit") {
        res = await that.$API.ofm.borrow.update.req(
        that.addForm.id,
        that.addForm
        );
    }
        },
     getFileList() {
      return this.$API.ofm.filerecord.list.req(this.query).then((res) => {
        this.fileList = res.results;
        console.log('----111---',this.fileList);
      });
    },
    getTid (){
			var that = this;
		    if (that.t_id) {
				that.$API.ofm.borrow.item.req(that.t_id).then(res=>{
          that.form = res;
					if(res.ticket_.state_.type == 1 && res.create_by == that.$TOOL.data.get("USER_INFO").id ) {
						that.localMode = "edit";
					}else{
						that.localMode = "show";
					}
        })
			}
		},
  },

};
</script>
<style scoped>
.treeMain {
  height: 280px;
  overflow: auto;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  background-color: #fefefe;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background-color: #f5f5f5;
}
.node rect {
  stroke: #606266;
  fill: #fff;
}

.edgePath path {
  stroke: #606266;
  fill: #333;
  stroke-width: 1.5px;
}

g.conditions > rect {
  fill: #00ffd0;
  stroke: #000;
}

.el-icon-close {
  cursor: pointer;
}

.left-panel-group {
  display: flex;
  align-items: center;
  gap: 6px;        /* 按钮之间的间隙，可以调小点 */
  margin-left: 0;  /* 靠左 */
}
</style>