feat: 添加站点风采

base-manager-ui/admin/src/components/YTable.vue

+<template>
+  <a-table
+    :columns="columns"
+    :data-source="data"
+    :bordered="bordered"
+    :defaultExpandAllRows="DefaultExpandAllRows"
+    :expandRowByClick="ExpandRowByClick"
+    :showHeader="ShowHeader"
+    :pagination="Pagination"
+    :rowKey="rowKey"
+    @change="handleTableChange"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template
+      slot-scope="text, record, index"
+      :slot="slot"
+      v-for="slot in Object.keys($scopedSlots).filter(
+        (key) => key !== 'expandedRowRender'
+      )"
+    >
+      <slot :name="slot" v-bind="{ text, record, index }"></slot>
+    </template>
+    <template :slot="slot" v-for="slot in Object.keys($slots)">
+      <slot :name="slot"></slot>
+    </template>
+    <template
+      slot-scope="record, index, indent, expanded"
+      :slot="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"
+    >
+      <slot
+        v-bind="{ record, index, indent, expanded }"
+        :name="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"
+      ></slot>
+    </template>
+  </a-table>
+</template>
+
+<script>
+import { pageSizeOptions } from "@/config/pageConfig.js";
+export default {
+  props: {
+    columns: {
+      required: true,
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      required: true,
+      type: Array,
+      default: () => [],
+    },
+    pageSize: {
+      required: true,
+      type: Number,
+      default: 10,
+    },
+    page: {
+      required: true,
+      type: Number,
+      default: 1,
+    },
+    total: {
+      required: true,
+      type: Number,
+      default: 0,
+    },
+    bordered: {
+      type: Boolean,
+      default: true,
+    },
+    defaultExpandAllRows: {
+      type: Boolean,
+      default: false,
+    },
+    expandRowByClick: {
+      type: Boolean,
+      default: false,
+    },
+    showHeader: {
+      type: Boolean,
+      default: true,
+    },
+    rowKey: {
+      type: [String, Function],
+      default: "id",
+    },
+    pagination: {
+      type: Object,
+      default: () => {},
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => pageSizeOptions,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    Bordered() {
+      return !!this.bordered;
+    },
+    DefaultExpandAllRows() {
+      return !!this.defaultExpandAllRows;
+    },
+    ExpandRowByClick() {
+      return !!this.expandRowByClick;
+    },
+    ShowHeader() {
+      return !!this.showHeader;
+    },
+    PageSize: {
+      get() {
+        return this.pageSize;
+      },
+      set(value) {
+        this.$emit("update:pageSize", value);
+      },
+    },
+    Current: {
+      get() {
+        return this.page;
+      },
+      set(value) {
+        this.$emit("update:page", value);
+      },
+    },
+    Pagination() {
+      return {
+        showTotal: (total) => `共 ${total} 条`,
+        total: this.total,
+        current: this.Current,
+        pageSize: this.pageSize,
+        showSizeChanger: true,
+        showQuickJumper: true,
+        pageSizeOptions: this.pageSizeOptions,
+        ...this.pagination,
+      };
+    },
+  },
+  methods: {
+    handleTableChange(pagination, filters, sorter, { currentDataSource }) {
+      let { current, pageSize } = pagination;
+      this.Current = current;
+      this.PageSize = pageSize;
+      if (this.$listeners.changePagination) {
+        this.$listeners.changePagination();
+      }
+      this.$emit("change", pagination, filters, sorter, { currentDataSource });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

base-manager-ui/admin/src/components/YUpload.vue

+<template>
+  <div class="y-upload">
+    <a-upload
+      v-if="listType == 'text' || listType == 'picture'"
+      :name="name"
+      :listType="listType"
+      :multiple="multiple"
+      :action="action"
+      :accept="accept"
+      :beforeUpload="beforeUpload"
+      :file-list="FileList"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @change="handleChange"
+      @preview="handlePreview"
+    >
+      <slot>
+        <a-button type="primary"> <a-icon type="upload" />点击上传</a-button>
+      </slot>
+    </a-upload>
+    <a-upload
+      v-else-if="listType == 'picture-card'"
+      :name="name"
+      :listType="listType"
+      :multiple="multiple"
+      :action="action"
+      :accept="accept"
+      :beforeUpload="beforeUpload"
+      :file-list="FileList"
+      v-bind="$attrs"
+      v-on="$listeners"
+      @change="handleChange"
+      @preview="handlePreview"
+    >
+      <slot>
+        <div>
+          <a-icon type="plus" />
+          <div class="ant-upload-text">点击上传</div>
+        </div>
+      </slot>
+    </a-upload>
+    <!-- 视频、音频预览 -->
+    <div class="modal" v-if="previewVisible">
+      <video
+        v-if="previewData.type == 'video'"
+        :src="previewData.url"
+        autoplay
+        muted
+        controls
+      ></video>
+      <audio
+        v-if="previewData.type == 'audio'"
+        :src="previewData.url"
+        autoplay
+        controls
+      ></audio>
+      <a-icon type="close-circle" @click="previewVisible = false" />
+    </div>
+  </div>
+</template>
+
+<script>
+// import { uploadFile } from "@/services/user";
+export default {
+  model: {
+    prop: "value",
+    event: "onChange",
+  },
+  components: {},
+  props: {
+    name: {
+      type: String,
+      default: "file",
+    },
+    listType: {
+      type: String,
+      default: "text",
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Array],
+      default: "",
+    },
+    // 文件限制
+    accept: {
+      type: String,
+      default: "",
+    },
+    // 上传数量
+    limit: {
+      type: Number,
+      validator: (value) => {
+        return value >= 0;
+      },
+      default: 1, // 0为不限制
+    },
+    // 上传文件大小限制mb 0为不限制
+    MB: {
+      type: Number,
+      validator: (value) => {
+        return value >= 0;
+      },
+      default: 10,
+    },
+    action: {
+      type: String,
+      default: "/base/file/commonupload",
+    },
+  },
+
+  data() {
+    return {
+      FileList: [],
+      imageType: ["png", "jpg", "jpeg", "gif", "svg"],
+      videoType: ["mp4", "avi", "wmv", "rmvb", "flv", "mkv"],
+      audioType: [
+        "mp3",
+        "wav",
+        "amr",
+        "aac",
+        "ogg",
+        "wma",
+        "flac",
+        "ape",
+        "mid",
+        "m4a",
+        "m4r",
+        "m4p",
+        "m4b",
+      ],
+      previewData: {
+        type: "",
+        url: "",
+      },
+      previewVisible: false,
+    };
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        if (newValue) {
+          if (Array.isArray(newValue)) {
+            this.FileList = newValue.map((v) => {
+              let index = v.lastIndexOf("/");
+              let name = v.slice(index + 1);
+              return {
+                uid: v,
+                name,
+                status: "done",
+                url: v,
+              };
+            });
+          } else {
+            this.FileList = newValue.split(",").map((v) => {
+              let index = v.lastIndexOf("/");
+              let name = v.slice(index + 1);
+              return {
+                uid: v,
+                name,
+                status: "done",
+                url: v,
+              };
+            });
+          }
+        } else {
+          this.FileList = [];
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+
+  computed: {},
+
+  created() {},
+
+  methods: {
+    customRequest() {
+      console.log(arguments);
+    },
+    handleChange({ file, fileList }) {
+      this.FileList = [...fileList];
+      if (file.status == "done" || file.status == "removed") {
+        if (file.response && file.response.code == -1) {
+          this.$message.error(file.response.msg);
+          fileList = fileList.filter((file) => file.response.code != -1);
+        }
+        if (this.limit) {
+          this.FileList = [...fileList].slice(-this.limit);
+        }
+        this.FileList = this.FileList.map((v) => {
+          if (v.response) {
+            v.url = v.response.url;
+          }
+          return v;
+        });
+
+        let value;
+        if (Array.isArray(this.value)) {
+          value = this.FileList.map((v) => v.url);
+        } else {
+          value = this.FileList.map((v) => v.url).join(",");
+        }
+        this.$emit("onChange", value);
+        this.$emit("onSuccess", { file, fileList });
+      }
+    },
+    beforeUpload(file) {
+      let isType = true;
+      let isExceed = true;
+      return new Promise((resolve) => {
+        if (this.accept) {
+          const fileType = this.accept.split(","); // 限制文件类型
+          let index = file.name.lastIndexOf(".");
+          let type = file.name.slice(index);
+          isType = fileType.includes(type);
+        }
+        if (!isType) {
+          let msg = this.accept.replaceAll(",", "或者");
+          this.$message.error(`请上传${msg}文件!`);
+        }
+
+        if (this.MB) {
+          isExceed = file.size / 1024 / 1024 <= this.MB;
+        }
+        if (!isExceed) {
+          this.$message.error(`文件大小不能超过${this.MB}MB!`);
+        }
+        if (isType && isExceed) {
+          resolve(file);
+        }
+      });
+    },
+    // 预览
+    handlePreview(file) {
+      let { url } = file;
+      if (!url) return;
+      let index = url.lastIndexOf(".");
+      let type = url.slice(index + 1);
+      if (this.imageType.includes(type)) {
+        this.$viewerApi({
+          images: [url],
+        });
+      } else if (this.videoType.includes(type)) {
+        this.previewData.type = "video";
+        this.previewData.url = url;
+        this.previewVisible = true;
+      } else if (this.audioType.includes(type)) {
+        this.previewData.type = "audio";
+        this.previewData.url = url;
+        this.previewVisible = true;
+      } else {
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = file.name;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      }
+    },
+    handleDownload(file) {
+      console.log(file);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.ant-upload-picture-card-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.modal {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  z-index: 999;
+  video {
+    height: 400px;
+  }
+  .anticon-close-circle {
+    font-size: 36px;
+    color: #fff;
+    cursor: pointer;
+  }
+}
+</style>

base-manager-ui/admin/src/components/ycheckbox/YCheckbox.vue

 <template>
   <div>
     <a-checkbox :checked="value" @change="onChange">
-      {{ checkText }}</a-checkbox
-    >
+      <slot></slot>
+    </a-checkbox>
   </div>
 </template>
 
@@ -16,10 +16,6 @@ export default {
     checked: {
       required: true,
     },
-    checkText: {
-      required: true,
-      default: "",
-    },
   },
   computed: {
     value() {
@@ -34,5 +30,4 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>
\ No newline at end of file

base-manager-ui/admin/src/pages/basicset/site/components/addsite.vue

@@ -181,19 +181,22 @@
             </a-col>
             <a-col :span="24">
               <a-form-model-item label="中心Logo" prop="logoPath">
-                <a-upload
-                  :action="api + 'base/file/commonupload'"
-                  list-type="picture-card"
-                  :file-list="fileList"
-                  @preview="handlePreview"
-                  @change="handleChange"
-                  :accept="accept"
-                >
-                  <div v-if="fileList.length < 1">
-                    <a-icon type="plus" />
-                    <div class="ant-upload-text">上传图片</div>
-                  </div>
-                </a-upload>
+                <YUpload
+                  accept=".png,.jpg,.jpeg,.svg"
+                  :limit="1"
+                  v-model="formInfo.logoPath"
+                  listType="picture-card"
+                ></YUpload>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-model-item class="site-style" label="站点风貌" prop="govAffairStyle">
+                <YUpload
+                  accept=".png,.jpg,.jpeg,.svg"
+                  :limit="0"
+                  v-model="formInfo.govAffairStyle"
+                  listType="picture-card"
+                ></YUpload>
               </a-form-model-item>
             </a-col>
           </a-row>
@@ -237,33 +240,12 @@
           </a-row>
           <a-form-model-item label="工作日">
             <y-checkbox
-              v-model="formInfo.workday1"
-              checkText="星期一"
-            ></y-checkbox>
-            <y-checkbox
-              v-model="formInfo.workday2"
-              checkText="星期二"
-            ></y-checkbox>
-            <y-checkbox
-              v-model="formInfo.workday3"
-              checkText="星期三"
-            ></y-checkbox>
-            <y-checkbox
-              v-model="formInfo.workday4"
-              checkText="星期四"
-            ></y-checkbox>
-            <y-checkbox
-              v-model="formInfo.workday5"
-              checkText="星期五"
-            ></y-checkbox>
-            <y-checkbox
-              v-model="formInfo.workday6"
-              checkText="星期六"
-            ></y-checkbox>
-            <y-checkbox
-              v-model="formInfo.workday7"
-              checkText="星期天"
-            ></y-checkbox>
+              v-model="formInfo[key]"
+              v-for="(v, key) in workday"
+              :key="key"
+            >
+              {{ v }}
+            </y-checkbox>
           </a-form-model-item>
           <a-row>
             <a-col :span="4">
@@ -306,9 +288,19 @@
 import { modelList, siteSave } from "@/services/basicsetFun";
 import YCheckbox from "@/components/ycheckbox/YCheckbox.vue";
 import YSwitch from "@/components/yswitch/YSwitch.vue";
+import YUpload from "@/components/YUpload.vue";
 // import options from "@/utils/city";
 import { regionData } from "element-china-area-data";
 import { checkPort, checkIp } from "@/utils/validate";
+const workday = {
+  workday1: "星期一",
+  workday2: "星期二",
+  workday3: "星期三",
+  workday4: "星期四",
+  workday5: "星期五",
+  workday6: "星期六",
+  workday7: "星期天",
+};
 export default {
   props: {
     formVisible: {
@@ -323,6 +315,7 @@ export default {
   components: {
     YCheckbox,
     YSwitch,
+    YUpload,
   },
   data() {
      // 验证手机号码
@@ -336,17 +329,8 @@ export default {
         callback();
       }
     };
-    // const changeLandline = (rule, value, callback) => {
-    //   if (!value) {
-    //     callback(new Error("请输入中心座机号"));
-    //     callback();
-    //   } else if (!/^[0][1-9]{2,3}-[0-9]{5,10}$/.test(value)) {
-    //     callback(new Error("格式：区号-电话号码"));
-    //   } else {
-    //     callback();
-    //   }
-    // };
     return {
+      workday,
       api: process.env.VUE_APP_API_BASE_URL + "/",
       accept: "image/jpeg,image/png", // 上传类型
       loading: false,
@@ -396,10 +380,10 @@ export default {
         onlineTake: 0, // 在线取号
         appointment: 0, // 微预约
         gowMap: 0, // 政务地图
+        govAffairStyle:'', // 站点风貌
       }, //表单提交数据
       indeterminate: true,
       checkAll: false,
-      fileList: [],
       formRules: {
         siteName: [
           {
@@ -595,14 +579,12 @@ export default {
     },
     //重置
     resetForm() {
-      this.fileList = [];
       this.cityData = [];
       this.$refs.ruleForm.resetFields();
     },
     // 关闭对话框
     closeModal() {
-      this.fileList = [];
-      this.$refs.ruleForm.resetFields();
+      this.resetForm();
       this.Visible = false;
     },
     // 新增
@@ -614,30 +596,43 @@ export default {
     // 编辑
     onEdit(data) {
       this.$nextTick(() => {
-        this.formInfo = { ...data };
-        this.areaInfo.areaID = this.formInfo.areaID;
-        this.areaInfo.areaCode = this.formInfo.areaCode;
-        this.areaInfo.areaName = this.formInfo.areaName;
-        this.cityData = [
-          this.formInfo.proCode,
-          this.formInfo.cityCode,
-          this.formInfo.districtCode,
-        ];
-        this.formInfo.modelIds = this.formInfo.modelIds.map(Number);
-        this.formInfo.amWorkStartTime = String(this.formInfo.amWorkStartTime);
-        this.formInfo.amWorkEndTime = String(this.formInfo.amWorkEndTime);
-        this.formInfo.pmWorkStartTime = String(this.formInfo.pmWorkStartTime);
-        this.formInfo.pmWorkEndTime = String(this.formInfo.pmWorkEndTime);
-        if (this.formInfo.logoPath) {
-          this.fileList = [
-            {
-              uid: -1,
-              status: "done",
-              name: this.formInfo.logoPath,
-              url: this.formInfo.logoPath,
-            },
-          ];
+        let {
+          areaID,
+          areaCode,
+          areaName,
+          proCode,
+          cityCode,
+          districtCode,
+          modelIds,
+          amWorkStartTime,
+          amWorkEndTime,
+          pmWorkStartTime,
+          pmWorkEndTime,
+        } = (this.formInfo = data);
+        this.areaInfo.areaID = areaID;
+        this.areaInfo.areaCode = areaCode;
+        this.areaInfo.areaName = areaName;
+        this.cityData = [proCode, cityCode, districtCode];
+        if (modelIds) {
+          this.formInfo.modelIds = modelIds && modelIds.map(Number);
         }
+        [
+          this.formInfo.amWorkStartTime,
+          this.formInfo.amWorkEndTime,
+          this.formInfo.pmWorkStartTime,
+          this.formInfo.pmWorkEndTime,
+        ] = [
+          amWorkStartTime,
+          amWorkEndTime,
+          pmWorkStartTime,
+          pmWorkEndTime,
+        ].map((v) => {
+          if (v) {
+            return String(v);
+          } else {
+            return "";
+          }
+        });
       });
     },
     // 保存
@@ -658,68 +653,20 @@ export default {
           this.loading = false;
           if (code === 1) {
             this.$message.success(msg);
-            this.fileList = [];
-            this.Visible = false;
+            this.closeModal();
             this.$parent.getSiteList({ areaID: this.areaInfo.areaID });
           }
         }
       });
     },
-    // 上传限制
-    beforeUpload(file) {
-      const isJpgOrPng =
-        file.type === "image/jpeg" || file.type === "image/png";
-      if (!isJpgOrPng) {
-        this.$message.error("请上传jpeg或者png图片!");
-      }
-      const isLt10M = file.size / 1024 / 1024 < 10;
-      if (!isLt10M) {
-        this.$message.error("图片大小不能超过10MB!");
-      }
-      return isJpgOrPng && isLt10M;
-    },
-    // 上传图片
-    handleChange({ file, fileList }) {
-      if (
-        file.status &&
-        file.status != "removed" &&
-        file.response &&
-        file.response.code == -1
-      ) {
-        this.$message.error(file.response.msg);
-        fileList = fileList.filter((file) => file.response.code != -1);
-      }
-      this.fileList = [...fileList].slice(-1);
-      this.fileList = this.fileList.map((v) => {
-        if (v.response) {
-          v.url = v.response.url;
-        }
-        return v;
-      });
-      if (this.fileList[0]) {
-        this.formInfo.logoPath = this.fileList[0].url;
-      } else {
-        this.formInfo.logoPath = "";
-      }
-      // if (info.file.status === "uploading") {
-      //   this.loading = true;
-      //   return;
-      // }
-      // if (info.file.status === "done") {
-      //   this.formInfo.logoPath = info.file.response.url;
-      //   this.loading = false;
-      // }
-    },
+
     // 预览logo
     handlePreview(info) {
       this.$viewerApi({
         images: [info.url],
       });
     },
-    // 删除logo
-    // handleRemove() {
-    //   this.formInfo.logoPath = "";
-    // },
+
     // 地址
     oncityChange(val) {
       [
@@ -728,6 +675,7 @@ export default {
         this.formInfo.districtCode,
       ] = val;
     },
+    // 获取详细地址经纬度
     getAddress(address) {
       this.$refs.ruleForm.validateField("detailAddress", (errVal) => {
         if (errVal !== "中心详细地址不能为空") {
@@ -833,4 +781,5 @@ export default {
     margin-bottom: 6px;
   }
 }
+
 </style>