九小场所查看，备个份

src/views/modules/census/census-nineList.vue

@@ -97,7 +97,9 @@
 							<el-table-column prop="personInCharge" align="center" label="负责人" :show-overflow-tooltip="true"></el-table-column>
 							<el-table-column prop="mobile" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column>
 							<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true">
-								<el-button size="small" type="text" @click="">查看</el-button>
+								<template slot-scope="scope">
+									<el-button size="small" type="text" @click="show(scope.row)">查看</el-button>
+								</template>
 							</el-table-column>
 						</el-table>
 
@@ -114,6 +116,13 @@
 				</el-row>
 			</div>
 		</div>
+		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+			<record v-if="dialogVisible" :formType="formType" :enterpriseId="enterpriseId" :enterpriseInfo="enterpriseInfo"></record>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="dialogVisible = false">取 消</el-button>
+				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+			</span>
+		</el-dialog>
 	</div>
 </template>
 
@@ -123,11 +132,12 @@ import screenEchartsFrame2 from './chart';
 import { requestPost } from '@/js/dai/request';
 import nextTick from 'dai-js/tools/nextTick';
 import { mapGetters } from 'vuex';
+import record from './record';
 
 import axios from 'axios';
 
 export default {
-	components: { screenEchartsFrame, screenEchartsFrame2 },
+	components: { screenEchartsFrame, screenEchartsFrame2, record },
 	data() {
 		let endDisabledDate = time => {
 			//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
@@ -145,6 +155,10 @@ export default {
 			return time.getTime() > nowData;
 		};
 		return {
+			dialogVisible: false,
+			enterpriseId: '',
+			enterpriseInfo: {},
+			formType: '',
 			tableLoading: false,
 			user: {},
 			gridList: [], //所属网格list--场所区域
@@ -208,10 +222,19 @@ export default {
 		this.getPie();
 	},
 	methods: {
+		show(row) {
+			this.dialogVisible = true;
+			this.formType = 'view';
+			this.enterpriseId = row.enterpriseId;
+			this.enterpriseInfo = row;
+		},
+		handleClose() {
+			this.dialogVisible = false;
+		},
 		handleSearch(val) {
 			console.log(this.formData);
 			this.pageNo = 1;
-			this.placeType="";
+			this.placeType = '';
 			this.getTableData();
 			this.getsubData();
 			this.getPie();

src/views/modules/census/record.vue

@@ -0,0 +1,503 @@
+<template>
+  <div class="m-record"
+       style="padding: 0 20px">
+    <h3>巡查记录</h3>
+    <div class="mt10"
+         v-if="formType == 'edit'">
+      <el-button size="small"
+                 :class="[source==='manage'?'diy-button--add':'diy-button--export']"
+                 :disabled="btnDisabled || disabled"
+                 @click="handleAdd">新增</el-button>
+    </div>
+    <el-table :data="tableData"
+              row-key="id"
+              border
+              style="width: 100%"
+              :header-cell-style="getRowClass">
+      <el-table-column label="序号"
+                       type="index"
+                       align="center"
+                       width="50">
+      </el-table-column>
+
+      <el-table-column prop="patrolTime"
+                       label="巡查时间"
+                       align="center"
+                       width="200px">
+        <template slot-scope="scope">
+          <el-date-picker v-if="scope.row.isEdit"
+                          v-model="scope.row.patrolTime"
+                          type="date"
+                          class="input-width"
+                          value-format="yyyy-MM-dd"
+                          placeholder="选择日期">
+          </el-date-picker>
+          <div v-else
+               class="div-content">{{ scope.row.patrolTime }}</div>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="staffId"
+                       label="巡查人员"
+                       align="center"
+                       width="200px">
+        <template slot-scope="scope">
+          <el-select v-if="scope.row.isEdit"
+                     filterable
+                     v-model="scope.row.staffId"
+                     placeholder="请选择"
+                     class="input-width"
+                     @change="handleChangeStaff(scope.row)"
+                     clearable>
+            <el-option v-for="subItem in optionStaff"
+                       :key="subItem.value"
+                       :label="subItem.label"
+                       :value="subItem.value">
+            </el-option>
+          </el-select>
+          <div v-else
+               class="div-content">{{ scope.row.staffName }}</div>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="mobile"
+                       label="联系电话"
+                       align="center"
+                       width="200px">
+        <template slot-scope="scope">
+          <el-input v-if="scope.row.isEdit"
+                    type="number"
+                    v-model="scope.row.mobile"
+                    placeholder="请输入"
+                    class="input-width"
+                    clearable
+                    disabled></el-input>
+          <div v-else
+               class="div-content">{{ scope.row.mobile }}</div>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="result"
+                       label="巡查结果"
+                       align="center"
+                       width="200px">
+        <template slot-scope="scope">
+          <el-select v-if="scope.row.isEdit"
+                     v-model="scope.row.result"
+                     placeholder="请选择"
+                     class="input-width"
+                     size="small"
+                     clearable>
+            <el-option v-for="subItem in optionResult"
+                       :key="subItem.value"
+                       :label="subItem.label"
+                       :value="subItem.value">
+            </el-option>
+          </el-select>
+          <div v-else
+               class="div-content">{{ scope.row.resultName }}</div>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="detailed"
+                       label="隐患明细"
+                       align="center"
+                       width="200px">
+        <template slot-scope="scope">
+          <el-input v-if="scope.row.isEdit"
+                    type="text"
+                    v-model="scope.row.detailed"
+                    placeholder="请输入"
+                    class="input-width"
+                    maxlength="500"
+                    clearable></el-input>
+          <div v-else
+               class="div-content">{{ scope.row.detailed }}</div>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="imgList"
+                       label="图片列表"
+                       align="center"
+                       width="150px">
+        <template slot-scope="scope">
+          <div v-if="scope.row.isEdit">
+            <el-upload :headers="$getElUploadHeaders()"
+                       class="avatar-uploader"
+                       :action="uploadUrl"
+                       :data="{ customerId: customerId }"
+                       :show-file-list="true"
+                       :limit="3"
+                       :file-list="scope.row.imgShowList"
+                       :on-success="(res) => handleImgSuccess(res, scope.row)"
+                       :on-remove="(res) => handleImgRemove(res, scope.row)"
+                       list-type="picture"
+                       :before-upload="beforeImgUpload">
+              <i class="el-icon-plus avatar-uploader-icon"></i> 最多三张图片
+            </el-upload>
+          </div>
+
+          <div v-else
+               class="div-content">
+            <el-image v-if="scope.row.imgList.length > 0"
+                      style="width: 100px; height: 50px"
+                      :src="scope.row.imgList[0]"
+                      fit="cover"
+                      :preview-src-list="scope.row.imgList"></el-image>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="reviewTime"
+                       label="拟复查时间"
+                       align="center"
+                       width="200px">
+        <template slot-scope="scope">
+          <el-date-picker v-if="scope.row.isEdit"
+                          v-model="scope.row.reviewTime"
+                          type="date"
+                          class="input-width"
+                          value-format="yyyy-MM-dd"
+                          placeholder="选择日期">
+          </el-date-picker>
+          <div v-else
+               class="div-content">{{ scope.row.reviewTime }}</div>
+        </template>
+      </el-table-column>
+
+      <el-table-column v-if="!disabled"
+                       fixed="right"
+                       label="操作"
+                       align="center"
+                       width="120">
+        <template slot-scope="scope">
+          <template v-if="scope.row.isEdit">
+            <el-button @click="handleEdit(scope.row)"
+                       type="text"
+                       size="small"
+                       class="btn-color-edit">保存</el-button>
+            <el-button @click="handleChange(scope.row, 'cancle')"
+                       type="text"
+                       size="small"
+                       class="btn-color-edit">取消</el-button>
+          </template>
+          <template v-else>
+            <el-button v-if="formType == 'edit'"
+                       @click="handleChange(scope.row, 'edit')"
+                       type="text"
+                       size="small"
+                       :disabled="disabled"
+                       class="btn-color-edit">修改</el-button>
+            <el-popconfirm v-if="formType == 'edit'"
+                           title="删除之后无法恢复，确认删除？"
+                           @onConfirm="del(scope.row)"
+                           @confirm="del(scope.row)">
+              <el-button slot="reference"
+                         type="text"
+                         size="small"
+                         class="btn-color-del"
+                         style="margin-left: 10px">删除</el-button>
+            </el-popconfirm>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  props: {
+    enterpriseId: {
+      type: String,
+      default: "",
+    },
+    enterpriseInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    formType: {
+      type: String,
+      default: "",
+    },
+    source: {//展示来源：manage  管理平台    visiual  可视化平台
+      type: String,
+      default: 'manage'
+    }
+  },
+  data () {
+    return {
+      uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
+      customerId: localStorage.getItem("customerId"),
+
+      btnDisabled: false,
+      btnType: "cancle",
+      isEdit: false,
+      tableData: [],
+      tempRow: {},
+
+      optionResult: [
+        {
+          label: "合格",
+          value: "0",
+        },
+        {
+          label: "不合格",
+          value: "1",
+        },
+      ],
+      optionStaff: [
+        // {
+        //   label: "人名",
+        //   value: "staffId",
+        // },
+      ],
+    };
+  },
+
+  computed: {
+    allowOperate () {
+      const {
+        enterpriseInfo: { agencyId },
+      } = this;
+      return agencyId && agencyId == this.$store.state.user.agencyId;
+    },
+  },
+  watch: {
+    enterpriseId: {
+      handler (val) {
+        console.log("val------points", val);
+        if (val.length > 0) {
+          this.btnDisabled = false;
+          this.getList();
+        } else this.btnDisabled = true;
+      },
+      immediate: true,
+    },
+  },
+
+  created () {
+    this.getOptionStaff();
+  },
+
+  methods: {
+    beforeImgUpload (file) {
+      console.log(file);
+      const isLt1M = file.size / 1024 / 1024 < 10;
+      const srcType = file.type;
+      const format = file.name.split(".").pop();
+
+      if (!isLt1M) {
+        this.$message.error("上传文件大小不能超过 10MB!");
+        return false;
+      }
+      if (srcType.indexOf("image") == -1) {
+        this.$message.error("仅限图片格式");
+        return false;
+      }
+      return true;
+    },
+
+    handleImgSuccess (res, row) {
+      console.log("handleImgSuccess", res);
+      if (res.code === 0 && res.msg === "success") {
+        row.imgList.push(res.data.url);
+        this.computeImgShowList(row);
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+
+    computeImgShowList (row) {
+      row.imgShowList = row.imgList.map((url) => {
+        return { name: "", url };
+      });
+    },
+
+    handleImgRemove (file, row) {
+      console.log("handleImgRemove", file);
+      let url = file.url || file.response.data.url;
+      if (url) {
+        row.imgList = row.imgList.filter((item) => item !== url);
+        this.computeImgShowList(row);
+      }
+    },
+
+    getRowClass ({ rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background: #2195fe; color: #fff;";
+      }
+    },
+
+    handleChange (row, type) {
+      console.log("type----", type);
+      if (type == "cancle") {
+        row = { ...this.tempRow };
+        row.isEdit = false;
+        if (this.btnType == "add") this.tableData.pop();
+        this.getList();
+        console.log("row----", row);
+      } else {
+        this.tempRow = { ...row };
+        row.isEdit = true;
+      }
+      this.btnType = type;
+      this.isEdit = !this.isEdit;
+    },
+
+    handleChangeStaff (row) {
+      const { staffId } = row;
+      const { optionStaff } = this;
+      let item = optionStaff.find((item) => item.value == staffId);
+      if (item) {
+        row.staffName = item.name;
+        row.mobile = item.mobile;
+      }
+    },
+
+    async getOptionStaff () {
+      let url = `/data/aggregator/org/staff-select-list/${this.$store.state.user.agencyId}`;
+      const { data, code, msg } = await requestPost(url, {});
+
+      if (code === 0) {
+        this.optionStaff = data || [];
+      } else {
+        this.$message.error("请求工作人员数据失败！");
+      }
+    },
+
+    async handleEdit (row) {
+      if (this.btnType == "add") this.save(row);
+      else this.edit(row);
+    },
+
+    handleAdd () {
+      this.btnType = "add";
+      this.isEdit = true;
+
+      const item = {
+        isEdit: true,
+        enterpriseId: this.enterpriseId,
+        patrolTime: "",
+        staffId: "",
+        staffName: "",
+        mobile: "",
+        result: "",
+        imgList: [],
+        reviewTime: "",
+      };
+      this.computeImgShowList(item);
+      this.tableData.push(item);
+    },
+
+    async save (row) {
+      const params = {
+        partyMemberId: this.enterpriseId,
+        ...row,
+      };
+      await this.$http
+        .post("/gov/org/enterprise/addorupdate-patrol", params)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          } else {
+            this.$message.success("保存成功");
+            row.isEdit = false;
+            this.isEdit = false;
+            this.btnType = "cancle";
+            this.getList();
+          }
+        })
+        .catch((err) => {
+          console.log("err", err);
+          return this.$message.error("网络错误");
+        });
+    },
+
+    async edit (row) {
+      const params = {
+        ...row,
+      };
+
+      await this.$http
+        .post("/gov/org/enterprise/addorupdate-patrol", params)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          } else {
+            this.$message.success("保存成功");
+            row.isEdit = false;
+            this.isEdit = false;
+            this.getList();
+          }
+        })
+        .catch((err) => {
+          console.log("err", err);
+          return this.$message.error("网络错误");
+        });
+    },
+
+    async del (row) {
+      await this.$http
+        .post(`/gov/org/enterprise/del-patrol/${row.patrolId}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          } else {
+            this.$message.success("删除成功");
+            this.getList();
+          }
+        })
+        .catch((err) => {
+          console.log("err", err);
+          return this.$message.error("网络错误");
+        });
+    },
+
+    async getList () {
+      const { enterpriseId } = this;
+
+      const params = {};
+
+      await this.$http
+        .post(`/gov/org/enterprise/patrollist/${enterpriseId}`, {
+          params,
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          } else {
+            this.tableData = res.data.list.map((item) => {
+              this.computeImgShowList(item);
+              return {
+                ...item,
+                isEdit: false,
+              };
+            });
+          }
+        })
+        .catch((err) => {
+          console.log("err", err);
+          return this.$message.error("网络错误");
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.m-record {
+  .mt10 {
+    margin-bottom: 10px;
+  }
+  .input-width {
+    width: 170px;
+  }
+}
+</style>