pc详情页一（表单）

<!-- Vue SFC -->
<template>
  <div class="h tableTransparent bxs page-box page-box-top65">
    <div class="page-fixed bxs p10 clearfix">
      <div class="header clearfix bxs">
        <div class="header-item header-lf cupo" @click="backFn">
          <i class="el-icon-arrow-left"></i>
          <span class="header-lf-btn cor6">返回</span>
        </div>
        <div class="header-item header-mid h">
          <span v-if="!seeSure && !userId">新增用户</span>
          <span v-if="!seeSure && userId">编辑用户</span>
          <span v-if="seeSure">用户详情</span>
        </div>
        <div class="header-item header-rt h">
          <el-button
            v-if="!seeSure"
            size="small"
            type="primary"
            @click="submitFormFn"
            >保 存</el-button
          >
        </div>
      </div>
    </div>
    <div class="page-content p10 h clearfix bxs">
      <div class="page-back-fff p10 bxs">
        <div class="ml20 title">用户信息</div>
        <div>
          <div class="mt10">
            <!-- 新增 -->
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              label-width="210px"
            >
              <el-row>
                <el-col :span="10">
                  <el-form-item label="用户类型：" :required="!seeSure">
                    <el-col :span="22">
                      <el-select
                        v-if="!seeSure"
                        class="w"
                        v-model="form.dataType"
                        placeholder="请选择用户类型"
                        disabled
                      >
                        <el-option
                          v-for="item in dataTypes"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <span v-else>
                        <span v-for="(item, index) in dataTypes" :key="index">
                          <span v-if="item.value == form.dataType">{{
                            item.label
                          }}</span>
                        </span>
                      </span>
                    </el-col>
                  </el-form-item>
                  <el-form-item
                    label="姓名："
                    :prop="!seeSure ? 'nickName' : ''"
                  >
                    <el-col :span="22">
                      <el-input
                        v-if="!seeSure"
                        v-model="form.nickName"
                        maxlength="20"
                        show-word-limit
                      ></el-input>
                      <span v-else>{{ form.nickName }}</span>
                    </el-col>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="所属单位：" :required="!seeSure">
                    <el-col :span="23">
                      <div
                        v-if="!seeSure"
                        class="page-select-input cupo tl w overflow"
                        @click="selectCompayFn()"
                      >
                        <div class="w overflow">
                          <div class="text_overflowd">
                            <div v-if="form.bindDeptNames">
                              <span>{{ form.bindDeptNames }}</span>
                            </div>
                            <span v-else class="cor9">请选择</span>
                          </div>
                        </div>
                        <div class="page-select-input-icon flr">
                          <i class="corblue el-icon-s-order"></i>
                        </div>
                      </div>
                      <span v-else>
                        <span>{{ form.bindDeptNames }}</span>
                      </span>
                    </el-col>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!-- 选部门 -->
    <el-dialog title="选择单位" :visible.sync="departShow" width="50%">
      <TreeDepart
        v-if="departShow"
        ref="TreeDepart"
        :selectType="false"
        :disabledSure="false"
        :obj="haveDeparts"
        :self="'all'"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="departShow = false">取 消</el-button>
        <el-button type="primary" @click="sureSelectDepartFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addUser, updateUser, getByUserId } from "@/api/manage_personManage";
import { resSure } from "@/utils/util";
import TreeDepart from "@/components/common/selectDepart/treeDepart";
import PicNone from "@/components/common/group/picNone";
// 状态关联关键词*
// 全局混入
// 保存表单校验 
export default {
  name: "proCreateAdd",
  components: { TreeDepart, PicNone },
  data () {
    return {
      seeSure: false, //是否查看
      userId: "", //编辑或查看用户id
      // 用户类型
      dataTypes: [
        { label: "内部用户", value: "0" },
        { label: "外部用户", value: "1" },
      ],
      form: {
        dataType: "1",//用户类型
        nickName: "",//姓名
      },
      rules: {
        nickName: [
          { required: true, message: "请输入用户姓名", trigger: "blur" },
          {
            pattern: /^[0-9a-zA-Z\u4e00-\u9fa5·]{1,20}$/,
            message: "请输入中英文及数字",
          },
        ],
      },
      listRow: {},//列表页查详情参数
      departShow: false,//部门选择弹框
      haveDeparts: {},//选中的部门
    };
  },
  created () {
    // 是否查看
    if (this.$route.params.seeSure) {
      this.seeSure = true;
    }
    // 编辑或查看必要条件
    if (this.$route.params.userId) {
      this.userId = this.$route.params.userId;
      this.getData();
    } else {
      if (!this.$route.params.newAdd) {
        this.backFn();
      }
    }
    if (this.$route.params.listRow) {
      this.listRow = this.$route.params.listRow;
    }
  },
  methods: {
    // 所属单位
    selectCompayFn () {
      let ids = [];
      ids = this.form.deptIds;
      this.haveDeparts = { ids };
      this.departShow = true;
    },
    // 部门确定
    sureSelectDepartFn () {
      let list = this.$refs.TreeDepart.uniqueValueList;
      let form = this.form;
      this.form = { ...form };
      this.departShow = false;
    },
    // 获取基本列表数据
    async getData () {
      const res = await getByUserId(this.userId);
      this.form = res.data;
    },
    backFn () {
      this.$router.push({
        name: "personList",
        params: {
          pageIndex: this.pageIndex,
        },
      });
    },
    // 保存表单校验1 开始
    submitFormFn (num) {
      let that = this;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.saveBefore(that.form, num);
        } else {
          return false;
        }
      });
    },
    // 保存表单校验2 结束
    async saveBefore (form, num) {
      var datVal = {
        user: form,
        deptIds: form.deptIds,
      };
      if (form.userId) {
        const res = await updateUser(datVal);
        console.log(res);
        let resSureback = resSure(res);
        if (!resSureback) {
          return;
        } else {
          this.$message.success("修改成功");
          this.$router.push({
            name: "personList",
            params: {
              pageIndex: this.pageIndex,
            },
          });
        }
      } else {
        const res = await addUser(datVal);
        console.log(res);
        let resSureback = resSure(res);
        if (!resSureback) {
          return;
        } else {
          this.$message.success("保存成功");
          this.$router.push({
            name: "personList",
            params: {
              pageIndex: this.pageIndex,
            },
          });
        }
      }
    },
  },
};
</script>
<style lang="scss"  scoped>
</style>