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

<template>
  <div class="rule-type">
    <el-dialog
      :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="机构名称">
                <el-input v-model="form.name" placeholder="请输入机构名称" />
              </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="11"
                />
              </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="isLock">
                <el-switch v-model="form.isLock"> </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="加钞间出入口远程控制"
                prop="cashAddingRoomRemoteControl"
              >
                <el-switch v-model="form.cashAddingRoomRemoteControl">
                </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 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) }}</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"
                @click="handleOrgUpdate(scope.row)"
                v-hasPermi="['system:construction:edit']"
                >查看证书</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleOrgUpdate(scope.row)"
                v-hasPermi="['system:construction:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleOrgDelete(scope.row)"
                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>
    </el-dialog>

    <el-dialog
      :title="orgtitle"
      :visible.sync="orgopen"
      width="500px"
      append-to-body
    >
      <el-form ref="orgform" :model="orgform" label-width="80px">
        <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="datetime"
            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>
    </el-dialog>
  </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 {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        status: undefined,
        parentId: undefined,
      },
      // 机构树选项
      deptOptions: [],
      id: "",
      pId: 0,
      orgid: "",
      // 表单参数
      orgform: {},
      //默认选中节点
      defaultKeys: [],
      rules: {
        parentId: [
          { required: true, message: "上级机构不能为空", trigger: "blur" },
        ],
        name: [
          { required: true, message: "机构名称不能为空", trigger: "blur" },
        ],
        orderNum: [
          { required: true, message: "显示排序不能为空", trigger: "blur" },
        ],
        isLock: [{ required: true, message: "状态不能为空", trigger: "blur" }],
        phone: [
          {
            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.orgid, type: 4 };
      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();
    },
    /** 提交按钮 */
    submitOrgForm() {
      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) {
      const orgids = row.id || this.orgids;
      this.$modal
        .confirm('是否确认删除机构物防建设编号为"' + orgids + '"的数据项？')
        .then(function () {
          return delOrgPhysicalDefenseConstruction(orgids);
        })
        .then(() => {
          this.getOrgPhysicalDefenseConstructionInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 修改按钮操作 */
    handleOrgUpdate(row) {
      this.orgreset();
      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)
        this.orgid = row.orgid;
        this.form = row;
        this.id = row.id;
        if (row.id != null) {
          getExtendByOrgId(row.id).then((data) => {
            console.log(data.data);
            if (data.data != null) {
              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.isShow = false;
    },

    onSubmit() {
      this.$refs.form.validate(async (isValidate) => {
        this.form.isLock = this.form.isLock ? 0 : 1;
        this.form.cashAddingRoomRemoteControl = this.form
          .cashAddingRoomRemoteControl
          ? 1
          : 0;
        console.log(this.form);
        addOrUpdate(this.form).then((data) => {
            this.$modal.msgSuccess("添加成功");
this.onHide();
            
        });
        // this.$emit("success");
        
      });
    },

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

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