xzlz_JczWeb/src/views/home/layout/zbbb.vue

<template>
  <div></div>

  <div class="cntinfo">
    <div class="flex align-center just-between box">
      <div class="flex align-center">
        报备单位：
        <MOSTY.Department
          v-model="listQuery.ssbmdm"
          placeholder="请选择部门"
          @getDepValue="changeDep"
        />
      </div>
      <!-- v-if="['add', 'edit'].includes(pageType)" -->
      <el-button size="small" type="primary" @click="_onSave">保存</el-button>
    </div>
    <el-form
      ref="formRef"
      class="info"
      :model="listQuery"
      :inline="true"
      :rules="rules"
    >
      <div class="bblxItem">
        <div class="btItem">环林卡口设置</div>
        <div class="info">
          <el-form-item>
            <ChooseTable
              :deptment="deptment"
              v-if="!isDetail"
              :configer="{
                width: 800,
                lx: 'jcz',
                isRadio: true
              }"
              v-model="listQuery.jczList"
              :dic="props.dic"
            />

            <div class="peolist" v-if="listQuery.jczList">
              <el-tag type="primary" :key="item">{{
                listQuery.jczList.jczmc
              }}</el-tag>
            </div>
            <div class="peolist" v-if="listQuery.jczmc && !listQuery.jczList">
              <el-tag type="primary" :key="item">{{ listQuery.jczmc }}</el-tag>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">班次设置</div>
        <div class="info">
          <el-form-item prop="kssj">
            <el-time-picker
              v-model="listQuery.bcKssj"
              :disabled="isDetail"
              placeholder="开始时间"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
            />
          </el-form-item>
          <el-form-item prop="bcKts">
            <el-select
              clearable
              v-model="listQuery.bcKtsDict"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in dic.D_QW_BC_KTS"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="jssj">
            <el-time-picker
              v-model="listQuery.bcJssj"
              :disabled="isDetail"
              format="HH:mm:ss"
              placeholder="结束时间"
              value-format="HH:mm:ss"
            />
          </el-form-item>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">负责人</div>
        <div class="info">
          <el-form-item>
            <ChooseTable
              :deptment="deptment"
              @change="handleFzr"
              v-if="!isDetail"
              :configer="{
                width: 700,
                lx: 'mj',
                rowKey: 'id',
                isRadio: true
              }"
              :dic="props.dic"
            />
          </el-form-item>
          <el-form-item prop="fzrXm">
            <el-input
              readonly
              v-model="listQuery.fzrXm"
              placeholder="负责人"
              clearable
            />
          </el-form-item>
          <el-form-item prop="fzrSfzh">
            <el-input
              readonly
              v-model="listQuery.fzrSfzh"
              placeholder="身份证"
              clearable
            />
          </el-form-item>
          <el-form-item prop="fzrLxdh">
            <el-input
              readonly
              v-model="listQuery.fzrLxdh"
              placeholder="负责人电话"
              clearable
            />
          </el-form-item>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">当班人员</div>
        <div class="info">
          <div style="width: 100%">
            <el-form-item prop="mjData" label="当班民警">
              <div class="flex">
                <div class="num">
                  {{ mjData ? mjData.length : 0 }}
                </div>
                <ChooseTable
                  :deptment="deptment"
                  v-if="!isDetail"
                  :dic="props.dic"
                  :configer="{
                    lx: 'mj',
                    rowKey: 'ryid',
                    placement: 'top-start'
                  }"
                  v-model="mjData"
                />
                <div class="peolist">
                  <el-tag type="primary" v-for="item in mjData" :key="item">{{
                    item.jlxm || item.xm
                  }}</el-tag>
                </div>
              </div>
            </el-form-item>
          </div>
          <div style="width: 100%">
            <el-form-item prop="fjData" label="当班辅警">
              <div class="flex">
                <div class="num">
                  {{ fjData ? fjData.length : 0 }}
                </div>
                <!-- :deptment="props.dep"
                    :dic="props.dic" -->
                <ChooseTable
                  :deptment="deptment"
                  :dic="props.dic"
                  v-if="!isDetail"
                  :configer="{ lx: 'fj', placement: 'top-start' }"
                  v-model="fjData"
                />
                <div class="peolist">
                  <el-tag type="primary" v-for="item in fjData" :key="item">{{
                    item.jlxm || item.xm
                  }}</el-tag>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">装备</div>
        <div class="info">
          <div style="width: 100%">
            <el-form-item prop="zdList" label="智能装备">
              <div class="flex">
                <div class="num">
                  {{ listQuery.zdList ? listQuery.zdList.length : 0 }}
                </div>
                <ChooseTable
                  :dic="props.dic"
                  v-if="!isDetail"
                  :deptment="deptment"
                  :configer="{
                    lx: 'znzb',
                    rowKey: 'id',
                    placement: 'top-start'
                  }"
                  v-model="listQuery.zdList"
                />
                <div class="peolist">
                  <el-tag
                    type="primary"
                    v-for="item in listQuery.zdList"
                    :key="item"
                    >{{ item.sbmc }}</el-tag
                  >
                </div>
              </div>
            </el-form-item>
          </div>
          <!-- <div style="width: 100%">
                <el-form-item prop="jyqxList" label="警用器械">
                  <div class="flex">
                    <div class="num">
                      {{ listQuery.jyqxList ? listQuery.jyqxList.length : 0 }}
                    </div>

                    <ChooseTable
                      :deptment="deptment"
                      v-if="!isDetail"
                      :dic="props.dic"
                      :configer="{ lx: 'jyqx', placement: 'top-start' }"
                      v-model="listQuery.jyqxList"
                    />
                    <div class="peolist">
                      <el-tag
                        type="primary"
                        v-for="item in listQuery.jyqxList"
                        :key="item"
                        >{{ item.qxMc }}</el-tag
                      >
                    </div>
                  </div>
                  <div style="width: 100%">
                    <el-form-item
                      v-for="(item, idx) in listQuery.jyqxList"
                      :key="idx"
                      :label="item.qxMc"
                    >
                      <el-input-number
                        :disabled="isDetail"
                        style="width: 100%"
                        v-model="item.qxsl"
                        class="mx-4"
                        :min="0"
                      />
                    </el-form-item>
                  </div>
                </el-form-item>
              </div> -->
          <div style="width: 100%">
            <el-form-item prop="clList" label="巡防车辆">
              <div class="flex">
                <div class="num">
                  {{ listQuery.clList ? listQuery.clList.length : 0 }}
                </div>
                <ChooseTable
                  :deptment="deptment"
                  v-if="!isDetail"
                  :dic="props.dic"
                  :configer="{
                    lx: 'cl',
                    rowKey: 'id',
                    placement: 'top-start'
                  }"
                  v-model="listQuery.clList"
                />
                <div class="peolist">
                  <el-tag
                    type="primary"
                    v-for="item in listQuery.clList"
                    :key="item"
                    >{{ item.cph }}</el-tag
                  >
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="bblxItem">
        <div class="btItem">警用器械</div>
        <div class="info">
          <el-form-item>
            <div
              v-for="(item, index) in listQuery.qxList"
              :key="index"
              style="width: 50%; margin-bottom: 10px"
            >
              <div class="flex">
                <div style="width: 30%">{{ item.qxmc }}：</div>
                <el-input-number v-model="item.qxsl" :step="1" />
              </div>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
import { ElMessage } from "element-plus";
import ChooseTable from "@/components/chooseList/chooseTable.vue";
import { timeValidate } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
// const { D_BZ_JYQXFL } = proxy.$dict("D_BZ_JYQXFL");
const props = defineProps({
  dic: {
    type: Object,
    default: () => {}
  },
  isDetail: {
    type: Boolean,
    default: false
  },
  row: { type: Object, default: () => {} }
});

const emit = defineEmits(["close"]);
const formRef = ref(null);
const dialogForm = ref(false);
const listQuery = ref({});
const pageInfo = {
  edit: {
    title: "编辑",
    url: ""
  },
  add: {
    title: "新增",
    url: ""
  },
  detail: {
    title: "详情"
  }
};
let pageType = ref("add");
const mjData = ref([]);
const fjData = ref([]);
const ChegeMj = (val) => {
  const data = val.map((item) => {
    return {
      xfllld: item.id,
      ryXm: item.xm,
      rysfzh: item.sfzh,
      ryJzlx: item.fl,
      ryMfjilb: item.ryid,
      ryLxdh: item.lxdh
    };
  });
  return data;
};
const fz = (val) => {
  const data = val.map((item) => {
    return {
      id: item.xfllld,
      xm: item.ryXm,
      sfzh: item.rysfzh,
      fl: item.ryJzlx,
      ryid: item.ryMfjilb,
      lxdh: item.ryLxdh
    };
  });
  return data;
};
// 初始化数据
const init = (type) => {
  pageType.value = type;
  dialogForm.value = true;
  // 根据type和row初始化表单数据
  console.log(props.row, "=====================================");

  if (props.row) {
    listQuery.value = { ...props.row };
    if (props.row.ryList.length > 0) {
      const data = fz(props.row.ryList);
      mjData.value = data.filter((item) => item.fl == "01");
      fjData.value = data.filter((item) => item.fl == "02");
    }
    if (listQuery.value.qxList.length == 0) {
      listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
        return { qxmc: item.label, qxsl: 0 };
      });
    }
  } else {
    pageType.value = "add";

    listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
      return { qxmc: item.label, qxsl: 0 };
    });
  }
};
watch(
  () => props.row,
  () => {
    init();
  },
  { deep: true, immediate: true }
);
onMounted(() => {
  init();
});
// 验证规则
const rules = ref({
  spbt: [
    {
      required: true,
      message: "请输入标题",
      trigger: "blur"
    }
  ]
});
//保存

const _onSave = () => {
  const data = [...mjData.value, ...fjData.value];

  listQuery.value.ryList = ChegeMj(data);
  const time = new Date();
  listQuery.value.bbSjBbrq = timeValidate(time);
  switch (listQuery.value.bcKtsDict) {
    case "01":
      listQuery.value.bcKts = 1;
      break;
    case "02":
      listQuery.value.bcKts = 2;
    case "03":
      listQuery.value.bcKts = 4;
    case "04":
      listQuery.value.bcKts = 5;
    case "05":
      listQuery.value.bcKts = 6;
    case "06":
      listQuery.value.bcKts = 7;
    case "07":
      listQuery.value.bcKts = 8;
  }
  if (listQuery.value.jczList) {
    listQuery.value.jczid = listQuery.value.jczList.id;
    listQuery.value.jczmc = listQuery.value.jczList.jczmc;
  }

  if (pageType.value == "add") {
    jczsavel(listQuery.value).then((res) => {
      ElMessage({ message: "新增成功", type: "success" });
      emit("close");
    });
  } else {
    Xfbbupdate(listQuery.value).then((res) => {
      ElMessage({ message: "修改成功", type: "success" });
      emit("close");
    });
  }
};

//
const close = () => {
  dialogForm.value = false;
  listQuery.value = {};
};

//获取数据
const JczShow = ref(false);
//负责人
const handleFzr = (val) => {
  listQuery.value.fzrXm = val.xm;
  listQuery.value.fzrId = val.ryid;
  listQuery.value.fzrSfzh = val.sfzh;
  listQuery.value.fzrLxdh = val.lxdh;
};
const deptment = ref({});
const changeDep = (val) => {
  deptment.value = val;
};
const changeJCZ = (val) => {
  console.log(val);
};
</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px;

  .file {
    height: 400px;
    border: 1px solid #e9e9e9;
    // border-radius: ;
    color: #777575;
    // border-left: 0;
  }

  :deep(.el-form-item__label) {
    background-color: #f7fafb;
    padding: 0px 8px;
    color: #000;
    font-weight: 500;
    border: 1px solid #e3e7ed;
  }

  .head_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .cntinfo {
    height: calc(100% - 70px);
    overflow: hidden;
    overflow-y: auto;
    color: #000;
  }
}
.bblxItem {
  width: 100%;
  line-height: 40px;
  min-height: 40px;
  display: flex;
  color: #000;
  .btItem {
    width: 180px;
    padding: 7px 0;
    background: #0000000a;
    margin-top: 1px;
    text-align: center;
  }
  .info {
    flex: 1;
    background: #0000000a;
    margin-top: 1px;
    padding: 10px;
    box-sizing: border-box;
    .gapline {
      height: 1px;
      border-top: 1px dashed #66cbff;
      margin: 4px 0;
    }
    .dl-car {
      min-width: 200px;
      display: inline-block;
      border: solid 1px #66cbff;
      margin: 20px 30px 0 0;
      padding: 0;
      border-radius: 5px;
      position: relative;
      dt {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #0380c0;
        padding: 0 10px 0 40px;
        box-sizing: border-box;
        font-weight: 600;
        box-sizing: border-box;
        border-bottom: solid 1px #66cbff;
        background: #e3f5ff;
        height: 30px;
        border-radius: 5px 5px 0 0;
      }
      .peo {
        border-bottom: solid 1px #01d608;
        background: #dbf3cf;
        color: #339d00;
      }
    }
    .dl-car::before {
      position: absolute;
      content: "";
      top: -18px;
      left: -18px;
      width: 52px;
      height: 49px;
      background: url("~@/assets/images/peo.png");
    }
  }
  .num {
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #bebebe;
    // background-color: #1b294c;
    border-radius: 4px;
    margin-right: 10px;
  }
  .subBtn {
    padding-left: 100px;
    box-sizing: border-box;
  }
}

::v-deep .el-form-item--default {
  margin-bottom: 0;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-form--inline .el-form-item {
  margin-right: 20px;
  margin-top: 10px;
}

.deBtn {
  padding: 0px 10px;
  background: rgb(35, 176, 241);
  border-radius: 18px;
  color: #fff;
  cursor: pointer;
}
.box {
  margin-bottom: 10px;
}
</style>