|
|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <div class="rule-type">
|
|
|
+ <DialogCom
|
|
|
+ :title="id ? '安全责任书存档记录详情' : '新增安全责任书存档记录'"
|
|
|
+ :visible.sync="isShow"
|
|
|
+ @close="onHide"
|
|
|
+ width="800px"
|
|
|
+ >
|
|
|
+ <div class="page-body">
|
|
|
+ <el-form
|
|
|
+ :model="formData"
|
|
|
+ :rules="formDataRules"
|
|
|
+ size="small"
|
|
|
+ ref="form"
|
|
|
+ label-position="right"
|
|
|
+ label-width="180px"
|
|
|
+ label-prefix=":"
|
|
|
+ >
|
|
|
+ <el-form-item prop="orgName" label="签署人所在机构:" >
|
|
|
+ <el-input
|
|
|
+ :readonly="true"
|
|
|
+ v-model="formData.orgName"
|
|
|
+ :disabled="true"
|
|
|
+ ></el-input>
|
|
|
+ <!-- <tree-select
|
|
|
+ v-model="formData.orgId"
|
|
|
+ :options="deptOptions"
|
|
|
+ :show-count="true"
|
|
|
+ :normalizer="tenantIdnormalizer"
|
|
|
+ :props="{ checkStrictly: true, label: 'name' }"
|
|
|
+ placeholder="请选择签署人所在机构"
|
|
|
+ /> -->
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属年度" prop="year">
|
|
|
+ <el-date-picker
|
|
|
+ :disabled="true"
|
|
|
+ v-model="formData.year"
|
|
|
+ :clearable="timeClearable"
|
|
|
+ type="year"
|
|
|
+ placeholder="请选择责任书所属年度"
|
|
|
+ value-format="yyyy"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="type" label="签署责任书类型:">
|
|
|
+ <el-select
|
|
|
+ :disabled="true"
|
|
|
+ v-model="formData.type"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="请选择签署责任书类型"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in dict.type.safety_book_type"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="`${dict.value}`"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-button @click="openSelect" v-if="false">上传签署文件</el-button>
|
|
|
+
|
|
|
+ <el-table :data="tableData" style="width: 100%;margin-top: 10px;" height="500px">
|
|
|
+ <el-table-column prop="names" label="签署人">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <template v-for="item in scope.row.names">
|
|
|
+ {{ item }}
|
|
|
+ <br />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="time" label="签署时间">
|
|
|
+ <template slot-scope="r">
|
|
|
+ {{
|
|
|
+ r.row.time
|
|
|
+ ? dayjs(r.row.time).format("YYYY年-MM月-DD日")
|
|
|
+ : ""
|
|
|
+ }}
|
|
|
+ </template> </el-table-column>
|
|
|
+ <el-table-column prop="files" label="签署文件">
|
|
|
+ <template slot-scope="r">
|
|
|
+ <el-image
|
|
|
+ style="width: 50px; height: 50px"
|
|
|
+ :src="r.row.files"
|
|
|
+ :preview-src-list="[r.row.files]"
|
|
|
+ ></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="names" label="操作" v-if="false">
|
|
|
+ <template v-slot="{ row }">
|
|
|
+ <el-button type="text" @click="removeRow(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer" style="margin-top: 10px;">
|
|
|
+ <el-button @click="isShow = false">确定</el-button>
|
|
|
+ <!-- <el-button type="primary" @click="onSubmit">确定</el-button> -->
|
|
|
+ </div>
|
|
|
+ </DialogCom>
|
|
|
+ <DialogSelect ref="DialogSelect" @success="getSign"></DialogSelect>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import { mapState, mapMutations } from "vuex";
|
|
|
+ import {
|
|
|
+ listSafetyBook,
|
|
|
+ getSafetyBook,
|
|
|
+ editOrAdd,
|
|
|
+ delSafetyBook,
|
|
|
+ } from "@/api/safetyBook/index";
|
|
|
+ import { deptTreeSelect } from "@/api/system/public";
|
|
|
+ import DialogSelect from "./dialog.sign";
|
|
|
+ import dayjs from "dayjs";
|
|
|
+ export default {
|
|
|
+ dicts: ["safety_book_type"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: null,
|
|
|
+ isShow: false,
|
|
|
+ timeClearable: true,
|
|
|
+ formData: this.reset(),
|
|
|
+ tableData: [],
|
|
|
+ //修改新增中的机构树
|
|
|
+ deptOptions: [],
|
|
|
+ formDataRules: {
|
|
|
+ orgId: [{ required: true, message: "请选择签署责任人所在机构" }],
|
|
|
+ type: [{ required: true, message: "请选择签署责任书类型" }],
|
|
|
+ year: [{ required: true, message: "请选择所属年度" }],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {},
|
|
|
+ computed: {
|
|
|
+ ...mapState([]),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations([]),
|
|
|
+ dayjs,
|
|
|
+ //添加签署后回调
|
|
|
+ getSign(data) {
|
|
|
+ this.tableData.push(data);
|
|
|
+ // console.log(data, "ddd");
|
|
|
+ },
|
|
|
+ //新增签署
|
|
|
+ openSelect() {
|
|
|
+ this.$refs.DialogSelect.show();
|
|
|
+ },
|
|
|
+ /** 查询机构树数据 */
|
|
|
+ getDeptTree() {
|
|
|
+ deptTreeSelect().then((response) => {
|
|
|
+ this.deptOptions = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** treeSelect组件自定义数据*/
|
|
|
+ tenantIdnormalizer(node, instanceId) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.id,
|
|
|
+ label: node.shortName,
|
|
|
+ children: node.children,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ removeRow(row) {
|
|
|
+ this.tableData = this.tableData.filter((item) => item !== row);
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ return {
|
|
|
+ id: null,
|
|
|
+ type: null,
|
|
|
+ year:null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async refresh(id) {
|
|
|
+ if(id!=null&&id!=undefined){
|
|
|
+ await getSafetyBook(id).then((res) => {
|
|
|
+ // console.log(res.data,"res")
|
|
|
+ this.formData=res.data;
|
|
|
+ this.tableData=res.data.bookUsers;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async show(id) {
|
|
|
+ // console.log(id, "id");
|
|
|
+ this.getDeptTree();
|
|
|
+ this.formData=this.reset();
|
|
|
+ this.tableData=[];
|
|
|
+ this.id = id;
|
|
|
+ await this.refresh(id);
|
|
|
+ this.isShow = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 事件
|
|
|
+ onHide() {
|
|
|
+ this.formData = this.reset();
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ console.log(this.formData,"this.formData")
|
|
|
+ this.$refs.form.validate(async (isValidate) => {
|
|
|
+ if (!isValidate) return;
|
|
|
+ this.formData.bookUsers=this.tableData;
|
|
|
+ await editOrAdd(this.formData);
|
|
|
+ this.$emit("success");
|
|
|
+ this.isShow = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 事件
|
|
|
+ //apimark//
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ components: { DialogSelect },
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ .brand_info {
|
|
|
+ .el-form {
|
|
|
+ width: 600px;
|
|
|
+ padding-top: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
luojun