soc_web/src/views/system/dept/dialog.edit.vue

<template>
  <div class="rule-type">
    <DialogCom
      :title="id ? '编辑' : '新增'"
      :visible.sync="isShow"
      width="800px"
    >
      <div class="page-body">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item
                v-if="this.pId != -1"
                label="上级机构"
                prop="parentId"
              >
                <treeselect
                  v-model="form.parentId"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  placeholder="选择上级机构"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="机构名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入机构名称" maxlength="5" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="机构简称" prop="shortName">
                <el-input
                  v-model="form.shortName"
                  placeholder="请输入机构简称"
                  maxlength="20"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门机构电话" prop="managerPhone">
                <el-input
                  v-model="form.managerPhone"
                  placeholder="请输入联系电话"
                  maxlength="16"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门机构地址" prop="address">
                <el-input
                  v-model="form.address"
                  placeholder="请输入地址"
                  maxlength="50"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序号" prop="sort">
                <el-input-number
                  v-model="form.sort"
                  controls-position="right"
                  :min="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="机构类型" prop="type">
                <el-select
                  prop="type"
                  label="机构类型"
                  v-model="form.type"
                  placeholder="请选择机构类型"
                  clearable
                >
                  <el-option
                    v-for="dict in dict.type.sys_org_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否可用" prop="isLock">
                <el-switch
                  v-model="form.isLock"
                  :active-value="0"
                  :inactive-value="1"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="加钞间出入口远程控制"
                prop="cashAddingRoomRemoteControl"
              >
                <el-switch
                  v-model="form.cashAddingRoomRemoteControl"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="离行式大堂设备"
                prop="detachedLobbyEquipment"
              >
                <el-input-number
                  v-model="form.detachedLobbyEquipment"
                  controls-position="right"
                  :min="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="离行式穿墙设备"
                prop="detachedWallPenetratingEquipment"
              >
                <el-input-number
                  v-model="form.detachedWallPenetratingEquipment"
                  controls-position="right"
                  :min="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button @click="handleOrgAdd">新增物防建设</el-button>

        <el-table
          border
          size="small"
          v-loading="orgloading"
          :data="constructionList"
          @selection-change="handleOrgSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column v-if="false" label="序号" align="center" prop="id" />
          <el-table-column label="标准" align="center" prop="standard" />
          <el-table-column
            label="达标日期"
            align="center"
            prop="dateOfCompliance"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ formatTime(scope.row.dateOfCompliance,"YYYY-MM-DD") }}</span>
            </template>
          </el-table-column>

          <el-table-column
            v-if="false"
            label="机构id"
            align="center"
            prop="orgId"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="handleOrgUpdate(scope.row)"
                v-hasPermi="['system:construction:edit']"
                >查看证书</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="handleOrgUpdate(scope.row)"
                v-hasPermi="['system:construction:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleOrgDelete(scope.$index)"
                v-hasPermi="['system:construction:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </DialogCom>

    <DialogCom
      :title="orgtitle"
      :visible.sync="orgopen"
      width="500px"
      append-to-body
    >
      <el-form
        ref="orgform"
        :model="orgform"
        label-width="80px"
        :rules="rules2"
      >
        <el-form-item label="标准" prop="standard">
          <el-input v-model="orgform.standard" placeholder="请输入标准" />
        </el-form-item>
        <el-form-item label="达标日期" prop="dateOfCompliance">
          <el-date-picker
            clearable
            v-model="orgform.dateOfCompliance"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择达标日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="证书佐证" prop="certificateEvidence">
          <el-switch
            v-model="orgform.certificateEvidence"
            active-text
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item
          v-if="orgform.certificateEvidence"
          label="证书"
          prop="certificate"
        >
          <el-input
            v-if="false"
            v-model="orgform.certificate"
            placeholder="请输入证书"
          />
          <div class="image-container" style="margin-left: 20px">
            <p style="font-size: 12px; color: #999">上传证书</p>
            <image-upload :limit="1" :fileSize="2"></image-upload>
          </div>
        </el-form-item>
        <el-form-item v-if="false" label="佐证" prop="evidence">
          <el-input v-model="orgform.evidence" placeholder="请输入佐证" />
        </el-form-item>
        <el-form-item v-if="false" label="机构id" prop="orgId">
          <el-input v-model="orgform.orgId" placeholder="请输入机构id" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOrgForm">确 定</el-button>
        <el-button @click="orgcancel">取 消</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  listOrgPhysicalDefenseConstruction,
  getOrgPhysicalDefenseConstruction,
  addOrgPhysicalDefenseConstruction,
  updateOrgPhysicalDefenseConstruction,
  delOrgPhysicalDefenseConstruction,
} from "@/api/system/OrgPhysicalDefenseConstruction";
import { deptTreeSelect } from "@/api/system/public";
import {
  listExtend,
  getExtend,
  addExtend,
  updateExtend,
  delExtend,
  getExtendByOrgId,
  uploadFile,
  addOrUpdate,
} from "@/api/system/extend";
export default {
  dicts: ["sys_normal_disable", "sys_org_type"],
  data() {
    return {
      tempRow: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        status: undefined,
        parentId: undefined,
      },
      // 机构树选项
      deptOptions: [],
      pId: 0,
      orgid: "",
      // 表单参数
      orgform: {},
      //默认选中节点
      defaultKeys: [],
      //表单验证
      rules2: {
        standard: [{ required: true, message: "请输入标准", trigger: "blur" }],
        dateOfCompliance: [
          { required: true, message: "请输入达标日期", trigger: "blur" },
        ],
      },
      rules: {
        parentId: [
          { required: true, message: "上级机构不能为空", trigger: "blur" },
        ],
        sort: [{ required: true, message: "排序号不能为空", trigger: "blur" }],
        type: [
          { required: true, message: "机构类型不能为空", trigger: "blur" },
        ],
        isLock: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        name: [
          { required: true, message: "机构名称不能为空", trigger: "blur" },
        ],
        // managerPhone: [
        //   {
        //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        //     message: "请输入正确的手机号码",
        //     trigger: "blur",
        //   },
        // ],
      },
      orgopen: false,
      orgtitle: "",
      form: {},
      constructionList: [],
      tableData: [],
      id: null,
      isShow: false,
      orgloading: false,
    };
  },

  watch: {},
  computed: {},
  created() {
    this.getDeptTree();
  },
  methods: {
    getOrgPhysicalDefenseConstructionInfo() {
      this.orgloading = true;
      let dat = { orgId: this.id, type: 4 };
      // console.log(dat,2222222222)
      listOrgPhysicalDefenseConstruction(dat).then((data) => {
        // console.log("机构信息获取成功");
        this.constructionList = data.rows;
        this.orgloading = false;
      });
    },
    // 多选框选中数据
    handleOrgSelectionChange(selection) {
      this.orgids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 取消按钮
    orgcancel() {
      this.orgopen = false;
      this.orgreset();
      this.tempRow = "";
    },
    /** 提交按钮 */
    submitOrgForm() {
      this.$refs.orgform.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交数据或执行其他操作
          let dat = {
            standard: this.orgform.standard,
            dateOfCompliance: this.orgform.dateOfCompliance,
            certificateEvidence: this.orgform.certificateEvidence,
            certificate: this.orgform.certificate,
            evidence: this.orgform.evidence,
          };
          this.constructionList.splice(this.tempRow, 1);
          this.constructionList.push(dat);
          this.orgopen = false;
        } else {
          // 表单验证未通过，显示错误信息
        }
      });

      // this.orgform.orgId = this.orgid;
      // this.$refs["orgform"].validate((valid) => {
      //   if (valid) {
      //     this.orgform.type = 4;
      //     if (this.orgform.id != null) {
      //       updateOrgPhysicalDefenseConstruction(this.orgform).then(
      //         (response) => {
      //           this.$modal.msgSuccess("修改成功");
      //           this.orgopen = false;
      //           this.getOrgPhysicalDefenseConstructionInfo();
      //         }
      //       );
      //     } else {
      //       addOrgPhysicalDefenseConstruction(this.orgform).then((response) => {
      //         this.$modal.msgSuccess("新增成功");
      //         this.orgopen = false;
      //         this.getOrgPhysicalDefenseConstructionInfo();
      //       });
      //     }
      //   }
      // });
    },
    /** 删除按钮操作 */
    handleOrgDelete(row) {
      this.constructionList.splice(row, 1);
      // this.$modal
      //   .confirm('是否确认删除机构物防建设编号为"' + orgids + '"的数据项？')
      //   .then(function () {
      //     return delOrgPhysicalDefenseConstruction(orgids);
      //   })
      //   .then(() => {
      //     this.getOrgPhysicalDefenseConstructionInfo();
      //     this.$modal.msgSuccess("删除成功");
      //   })
      //   .catch(() => {});
    },
    /** 修改按钮操作 */
    handleOrgUpdate(row) {
      this.orgreset();
      this.tempRow = row;
      this.orgform = row;
      this.orgopen = true;
      this.orgtitle = "修改机构物防建设";
      // const id = row.id || this.orgids;
      // getOrgPhysicalDefenseConstruction(id).then((response) => {
      //   // console.log(response)
      //   this.orgform = response.data;
      //   this.orgopen = true;
      //   this.orgtitle = "修改机构物防建设";
      // });
    },
    /** 新增按钮操作 */
    handleOrgAdd() {
      this.orgreset();
      this.orgopen = true;
      this.orgtitle = "添加机构物防建设";
    },
    // 表单重置
    orgreset() {
      this.orgform = {
        id: null,
        standard: null,
        dateOfCompliance: null,
        certificateEvidence: null,
        certificate: null,
        evidence: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        orgId: null,
      };
      this.resetForm("orgform");
    },
    /** 转换机构数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    /** 查询机构下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        this.defaultKeys.push(response.data[0].id);
        this.queryParams.parentId = response.data[0].id;
        // this.handleQuery();
      });
    },

    async show(row) {
      this.form = {};
      this.id = 0;
      this.constructionList = [];
      if (row != 0) {
        // console.log(row,111111111111)

        this.orgid = row.orgid;
        this.form = row;
        // this.form.isLock2=row.isLock;
        this.id = row.id;
        if (row.id != null) {
          getExtendByOrgId(row.id).then((data) => {
            console.log(data.data);
            if (data.data != null) {
              (this.form.orgExtendId = data.data.id),
                (this.form.cashAddingRoomRemoteControl =
                  data.data.cashAddingRoomRemoteControl);
              this.form.detachedLobbyEquipment =
                data.data.detachedLobbyEquipment;
              this.form.detachedWallPenetratingEquipment =
                data.data.detachedWallPenetratingEquipment;
            }
          });
          this.getOrgPhysicalDefenseConstructionInfo();
        }
      }
      this.isShow = true;
    },

    // 事件
    onHide() {
      this.$emit("success")
      this.isShow = false;
    },

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，提交数据或执行其他操作
          this.form.isLock = this.form.isLock ? 1 : 0;
          this.form.cashAddingRoomRemoteControl = this.form
            .cashAddingRoomRemoteControl
            ? 1
            : 0;
          this.form.constructionList = this.constructionList;
          // console.log(this.form);
          addOrUpdate(this.form).then((data) => {
            this.$modal.msgSuccess("成功");
            this.$emit("success")
            this.onHide();
          });
        } else {
          // 表单验证未通过，显示错误信息
        }
      });

      // this.$refs.form.validate(async (isValidate) => {

      //   // this.$emit("success");
      // });
    },

    // 事件
    //apimark//
  },
  mounted() {},
  components: { Treeselect },
};
</script>

<style lang="scss" scoped>
.brand_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
</style>