农村合作社 详情

src/views/cooperative/index.vue

@@ -110,6 +110,13 @@
           <el-button
             size="mini"
             type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            v-hasPermi="['system:cooperative:edit']"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:cooperative:remove']"
@@ -130,27 +137,29 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入供销社名称" maxLength="20" />
+          <el-input v-model="form.name" placeholder="请输入供销社名称" maxLength="20" :readonly="view"/>
         </el-form-item>
         <el-form-item label="地址" prop="address">
-          <el-input v-model="form.address" placeholder="请输入地址" maxLength="20" />
+          <el-input v-model="form.address" placeholder="请输入地址" maxLength="20" :readonly="view"/>
         </el-form-item>
         <el-form-item label="负责人" prop="chargePeople">
-          <el-input v-model="form.chargePeople" placeholder="请输入负责人" maxLength="20" />
+          <el-input v-model="form.chargePeople" placeholder="请输入负责人" maxLength="20" :readonly="view"/>
         </el-form-item>
         <el-form-item label="电话" prop="chargePhone">
-          <el-input v-model="form.chargePhone" placeholder="请输入负责人电话" maxLength="20" />
+          <el-input v-model="form.chargePhone" placeholder="请输入负责人电话" maxLength="20" :readonly="view"/>
         </el-form-item>
         <el-form-item label="图片" prop="imgUrl">
-          <image-upload v-model="form.imgUrl" :fileSize="10" :limit="1" />
+          <image-preview :src="form.imgUrl" :width="100" :height="100" v-if="view" />
+          <image-upload v-model="form.imgUrl" :fileSize="10" :limit="1" v-else />
         </el-form-item>
         <!--<el-form-item label="备注信息" prop="remark" maxLength="500">-->
           <!--<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />-->
         <!--</el-form-item>-->
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm" v-if="!view">确 定</el-button>
+        <el-button @click="cancel" v-if="!view">取 消</el-button>
+        <el-button @click="cancel" v-if="view">关 闭</el-button>
       </div>
     </el-dialog>
   </div>
@@ -169,6 +178,8 @@ export default {
       ids: [],
       // 选中名称数组
       names: [],
+      // 详情只读
+      view: false,
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -237,6 +248,7 @@ export default {
     },
     // 表单重置
     reset() {
+      this.view = false;
       this.form = {
         id: null,
         createBy: null,
@@ -287,6 +299,17 @@ export default {
         this.title = "修改供销合作社";
       });
     },
+    /** 详情按钮操作 */
+    handleView(row) {
+      this.reset();
+      this.view = true; // 开启详情只读
+      const id = row.id || this.ids
+      getCooperative(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "供销合作社详情";
+      });
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -341,3 +364,8 @@ export default {
   }
 };
 </script>
+<style scoped lang="scss">
+  /*::v-deep.hide .el-upload--picture-card {*/
+    /*display: none;*/
+  /*}*/
+</style>