Merge branch 'master' of http://42.193.1.25:9521/r/sccg_ui into master

wl

2022-11-01 18688e9d36b2d75efa79a9b0a7a8b1b44fdee6bd

 src/views/systemSetting/device/handheldTerminal/components/dialogForm.vue

New file
@@ -0,0 +1,331 @@
<template>
  <div class="create">
    <main>
      <div class="mainContent">
        <el-form
          ref="formRef"
          label-width="140px"
          :rules="createRules"
          autoComplete="on"
          :model="form"
          label-position="right"
        >
          <!-- 单兵名称 -->
          <el-form-item class="optionItem" label="单兵名称:" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请填写单兵名称"
            ></el-input>
          </el-form-item>
          <!-- 单兵编号 -->
          <el-form-item class="optionItem" label="单兵编号:" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请填写单兵编号"
            ></el-input>
          </el-form-item>
          <!-- 使用人员 -->
          <el-form-item class="optionItem" label="使用人员:" prop="user">
            <el-input
              v-model="form.user"
              placeholder="请填写使用人员"
            ></el-input>
          </el-form-item>
          <!-- 联系方式 -->
          <el-form-item class="optionItem" label="联系方式:" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请填写联系方式"
            ></el-input>
          </el-form-item>
          <!-- 部门 -->
          <el-form-item class="optionItems" label="所属部门:" prop="departId">
            <el-select v-model="form.departName" placeholder="请输入所属部门">
              <el-option :value="mylabel">
                <el-tree
                  ref="tree"
                  :check-strictly="true"
                  :data="departList"
                  :props="defaultProps"
                  show-checkbox
                  @check-change="handleCheck"
                  default-expand-all
                  node-key="id"
                >
                </el-tree>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="optionBtn">
              <el-button
                type="primary"
                class="btn submit"
                @click.native.prevent="handleUpdateLawCar"
                >确认
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </main>
  </div>
</template>
  <script>
import { validatePhone, validateName } from "@/utils/validate";
export default {
  data() {
    const checkName = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("单兵名称不能为空"));
      }
    };
    const checkCode = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("单兵编码不能为空"));
      }
    };
    const checkDepartId = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("所属部门不能为空"));
      }
    };
    const checkUser = (rule, value, callback) => {
      if (value) {
        callback();
      } else {
        callback(new Error("使用人员不能为空"));
      }
    };
    const checkPhone = (rule, value, callback) => {
      if (value) {
        if (validatePhone(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的手机号"));
        }
      } else {
        callback(new Error("手机号码不能为空"));
      }
    };
    return {
      form: {
        name: "",
        code: "",
        user: "",
        phone: "",
        departName: "",
        departId: 0,
      },
      createRules: {
        departId: [
          {
            required: true,
            trigger: "blur",
            validator: checkDepartId,
          },
        ],
        name: [
          {
            required: true,
            trigger: "blur",
            validator: checkName,
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            validator: checkCode,
          },
        ],
        user: [
          {
            required: true,
            trigger: "blur",
            validator: checkUser,
          },
        ],
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: checkPhone,
          },
        ],
        // id: 0,
        ownerName: [
          {
            required: true,
            trigger: "blur",
            validator: checkName,
          },
        ],
        // vehicleUser: [
        //     {
        //         required: true, trigger: 'blur', validator: checkUser
        //     }
        // ]
      },
      selectOrg: {
        orgsid: [],
      },
      mylabel: "",
      departList: [],
      defaultProps: {
        children: "children",
        label: "departName",
      },
    };
  },
  created() {
    const { getDepartTree } = this;
    // 初始化部门树
    getDepartTree();
    // 初始化数据
    this.form = JSON.parse(JSON.stringify(this.info));
    if (!this.form.departName) {
      this.form.departName = this.form.pdepartName;
    }
  },
  methods: {
    // 修改执法车
    handleUpdateLawCar() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const { form } = this;
          this.$axios({
            method: "put",
            url: "sccg/car_Manage/modification_enforce",
            data: {
              ...form,
            },
          }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "修改车辆成功",
              });
              this.$emit("closeDialog", { flag: false, index: 1 });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    // 部门修改
    handleCheck(data, checked) {
      this.form.departId = data.id;
      this.form.departName = data.departName;
      // 获取当前选择的id在数组中的索引
      const indexs = this.selectOrg.orgsid.indexOf(data.id);
      // 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
      if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
        this.$message({
          message: "只能选择一个部门！",
          type: "warning",
          showClose: true,
        });
        // 设置已选择的节点为false 很重要
        this.$refs.tree.setChecked(data, false);
      } else if (this.selectOrg.orgsid.length === 0 && checked) {
        // 发现数组为空 并且是已选择
        // 防止数组有值，首先清空，再push
        this.selectOrg.orgsid = [];
        this.selectOrg.orgsid.push(data.id);
      } else if (
        indexs >= 0 &&
        this.selectOrg.orgsid.length === 1 &&
        !checked
      ) {
        // 再次直接进行赋值为空操作
        this.selectOrg.orgsid = [];
        this.form.departName = "";
      }
    },
    // 获取部门树
    getDepartTree() {
      this.$axios.get("/sccg/depart/tree").then((res) => {
        this.departList = res.data;
      });
    },
  },
  props: ["info", "closeDialog"],
};
</script>
  <style lang="scss" scoped>
.create {
  border-radius: 1px;
  background-color: #09152f;

  main {
    // border: 1px solid #fff;
    text-align: left;
    padding: 0 55px;
    background-color: #09152f;
    padding-bottom: 50px;

    .mainContent {
      display: flex;
      justify-content: center;
      padding-top: 50px;

      .el-form-item__content {
        width: 400px;

        .el-select {
          width: 100%;
        }
      }

      .optionHandleSp {
        display: flex;

        .areaNumber,
        .moreNumber {
          flex: 1;
        }

        .telNumber {
          flex: 2;
        }
      }

      .optionBtn {
        display: flex;
        margin-top: 20px;

        .btn {
          padding: 12px 50px;
        }
      }
    }
  }

  &::v-deep .el-textarea__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
  }

  ::v-deep .el-form-item__label {
    color: #4b9bb7;
  }

  ::v-deep .el-input__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
  }
}
</style>